利用 Algolia DocSearch 为网站提供全文搜索能力

Astro 框架内置提供了基于 Pagefind 的搜索功能，但对于中文的支持并不好，而不具备即时建议等高级功能，在搜索效果和体验上均有所欠缺。

因此我们将搜索功能替换为 Algolia DocSearch，他是Free Algolia Search For Developer Docs，我们可以在其官网申请，只要保证我们的网站是公开且内容是技术向的，就可以免费使用。

申请 Algolia DocSearch

首先我们需要到 Algolia DocSearch 官网申请，点击 Apply 开始申请。

需要填写的信息包括网站的地址、联系邮箱、以及仓库地址，提交后等待审核通过的邮件即可。

我这里等待了三天就收到了审核通过的邮件，邮件中包含了apiKey等配置信息，也可以使用申请时的联系邮箱注册并登录到 Algolia 官网查看。

docsearch-approved

在 Astro 中配置 Algolia DocSearch

安装 Algolia DocSearch 的 npm 包

npm install @astrojs/starlight-docsearch

在 Astro 的`astro.config.mjs` 中配置 Algolia DocSearch

1// astro.config.mjs
2import { defineConfig } from 'astro/config';
3import starlight from '@astrojs/starlight';
4import starlightDocSearch from '@astrojs/starlight-docsearch';
5
6export default defineConfig({
7integrations: [
8    starlight({
9        title: '使用 DocSearch 的网站',
10        plugins: [
11            starlightDocSearch({
12                appId: 'YOUR_APP_ID',
13                apiKey: 'YOUR_SEARCH_API_KEY',
14                indexName: 'YOUR_INDEX_NAME',
15            }),
16        ],
17    }),
18],
19});

效果演示

docsearch-effect

ON THIS PAGE

#利用 Algolia DocSearch 为网站提供全文搜索能力

#申请 Algolia DocSearch

#在 Astro 中配置 Algolia DocSearch

#安装 Algolia DocSearch 的 npm 包