搜尋 UI

概覽

您可以透過 <RootProvider /> 自訂搜尋 UI。

app/layout.tsx

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。

components/search.tsx

<SearchDialogList
  Item={(props) => (
    <SearchDialogListItem
      {...props}
      renderMarkdown={(text) => {
        // ...
      }}
    />
  )}
/>

表格

自訂結果中表格的算繪方式。自訂的 Table 會自行算繪各列資料：

components/search.tsx

<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) 自訂其樣式。

global.css

::highlight(fd-search) {
  color: var(--color-fd-primary-foreground);
  background-color: var(--color-fd-primary);
}

<SearchDialogList /> 會突顯 <SearchDialog /> 的 data 中的查詢字詞；若未提供，則改為突顯搜尋輸入框中的內容。

若您自行算繪搜尋結果，請使用 useHighlightQuery() 進行突顯。

components/search-result.tsx

'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 屬性的元素，其內部文字不會被突顯，例如元件的徽章。

概覽複製錨點連結

快速鍵複製錨點連結

參考資料複製錨點連結

自訂 UI複製錨點連結

內容算繪器複製錨點連結

表格複製錨點連結

醒目標示複製錨點連結

本頁目錄

概覽

快速鍵

參考資料

自訂 UI

內容算繪器

表格

醒目標示