使用
搜索
通过一些简单的配置和可组合函数，您可以在 Nuxt 内容站点中添加搜索功能。
使用
首先，您需要在 nuxt.config.ts 中启用搜索功能。
nuxt.config.ts
export default defineNuxtConfig({
content: {
experimental: {
search: true
}
}
})
搜索
您可以使用 searchContent 可组合函数在 content 目录中搜索。
app.vue
<script lang="ts" setup>
const search = ref('')
const results = await searchContent(search)
</script>
<template>
<main>
<input v-model="search">
<pre>{{ results }} </pre>
</main>
</template>
默认情况下，searchContent 可组合函数将使用索引搜索。这意味着搜索速度更快，API 响应更小且经过优化。响应只能由 miniSearch 使用。
简单搜索
如果需要，您可以禁用索引搜索并使用简单搜索。
nuxt.config.ts
export default defineNuxtConfig({
content: {
experimental: {
search: {
indexed: false
}
}
}
})
请记住，简单搜索速度较慢，API 响应较大。您仍然可以使用与搜索类型无关的 searchContent 可组合函数。
自定义搜索
使用简单搜索（即非索引搜索），您可以使用您选择的工具在 API 响应中搜索。例如，您可以使用 fuse.js 与 @vueuse/integrations 集成。
composables/custom-search-content.ts
export default async function customSearchContent(search: Ref<string>) {
const runtimeConfig = useRuntimeConfig()
const { integrity, api } = runtimeConfig.public.content
const { data } = await useFetch(`${api.baseURL}/search${integrity ? '.' + integrity : ''}.json`)
const { results } = useFuse(search, data)
return results
}
配置
请阅读 配置部分 以详细了解搜索选项。