検索
ドキュメントサイトに検索機能を実装します
検索 UI
ドキュメント検索の UI をカスタマイズする方法については、検索 UI を参照してください。
検索クライアント
使用する検索エンジンに応じて、検索クライアントを選択・設定できます。デフォルトは ZBSearch です。
ZBSearch(デフォルト)
ZBSearch を基盤とするデフォルトの検索エンジンです。
Algolia
Fumadocs UI で Algolia を使用する方法。
FlexSearch
高速で軽量な検索エンジンです。
Meilisearch
Fumadocs UI で Meilisearch を使用する方法
Mixedbread
Fumadocs UI で Mixedbread を使用する方法
Orama Cloud
Fumadocs UI で Orama Cloud を使用する方法。
Typesense
Fumadocs UI で Typesense を使用する方法です。
カスタム検索
その他の検索ソリューションを利用する場合の設定です。
検索フック
検索クライアントには、useFetchSearch() や useAlgoliaSearch() などの React フックが用意されています。これらのフックは <SearchDialog /> の props を返します。
import { useFetchSearch } from 'fumadocs-core/search/client';
const search = useFetchSearch();
<SearchDialog {...search} {...props} />;これらのフックは、検索入力用の search と onSearchChange に加えて、次の値を返します。
data: 最後に成功した検索です。再検索中やエラー発生後も保持されます。items: その検索結果です。各結果のコンテンツは hast としてもパースされ、hastContentに格納されます。テーブルの行は 1 つのtableアイテムにまとめられます。query: 検索に使用されたクエリです。
error: 最後の検索が失敗した場合に設定されます。isLoading:searchに対する検索が処理中かどうかを示します。
他の検索エンジンを使用する場合は、メモ化した検索関数を experimental_useSearch() に渡してください。関数が変更されると、再検索が実行されます。
'use client';
import { useCallback } from 'react';
import { experimental_useSearch } from 'fumadocs-core/search/client';
import type { SortedResult } from 'fumadocs-core/search';
export function useMySearch(locale: string) {
const search = useCallback(
async (query: string): Promise<SortedResult[]> => {
const res = await fetch(`/api/my-search?${new URLSearchParams({ query, locale })}`);
return res.json();
},
[locale],
);
return experimental_useSearch(search);
}コミュニティによるインテグレーション
コミュニティがメンテナンスしているインテグレーションの一覧です。
How is this guide?
最終更新日
