検索 UI
ドキュメント検索用の UI
概要
検索 UI は <RootProvider /> でカスタマイズできます。
import { RootProvider } from 'fumadocs-ui/provider/<framework>';
import type { ReactNode } from 'react';
import { SearchDialog } from '@/components/my-search-dialog';
export default function Layout({ children }: { children: ReactNode }) {
return (
<html>
<body>
<RootProvider
search={{
enabled: false, // 検索を完全に無効化
SearchDialog, // 検索ダイアログを置き換え
}}
>
{children}
</RootProvider>
</body>
</html>
);
}ホットキー
検索ダイアログを開くホットキーはカスタマイズできます。デフォルトは ⌘ K または Ctrl K です。
import { RootProvider } from 'fumadocs-ui/provider/<framework>';
<RootProvider
search={{
hotKey: [
{
display: 'K',
key: 'k', // キーコード、またはキーが押されたかどうかを判定する関数
},
],
}}
>
{children}
</RootProvider>;リファレンス
すべてのオプションの一覧です。
プロパティ
型
カスタム UI
Fumadocs UI は、高度な用途向けに低レベルの <SearchDialog /> コンポーネントも提供しています。これを使って独自の検索ダイアログを作成し、デフォルトの検索ダイアログと置き換えることができます。
'use client';
import React from 'react';
import { } from 'fumadocs-core/search/client';
import {
,
,
,
,
,
,
,
,
,
type SharedProps,
} from 'fumadocs-ui/components/dialog/search';
import { } from 'fumadocs-ui/contexts/i18n';
export default function (: SharedProps) {
const { } = (); // (任意) i18n 対応用
const = ({
,
});
return (
< {...} {...}>
< />
<>
<>
< />
< />
< />
</>
< />
</>
<>{/* フッターの要素 */}</>
</>
);
}コンテンツレンダラー
検索アイテムの Markdown コンテンツを独自にレンダリングしたい場合は、renderMarkdown を渡してください。
<SearchDialogList
Item={(props) => (
<SearchDialogListItem
{...props}
renderMarkdown={(text) => {
// ...
}}
/>
)}
/>テーブル
結果に含まれるテーブルのレンダリング方法をカスタマイズできます。カスタムの Table は、行を自前でレンダリングします。
<SearchDialogList
// カードを使わずに行を表示
Table={({ table, Item, onSelect }) =>
table.rows.map((row) => (
<Fragment key={row.id}>{Item({ item: row, onClick: () => onSelect(row) })}</Fragment>
))
}
/>ハイライト
検索クエリに一致した箇所は CSS Custom Highlight API でハイライトされます。スタイルは ::highlight(fd-search) で指定してください。
::highlight(fd-search) {
color: var(--color-fd-primary-foreground);
background-color: var(--color-fd-primary);
}<SearchDialogList /> は、<SearchDialog /> の data に含まれるクエリをハイライトします。data がない場合は、検索入力の内容をハイライトします。
検索結果を独自にレンダリングする場合は、useHighlightQuery() を使用してハイライトしてください。
'use client';
import { useHighlightQuery } from 'fumadocs-core/search/client';
import type { ReactNode } from 'react';
export function SearchResult({ query, children }: { query: string; children: ReactNode }) {
const ref = useHighlightQuery(query);
return <div ref={ref}>{children}</div>;
}data-highlight-ignore が指定された要素(コンポーネントのバッジなど)内のテキストはハイライトされません。
How is this guide?
最終更新日
General Translation
Ferry Health
assistant-ui
Inkeep