LogoEKX.AI
  • 趋势
  • 回测
  • 扫描器
  • 功能
  • 价格
  • 博客
  • Reports
  • 联系我们
搜索
2025/02/15

搜索

在您的文档中实现文档搜索

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} />;
}
  1. 将 appId、apiKey 和 indexName 替换为您想要的值。

  2. 用您的新组件替换默认搜索对话框。

注意

内置实现不使用即时搜索(他们的官方 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 />;
}
  1. 将 endpoint、apiKey 替换为您想要的值。
  2. 用您的新组件替换默认搜索对话框。

Ready to test signals with real data?

Start scanning trend-oversold signals now

See live market signals, validate ideas, and track performance with EKX.AI.

Open ScannerView Pricing
全部文章

作者

avatar for MkSaaS模板
MkSaaS模板

分类

  • 公司
  • 新闻
搜索 UI配置自定义链接禁用搜索热键标签过滤器搜索选项替换搜索对话框其他解决方案Algolia标签过滤器Orama Cloud

更多文章

Statistical Reliability of Trading Signal Performance
产品

Statistical Reliability of Trading Signal Performance

Learn how to calculate the range of probable outcomes for trading signals using statistical bounds to improve risk management and strategy validation.

avatar for Jimmy Su
Jimmy Su
2026/01/05
Precision vs Recall for Crypto Pump Signals: Finding the Right Balance

Precision vs Recall for Crypto Pump Signals: Finding the Right Balance

Master the precision-recall tradeoff in crypto signal detection. Learn how to tune thresholds, reduce false positives, and optimize for your trading style.

avatar for Jimmy Su
Jimmy Su
2026/01/13
Liquidity Void in Crypto: How Thin Books Trigger Rapid Moves
产品

Liquidity Void in Crypto: How Thin Books Trigger Rapid Moves

Understand liquidity voids in crypto markets. Flash crash case studies, detection methods, and trading strategies for thin order books.

avatar for Jimmy Su
Jimmy Su
2025/12/30

邮件列表

加入我们的社区

订阅邮件列表,及时获取最新消息和更新

LogoEKX.AI

AI 比大众更早发现趋势资产

TwitterX (Twitter)Email
产品
  • 趋势
  • 回测
  • 扫描器
  • 功能
  • 价格
  • 常见问题
资源
  • 博客
  • Reports
  • 方法论
公司
  • 关于我们
  • 联系我们
法律
  • Cookie政策
  • 隐私政策
  • 服务条款
© 2026 EKX.AI All Rights Reserved.