搜索
在文档中实现文档搜索
搜索 UI
您可以从根提供者自定义一些配置。
例如，禁用搜索 UI：
import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
return (
<html>
<body>
<RootProvider
search={{
enabled: false,
}}
>
{children}
</RootProvider>
</body>
</html>
);
}热键
通过自定义热键来触发搜索对话框，默认是 ⌘ K 或 Ctrl K。
import { RootProvider } from 'fumadocs-ui/provider';
<RootProvider
search={{
hotKey: [
{
display: 'K',
key: 'k', // key code, or a function determining whether the key is pressed
},
],
}}
>
{children}
</RootProvider>;搜索客户端
您可以根据您的搜索引擎选择并配置搜索客户端，默认使用 Orama 搜索。
Orama (默认)
由 Orama 驱动的默认搜索引擎。
Algolia
使用 Fumadocs UI 与 Algolia。
Mixedbread
使用 Mixedbread 与 Fumadocs UI 一起。
Orama Cloud
使用 Orama Cloud 与 Fumadocs UI。
社区集成
社区维护的集成列表。
突出显示匹配项
搜索集成可以提供 contentWithHighlights 来突出显示匹配项。
在根据上述指南配置搜索客户端 UI 后，您可以自定义其渲染方式。
<SearchDialogList
items={query.data !== 'empty' ? query.data : null}
Item={(props) => (
<SearchDialogListItem
{...props}
renderHighlights={(highlights) => {
// ...
}}
/>
)}
/>How is this guide?
Last updated on