搜尋 | Formion — 企業組織與營運的結構化引擎

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 替換為您想要的值。
用您的新組件替換預設搜尋對話框。

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 替換為您想要的值。
用您的新組件替換預設搜尋對話框。

搜尋

搜尋 UI

配置

自定義鏈接

禁用搜尋

熱鍵

標籤過濾器

搜尋選項

替換搜尋對話框

其他解決方案

Algolia

標籤過濾器

Orama Cloud

作者

分類

更多文章

快速入門

手動安裝

Markdown

加入我們的社區

搜尋

搜尋 UI

配置

自定義鏈接

禁用搜尋

熱鍵

標籤過濾器

搜尋選項

替換搜尋對話框

其他解決方案

Algolia

標籤過濾器

Orama Cloud

作者

分類

更多文章

快速入門

手動安裝

Markdown

加入我們的社區