跳至主内容
版本：旧版 (v3.x)

入门指南

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

信息

以下内容适用于 DocSearch v3。 如果您正在使用 DocSearch v2，请参阅 旧版 文档。

如果您正在寻找 DocSearch v4，请查看文档 此处。

简介​

DocSearch v3 基于最新版 Algolia Autocomplete 构建，提供更好的可访问性、更强的响应能力、主题定制能力、更优的内置设计以及低网络环境下的可定制性。

此版本已使用 React 重写，现提供 React 组件。Vanilla JavaScript 版本基于 React 版本实现，并通过 Preact 别名提供。

稳定版本​

随着 Algolia Autocomplete 稳定版的发布以及 DocSearch v3 的广泛采用，我们将着手推出稳定版本！

感谢所有 Alpha 测试者，以及已经支持它的 所有集成！

安装​

DocSearch 软件包已在 npm 注册表提供。

yarn add @docsearch/js@3
# or
npm install @docsearch/js@3

Without package manager​

If you don't want to use a package manager, you can add the CSS to the <head> of your website:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />

And the JavaScript at the end of your <body>:

<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>

提升首次查询速度​

您可通过添加 preconnect 提示浏览器提升首次查询速度，详见 #preconnect

实现​

To get started, you need a container for your DocSearch component to go in. If you don’t have one already, you can insert one into your markup:

<div id="docsearch"></div>

Then, insert DocSearch into it by calling the docsearch function and providing the container. It can be a CSS selector or an Element.

Make sure to provide a container (for example, a div), not an input. DocSearch generates a fully accessible search box for you.

import docsearch from '@docsearch/js';

import '@docsearch/css';

docsearch({
  container: '#docsearch',
  appId: 'YOUR_APP_ID',
  indexName: 'YOUR_INDEX_NAME',
  apiKey: 'YOUR_SEARCH_API_KEY',
});

测试​

如果您迫不及待想测试 DocSearch v3，又等不及接收凭证，可以使用我们的测试凭证！

docsearch({
  appId: 'PMZUYBQDAK',
  apiKey: '24b09689d5b4223813d9b8e48563c8f6',
  indexName: 'docsearch',
});

筛选搜索结果​

如果您的网站支持 DocSearch 元标签 或已在配置中添加 自定义变量，您将能够使用 facetFilters 选项将搜索结果限定在某个 facet 范围内

这有助于将搜索范围限定在单一语言或单一版本

docsearch({
  searchParameters: {
    facetFilters: ['language:en', 'version:1.0.0'],
  },
});

发送事件​

您可以在创建 DocSearch 实例时传入 insights 参数，从而将搜索事件发送到您的 DocSearch 索引

docsearch({
  searchParameters: {
    facetFilters: ['language:en', 'version:1.0.0'],
  },
  insights: true,
});

性能优化​

预连接​

通过将此代码片段添加到网站的 head 中，您可以提示浏览器网站将从 Algolia 加载数据，并允许其预连接到 DocSearch 集群。这使得首次查询速度更快，尤其是在移动设备上。

<link rel="preconnect" href="https://YOUR_APP_ID-dsn.algolia.net" crossorigin />