添加搜索功能
使用官方推荐的搜索方式
https://docusaurus.io/zh-CN/docs/search#using-algolia-docsearch
在项目执行命令
npm install --save @docusaurus/theme-search-algolia
在docusaurus.config.js文件中添加配置:
export default {
// ...
themeConfig: {
// ...
algolia: {
// The application ID provided by Algolia
appId: 'YOUR_APP_ID',
// Public API key: it is safe to commit it
apiKey: 'YOUR_SEARCH_API_KEY',
indexName: 'YOUR_INDEX_NAME',
// Optional: see doc section below
contextualSearch: true,
// Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.
externalUrlRegex: 'external\.com|domain\.com',
// Optional: Replace parts of the item URLs from Algolia. Useful when using the same search index for multiple deployments using a different baseUrl. You can use regexp or string in the `from` param. For example: localhost:3000 vs myCompany.com/docs
replaceSearchResultPathname: {
from: '/docs/', // or as RegExp: /\/docs\//
to: '/',
},
// Optional: Algolia search parameters
searchParameters: {},
// Optional: path for search page that enabled by default (`false` to disable it)
searchPagePath: 'search',
// Optional: whether the insights feature is enabled or not on Docsearch (`false` by default)
insights: false,
// Optional: whether you want to use the new Ask AI feature (undefined by default)
askAi: 'YOUR_ALGOLIA_ASK_AI_ASSISTANT_ID',
//... other Algolia params
},
},
};
contextualSearch (上下文搜索)
- 含义:这是 Docusaurus 最强大的功能之一。它会自动根据用户当前所处的语言(i18n)和版本(Versioning)来过滤搜索结果。
- 配置建议:保持
true。- 如果你有中文和英文版,开启后,用户在中文页面搜索时不会搜出英文结果。
externalUrlRegex (外部链接正则)
- 含义:当你用一个 Algolia 索引同时搜多个不同的网站时,如果搜索结果指向外部域名,Docusaurus 默认会尝试用单页应用(SPA)的方式跳转。设置这个正则可以强制浏览器通过
window.location(全页刷新)跳转到外部站点。 - 配置建议:如果你只搜索当前这一个网站,直接注释掉。
replaceSearchResultPathname (路径替换)
- 含义:如果 Algolia 爬虫抓取的 URL 路径和你现在的站点路径不一致,可以用这个修复。
- 场景例:爬虫抓到的路径是
mysite.com/docs/intro,但你的站点实际路径是mysite.com/intro(去掉了/docs/)。
- 场景例:爬虫抓到的路径是
- 配置建议:通常不需要。除非你发现搜索结果点击后报 404,才需要根据实际情况配置。
searchParameters (搜索参数)
- 含义:直接传递给 Algolia API 的原生参数(如过滤条件、命中数量等)。
- 配置建议:留空
{}。只有当你需要实现非常复杂的自定义过滤逻辑时才使用。
searchPagePath (搜索页面路径)
- 含义:是否启用一个独立的搜索详情页(即访问
your-site.com/search)。 - 配置建议:保持
'search'。这样用户按下回车键时会跳转到一个大的搜索结果列表页。如果不想要这个页面,设为false。
insights (用户行为分析)
- 含义:开启后会将用户的点击行为发送给 Algolia,帮助你在 Algolia 后台查看哪些搜索结果最受欢迎。
- 配置建议:建议
false(除非你有 Algolia 付费版或高级分析需求),开启会额外加载一个 JS 库。
askAi (AI 问答)
- 含义:Algolia 最近推出的“AI 助手”功能,类似网页版的 ChatGPT,基于你的文档内容回答问题。
- 配置建议:暂时注释掉。这需要你在 Algolia 后台单独创建一个 AI Assistant 实例并获取 ID。
首次建议配置参考如下:
algolia: {
appId: 'YOUR_APP_ID', // 必填
apiKey: 'YOUR_SEARCH_API_KEY', // 必填
indexName: 'YOUR_INDEX_NAME', // 必填
// 核心功能:建议保持 true
contextualSearch: true,
// 下面这些如果不需要特殊逻辑,可以全部删掉或注释
// 它们会自动使用 Docusaurus 的默认安全值
searchParameters: {},
searchPagePath: 'search',
insights: false,
},
在algolia网站获取appKey并验证
https://docsearch.algolia.com/

进入algolia网站,使用github账号登录,添加自己网站的域名,完成相关的配置即可,就可获得对应配置信息
appId: 'YOUR_APP_ID', // 必填
apiKey: 'YOUR_SEARCH_API_KEY', // 必填
indexName: 'YOUR_INDEX_NAME', // 必填
同时7天内需要验证自己的网站:
配置文件中添加meta相关信息即可
const config: Config = {
title: 'arkoco',
tagline: 'Welcome to my website',
favicon: 'img/logo.png',
headTags: [
{
tagName: 'meta',
attributes: {
name: 'algolia-site-verification',
content: '替换为algolia网站提供的',
},
},
],