使用
使用 files 和 navigation 道具提供要搜索的内容。
您可以通过按下 K 或使用 ContentSearchButton 组件打开命令面板。您也可以通过 const { toggleContentSearch } = useUIState() 手动执行此操作。
您通常会在您的 app.vue 中使用此组件。
app.vue
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false })
const links = [{
label: 'Docs',
icon: 'i-heroicons-book-open',
to: '/getting-started'
}, {
label: 'Pro',
icon: 'i-heroicons-square-3-stack-3d',
to: '/pro'
}, {
label: 'Pricing',
to: '/pro/pricing',
icon: 'i-heroicons-ticket'
}, {
label: 'Templates',
icon: 'i-heroicons-computer-desktop',
to: '/pro/templates'
}, {
label: 'Releases',
icon: 'i-heroicons-rocket-launch',
to: '/releases'
}]
provide('navigation', navigation)
provide('files', files)
</script>
<template>
<Header :links="links" />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
<Footer />
<ClientOnly>
<LazyUContentSearch :files="files" :navigation="navigation" :links="links" />
</ClientOnly>
<UNotifications />
</template>
建议将 ContentSearch 组件包装在 ClientOnly 组件中，以便它不会在服务器上渲染。
files 从 /api/search.json 端点获取，要实现相同的效果，您需要创建一个服务器路由。
server/api/search.json.get.ts
import { serverQueryContent } from '#content/server'
export default eventHandler(async (event) => {
return serverQueryContent(event).where({ _type: 'markdown', navigation: { $ne: false } }).find()
})
我们建议使用这种方法，而不是直接获取文件，这样性能会更好。
颜色模式
默认情况下，会向命令面板添加一组命令，以便您可以切换亮模式和暗模式。这只有在 colorMode 在特定页面中没有强制时才会生效，可以通过 definePageMeta 实现
pages/index.vue
<script setup lang="ts">
definePageMeta({
colorMode: 'dark'
})
</script>
您也可以通过设置 hide-color-mode 道具手动禁用此行为： <UContentSearch hide-color-mode />。当您在您的 nuxt.config.ts 中为整个应用程序强制颜色模式时，这将非常有用。
nuxt.config.ts
export default defineNuxtConfig({
colorMode: {
preference: 'light'
}
})
道具
ui
any
{}files
ParsedContent[]
[]navigation
NavItem[]
[]links
ContentSearchLink[]
[]groups
Group[]
[]fuse
UseFuseOptions<Command>
{}modelValue
boolean
undefinedhideColorMode
boolean
false配置
{
padding: 'p-0 sm:p-4',
rounded: 'rounded-none sm:rounded-lg',
width: 'sm:max-w-3xl',
height: 'h-dvh sm:h-[28rem]',
commandPalette: {
input: {
height: 'h-[--header-height] sm:h-12',
icon: {
size: 'h-5 w-5',
padding: 'ps-11'
}
},
group: {
command: {
prefix: `!text-foreground after:content-['_>']`
}
},
container: 'scroll-py-10'
},
fileIcon: {
name: 'i-heroicons-document-text'
},
default: {
closeButton: {
icon: 'i-heroicons-document-text',
color: 'gray',
variant: 'ghost',
size: 'sm'
}
}
}