搜尋 | MkSaaS - 最佳 AI SaaS 開發模板

Fumadocs UI 為你的文件提供了一個美觀的搜尋介面，而搜尋功能則由 Fumadocs Core 提供和記錄。

請參見文件搜尋。

搜尋 UI

使用 ⌘ K 或 Ctrl K 開啟。

設定

你可以透過根佈局中的 Root Provider 元件自訂搜尋 UI。

當未指定時，它使用由 Orama 提供支援的預設 fetch 搜尋客戶端。

自訂連結

向搜尋對話框新增自訂連結項目。當查詢為空時，它們會顯示為備選項。

app/layout.tsx

import { RootProvider } from 'fumadocs-ui/root-provider';

<RootProvider
  search={{
    links: [
      ['Home', '/'],
      ['Docs', '/docs'],
    ],
  }}
>
  {children}
</RootProvider>;

停用搜尋

要選擇退出文件搜尋，請在根提供者中停用它。

import { RootProvider } from 'fumadocs-ui/root-provider';

<RootProvider
  search={{
    enabled: false,
  }}
>
  {children}
</RootProvider>;

熱鍵

自訂觸發搜尋對話框的熱鍵。

import { 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>;

標籤篩選器

新增 UI 以變更篩選器。確保首先在搜尋伺服器上設定標籤篩選器。

import { RootProvider } from 'fumadocs-ui/root-provider';

<RootProvider
  search={{
    options: {
      defaultTag: 'value',
      tags: [
        {
          name: 'Tag Name',
          value: 'value',
        },
      ],
    },
  }}
>
  {children}
</RootProvider>;

搜尋選項

向搜尋客戶端傳遞選項，例如變更 Orama 搜尋伺服器的 API 端點：

import { RootProvider } from 'fumadocs-ui/root-provider';

<RootProvider
  search={{
    options: {
      api: '/api/search/docs',
    },
  }}
>
  {children}
</RootProvider>;

替換搜尋對話框

你可以用以下內容替換預設搜尋對話框：

components/search.tsx

'use client';
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} />;
}

要將其傳遞給 Root Provider，你需要一個帶有 use client 指令的包裝器。

provider.tsx

'use client';
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>
  );
}

使用它替代你之前的 Root Provider

layout.tsx

import { Provider } from './provider';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  );
}

其他解決方案

Algolia

關於設定指南，請參見整合 Algolia 搜尋。

雖然我們通常建議使用他們的客戶端 SDK 建置你自己的搜尋，但你也可以插入內建的對話框介面。

components/search.tsx

'use client';
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} />;
}

將 appId、apiKey 和 indexName 替換為你想要的值。
用你的新元件替換預設搜尋對話框。

注意

內建實作不使用即時搜尋（他們的官方 JavaScript 客戶端）。

標籤篩選器

與預設搜尋客戶端相同，你可以在對話框上設定標籤篩選器。

components/search.tsx

import SearchDialog from 'fumadocs-ui/components/dialog/search-algolia';

<SearchDialog
  defaultTag="value"
  tags={[
    {
      name: 'Tag Name',
      value: 'value',
    },
  ]}
/>;

Orama Cloud

關於設定指南，請參見整合 Orama Cloud。

components/search.tsx

'use client';

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 />;
}

將 endpoint、apiKey 替換為你想要的值。
用你的新元件替換預設搜尋對話框。

社群整合

由社群維護的整合清單。

Trieve Search

內建 UI

如果你想要使用內建的搜尋對話框 UI 而不是建置你自己的，你可以使用 SearchDialog 元件。

import {
  SearchDialog,
  type SharedProps,
} from 'fumadocs-ui/components/dialog/search';

export default function CustomSearchDialog(props: SharedProps) {
  return <SearchDialog {...props} />;
}

不穩定

這是一個內部 API，在迭代過程中可能會出現變更

搜尋

目錄