Trieve 搜索

这是社区维护的集成。

介绍

Trieve 集成会自动为站点搜索配置 Trieve 搜索。

默认情况下，它会为文档中的每个段落创建一个块，这是 Trieve 官方推荐的做法。

设置

安装依赖项

npm install trieve-ts-sdk trieve-fumadocs-adapter

在 Trieve 上注册

注册并创建一个数据集。然后获取 2 个 API 密钥，其中一个仅具有读取权限，另一个具有管理员权限，用于创建和删除块。将这些凭据存储在环境变量中。

注意

一个 API 密钥应仅具有读取权限，用于公共搜索界面，而另一个应具有管理员权限，用于创建和删除块。

同步数据集

通过预渲染静态路由导出搜索索引。

lib/export-search-indexes.ts

import { source } from '@/lib/source';
import { type TrieveDocument } from 'trieve-fumadocs-adapter/search/sync';

export async function exportSearchIndexes() {
  const results: TrieveDocument[] = [];

  for (const page of source.getPages()) {
    results.push({
      _id: page.url,
      structured: page.data.structuredData,
      url: page.url,
      title: page.data.title,
      description: page.data.description,
    });
  }

  return results;
}

app/static.json/route.ts

import { exportSearchIndexes } from '@/lib/export-search-indexes';

export const revalidate = false;

export async function GET() {
  return Response.json(await exportSearchIndexes());
}

创建一个脚本，sync 函数将同步搜索索引。

scripts/sync-content.ts

import * as fs from 'node:fs';
import { sync, type TrieveDocument } from 'trieve-fumadocs-adapter/search/sync';
import { TrieveSDK } from 'trieve-ts-sdk';

// 预渲染的 `static.json` 的路径，根据您的 React 框架选择一个
const filePath = {
  next: '.next/server/app/static.json.body',
  'tanstack-start': '.output/public/static.json',
  'react-router': 'build/client/static.json',
  waku: 'dist/public/static.json',
}['next'];

const content = fs.readFileSync(filePath);

const records: TrieveDocument[] = JSON.parse(content.toString());

const client = new TrieveSDK({
  apiKey: 'adminApiKey',
  datasetId: 'datasetId',
});

sync(client, records);

确保在构建后运行脚本：

package.json

{
  "scripts": {
    "build": "... && bun scripts/sync-content.ts"
  }
}

您也可以将其集成到 CI/CD 管道中。

搜索 UI

您可以使用他们的 SearchDialog 组件：

components/search.tsx

'use client';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
import SearchDialog from 'trieve-fumadocs-adapter/components/dialog/search';
import { TrieveSDK } from 'trieve-ts-sdk';

const trieveClient = new TrieveSDK({
  apiKey: 'readOnlyApiKey',
  datasetId: 'datasetId',
});

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

用您期望的值替换 apiKey 和 datasetId。
用您的新搜索对话框替换默认搜索对话框。

搜索客户端

添加 useTrieveSearch 钩子：

import { TrieveSDK } from 'trieve-ts-sdk';
import { useTrieveSearch } from 'trieve-fumadocs-adapter/search/trieve';

const client = new TrieveSDK({
  apiKey: 'readOnlyApiKey',
  datasetId: 'datasetId',
});

const { search, setSearch, query } = useTrieveSearch(client);

选项

标签过滤

要配置标签过滤，请将 tag 值添加到索引中。

import { sync } from 'trieve-fumadocs-adapter/search/sync';
import { TrieveSDK } from 'trieve-ts-sdk';

const client = new TrieveSDK({
  apiKey: 'adminApiKey',
  datasetId: 'datasetId',
});

const documents = records.map((index) => ({
  ...index,
  tag: 'value',
}));

sync(client, documents);

搜索 UI

启用标签过滤。

components/search.tsx

import SearchDialog from 'trieve-fumadocs-adapter/components/dialog/search';

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

搜索客户端

tag_set 字段是用于过滤的属性。要按标签过滤索引，请在 Trieve 搜索客户端上使用过滤器。

{
  "must": [
    {
      "field": "tag_set",
      "match": ["value"]
    }
  ]
}

或者使用 useTrieveSearch 钩子：

import { TrieveSDK } from 'trieve-ts-sdk';
import { useTrieveSearch } from 'trieve-fumadocs-adapter/search/trieve';

const client = new TrieveSDK({
  apiKey: 'readOnlyApiKey',
  datasetId: 'datasetId',
});

const { search, setSearch, query } = useTrieveSearch(
  client,
  undefined,
  '<your tag value>',
);

On this page