搜索界面

概览

🌐 Overview

你可以从 <RootProvider /> 自定义搜索界面。

🌐 You can customise Search UI from <RootProvider />.

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, // disable search entirely
            SearchDialog, // replace search dialog
          }}
        >
          {children}
        </RootProvider>
      </body>
    </html>
  );
}

快捷键

🌐 Hot Keys

自定义快捷键以触发搜索对话框，默认是⌘K 或 Ctrl+K。

import { RootProvider } from 'fumadocs-ui/provider/<framework>';

<RootProvider
  search={{
    hotKey: [
      {
        display: 'K',
        key: 'k', // key code, or a function determining whether the key is pressed
      },
    ],
  }}
>
  {children}
</RootProvider>;

参考文献

🌐 References

完整的选项列表。

🌐 A full list of options.

Prop

Type

自定义界面

🌐 Custom UI

Fumadocs 用户界面还提供了一个更底层的 <SearchDialog /> 组件供高级使用，你可以创建自己的搜索对话框来替换默认的。

🌐 Fumadocs UI also exposes a lower level <SearchDialog /> component for advanced use, you can create your own search dialog to replace the default one.

'use client';
import React from 'react';
import {  } from 'fumadocs-core/search/client';
import {
  ,
  ,
  ,
  ,
  ,
  ,
  ,
  ,
  ,
  type ,
} from 'fumadocs-ui/components/dialog/search';
import {  } from 'fumadocs-ui/contexts/i18n';

export default function (: ) {
  const {  } = (); // (optional) for i18n
  const { , ,  } = ({
    : 'fetch',
    ,
  });

  return (
    < ={} ={} ={.} {...}>
      < />
      <>
        <>
          < />
          < />
          < />
        </>
        < ={. !== 'empty' ? . : null} />
      </>
      <></>
    </>
  );
}

高亮匹配项

🌐 Highlight Matches

搜索集成可以提供 contentWithHighlights 来高亮匹配项。

🌐 Search integrations can provide contentWithHighlights to highlight matches.

你可以自定义高亮显示的呈现方式。

🌐 You can customise how highlights are rendered.

components/search.tsx

<SearchDialogList
  items={query.data !== 'empty' ? query.data : null}
  Item={(props) => (
    <SearchDialogListItem
      {...props}
      renderHighlights={(highlights) => {
        // ...
      }}
    />
  )}
/>

概览

快捷键

参考文献

自定义界面

高亮匹配项

On this page