Fumadocs UI 为您的文档提供了一个美观的搜索界面，而搜索功能则由 Fumadocs Core 提供和记录。
参见文档搜索。
使用 ⌘ K 或 Ctrl K 打开。
您可以通过根布局中的 Root Provider 组件自定义搜索 UI。
当未指定时，它使用由 Orama 提供支持的默认 fetch 搜索客户端。
向搜索对话框添加自定义链接项。
当查询为空时，它们会显示为备选项。
添加 UI 以更改过滤器。
确保首先在搜索服务器上配置标签过滤器。
向搜索客户端传递选项，例如更改 Orama 搜索服务器的 API 端点：
要将其传递给 Root Provider，您需要一个带有 use client 指令的包装器。
虽然我们通常建议使用他们的客户端 SDK 构建您自己的搜索，但您也可以插入内置的对话框接口。
-
将 appId、apiKey 和 indexName 替换为您想要的值。
-
用您的新组件替换默认搜索对话框。
注意
内置实现不使用即时搜索（他们的官方 JavaScript 客户端）。
与默认搜索客户端相同，您可以在对话框上配置标签过滤器。
邮件订阅
获取最新消息和更新
订阅邮件列表，及时获取最新消息和更新
from
'fumadocs-ui/root-provider'
;
<RootProvider
search={{
links: [
['Home', '/'],
['Docs', '/docs'],
],
}}
>
{children}
</RootProvider>;
from
'fumadocs-ui/root-provider'
;
<RootProvider
search={{
enabled: false,
}}
>
{children}
</RootProvider>;
from
'fumadocs-ui/root-provider'
;
<RootProvider
search={{
hotKey: [
{
display: 'K',
key: 'k', // key code, or a function determining whether the key is pressed
},
],
}}
>
{children}
</RootProvider>;
from
'fumadocs-ui/root-provider'
;
<RootProvider
search={{
options: {
defaultTag: 'value',
tags: [
{
name: 'Tag Name',
value: 'value',
},
],
},
}}
>
{children}
</RootProvider>;
from
'fumadocs-ui/root-provider'
;
<RootProvider
search={{
options: {
api: '/api/search/docs',
},
}}
>
{children}
</RootProvider>;
;
import SearchDialog from 'fumadocs-ui/components/dialog/search-default';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
export default function CustomDialog(props: SharedProps) {
// your own logic here
return <SearchDialog {...props} />;
}
import { RootProvider } from 'fumadocs-ui/provider';
import dynamic from 'next/dynamic';
import type { ReactNode } from 'react';
const SearchDialog = dynamic(() => import('@/components/search')); // lazy load
export function Provider({ children }: { children: ReactNode }) {
return (
<RootProvider
search={{
SearchDialog,
}}
>
{children}
</RootProvider>
);
}
from
'./provider'
;
import type { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body>
<Provider>{children}</Provider>
</body>
</html>
);
}
;
import algo from 'algoliasearch/lite';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
import SearchDialog from 'fumadocs-ui/components/dialog/search-algolia';
const client = algo('appId', 'apiKey');
const index = client.initIndex('indexName');
export default function CustomSearchDialog(props: SharedProps) {
return <SearchDialog index={index} {...props} />;
}
from
'fumadocs-ui/components/dialog/search-algolia'
;
<SearchDialog
defaultTag="value"
tags={[
{
name: 'Tag Name',
value: 'value',
},
]}
/>;
;
import { OramaClient } from '@oramacloud/client';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
import SearchDialog from 'fumadocs-ui/components/dialog/search-orama';
const client = new OramaClient({
endpoint: 'endpoint',
api_key: 'apiKey',
});
export default function CustomSearchDialog(props: SharedProps) {
return <SearchDialog {...props} client={client} showOrama />;
}
搜索 | MuseMVP - 独立开发者的 MVP 灵感之源
