Trieve 搜索

这是一个由社区维护的集成。

介绍

🌐 Introduction

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

🌐 The Trieve Integration automatically configures Trieve Search for site search.

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

🌐 By default, it creates a chunk for each paragraph in your document, it is officially recommended by Trieve.

安装

🌐 Setup

安装依赖

🌐 Install Dependencies

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

🌐 Sign up on Trieve

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

🌐 Sign up and create a dataset. Then obtain 2 API keys where one has only read access and the other has admin access to create and delete chunks. Store these credentials in environment variables.

通知

一个 API 密钥应该仅对面向公众的搜索具有读取权限，另一个应具有管理权限以创建和删除数据块。

同步数据集

🌐 Sync Dataset

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

🌐 Export the search indexes by pre-rendering a static route.

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 函数将同步搜索索引。

🌐 Create a script, the sync function will sync search indexes.

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';

// the path of pre-rendered `static.json`, choose one according to your React framework
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);

确保在构建后运行脚本：

🌐 Make sure to run the script after build:

package.json

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

你还可以将其集成到你的 CI/CD 流水线中。

搜索界面

🌐 Search UI

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

🌐 You can use their SearchDialog component:

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 替换为你想要的值。
用你新的搜索对话框替换默认的搜索对话框。

搜索客户

🌐 Search Client

添加 useTrieveSearch 钩子：

🌐 Add the useTrieveSearch hook:

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);

选项

🌐 Options

标签过滤

🌐 Tag Filter

要配置标签过滤，请在索引中添加一个 tag 值。

🌐 To configure tag filtering, add a tag value to indexes.

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);

搜索界面

🌐 Search UI

启用标签筛选。

🌐 Enable Tag Filter.

components/search.tsx

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

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

搜索客户

🌐 Search Client

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

🌐 The tag_set field is an attribute for filtering. To filter indexes by tag, use the filter on Trieve search clients.

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

或者使用 useTrieveSearch 钩子：

🌐 Or with useTrieveSearch hook:

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