queryCollectionSearchSections
queryCollectionSearchSections composable 从一个集合生成可搜索的 section,以增强内容发现。
类型
function queryCollectionSearchSections(collection: keyof Collections, opts?: { ignoredTags: string[] }): ChainablePromise<T, Section[]>
interface ChainablePromise<T extends keyof PageCollections, R> extends Promise<R> {
where(field: keyof PageCollections[T] | string, operator: SQLOperator, value?: unknown): ChainablePromise<T, R>
andWhere(groupFactory: QueryGroupFunction<PageCollections[T]>): ChainablePromise<T, R>
orWhere(groupFactory: QueryGroupFunction<PageCollections[T]>): ChainablePromise<T, R>
order(field: keyof PageCollections[T], direction: 'ASC' | 'DESC'): ChainablePromise<T, R>
}
用法
使用自动导入的 queryCollectionSearchSections 从特定集合生成可搜索的 section。这对于在你的应用程序中创建高级搜索功能或内容发现功能特别有用。
app.vue
<script>
const { data: sections } = await useAsyncData('search-sections', () => {
return queryCollectionSearchSections('docs')
})
</script>
queryCollectionSearchSections 实用工具在 Vue 和 Nitro 中都可用。查看 服务器端用法 以获取有关如何在服务器端使用它的更多详细信息。API
queryCollectionSearchSections(collection: CollectionName, options?: SearchSectionsOptions)
从指定的集合生成可搜索的 section。
- Parameters:
collection: 在content.config.ts中定义的集合的键。options: (可选) 包含以下属性的对象:ignoredTags: 一个在生成 section 时要忽略的标签名称数组。默认为空数组。
- Returns: 一个 Promise,它解析为一个可搜索的 section 数组。每个 section 都是一个具有以下属性的对象:
id: section 的唯一标识符。title: section 的标题(通常是标题文本)。titles: 一个父 section 标题数组,表示层级结构。content: section 的文本内容。level: section 的标题级别 (1-6),其中 1 是最高级别。
示例
以下是如何使用 queryCollectionSearchSections 从 'docs' 集合创建可搜索 section 的示例:
pages/[...slug].vue
<script>
const { data: surround } = await useAsyncData('foo-surround', () => {
return queryCollectionSearchSections('docs', {
ignoredTags: ['code']
})
})
</script>
服务器端用法
Nuxt Content 提供了一个类似的实用程序,用于在服务器端查询集合。唯一的区别是你需要将 event 作为第一个参数传递给 queryCollectionSearchSections 函数。
server/api/search-sections.ts
export default eventHandler(async (event) => {
const sections = await queryCollectionSearchSections(event, 'docs')
return sections
})
请确保创建包含以下内容的
server/tsconfig.json 文件以避免类型错误。{
"extends": "../.nuxt/tsconfig.server.json"
}