Docusaurus中使用Algolia的DocSearch搜索功能
前言: Algolia 是什么?
Algolia 是一个搜索、推荐服务平台,可以通过简单的配置来为站点添加全文检索功能
基本原理:
通过爬虫对目标网站的内容创建 Records (记录), 在用户搜索时调用接口返回相关内容
一. 需求描述
为网站添加 实时搜索, 采用 Docusaurus2 官方支持的 Algolia DocSearch
Docsearch 每周一次爬取网站 (可在网页界面上配置具体时间), 并将所有内容汇总到一个 Algolia 索引中
随后,前端页面会调用 Algolia API 来直接查询这些内容
Docusaurus 搜索功能文档
二. 准备工作
- Docsearch 官网申请 前置条件:
准备项目域名地址 - 本案例: https://wiki.chn.gg/
备注 如没有 服务器和域名 也可用 GitHub Pages
前置条件准备完成后, 就可到 Docsearch 注册
提交后大约 2天内会收到 反馈邮件, 通知注册成功
- 获取 Application ID & API Keys 前往 Algolia 官网, 登录账户 创建 Application
设置 Application 名称, 选择免费计划
最后选择响应速度快的服务后, 创建成功✅
控制台打开 设置页面,点击 API keys
找到 接下来本地配置需要的数据
三. 本地 Algolia Docsearch配置
- .env (键值不带双引号)
APPLICATION_ID=Application ID
API_KEY=Admin API Key # 务必确认, 这是坑点 不要用 'Write API Key' 或者 'Search API Key'
- docusaurus.config.js
module.exports = {
// ...
presets: [[
// ...
"classic",
/** @type {import('@docusaurus/preset-classic').Options} */
({
// 这个插件会为你的站点创建一个站点地图
// 以便搜索引擎的爬虫能够更准确地爬取你的网站
sitemap: {
changefreq: "weekly",
priority: 0.5,
ignorePatterns: ["/tags/**"],
filename: "sitemap.xml",
},
})
]],
// ...
themeConfig: {
// ...
algolia: {
appId: 'YOUR_APP_ID', // Application ID
// 公开 API密钥:提交它没有危险
apiKey: 'YOUR_SEARCH_API_KEY', // Search-Only API Key
indexName: 'YOUR_INDEX_NAME'
},
}
}
docsearch-config.json
(爬虫配置文件)
需修改3处:
- index_name
- start_urls
- sitemap_urls
{
"index_name": "wiki",
"start_urls": [
"https://wiki.chn.gg/"
],
"sitemap_urls": [
"https://wiki.chn.gg/sitemap.xml"
],
"sitemap_alternate_links": true,
"stop_urls": [
"/tests"
],
"selectors": {
"lvl0": {
"selector": "(//ul[contains(@class,'menu__list')]//a[contains(@class, 'menu__link menu__link--sublist menu__link--active')]/text() | //nav[contains(@class, 'navbar')]//a[contains(@class, 'navbar__link--active')]/text())[last()]",
"type": "xpath",
"global": true,
"default_value": "Documentation"
},
"lvl1": "header h1",
"lvl2": "article h2",
"lvl3": "article h3",
"lvl4": "article h4",
"lvl5": "article h5, article td:first-child",
"lvl6": "article h6",
"text": "article p, article li, article td:last-child"
},
"strip_chars": " .,;:#",
"custom_settings": {
"separatorsToIndex": "_",
"attributesForFaceting": [
"language",
"version",
"type",
"docusaurus_tag"
],
"attributesToRetrieve": [
"hierarchy",
"content",
"anchor",
"url",
"url_without_anchor",
"type"
]
},
"js_render": true,
"conversation_id": [
"833762294"
],
"nb_hits": 46250
}
四. 执行爬虫程序 - docsearch-scraper
以下两种 爬虫方式任选其一即可 (推荐使用 GitHub Actions)