利用 Algolia 可以让文档拥有类似vue文档的检索功能。
大概步骤
- 先注册一个
algolia的账号猛击进入，嫌麻烦选择github即可。 - 向
algolia发出申请，发出后等待回复。 - algolia工程师回复申请，确认你是否可以更改文档的内容增加css、js等。
- 回复 algolia 工程师 的确认邮件，表示自己可以。
- 收到申请成功的邮件
- 拿着邮件提供的信息，为文档增加检索。
申请的限制
详细步骤
一、 点击网址申请
二、填写相关信息
网址是英文 谷歌翻译转换成了中文
三、加入计划
填写完成后点击加入计划即可
四、等待邮件回复
因为是在国外会有一定时差，耐心等候即可，邮件内包含一个链接如这个图片里的 support.algolia.com/hc/requests/529050（可能需要🪜）。
点击后页面大概是这样，这里可以进行回复查看申请进度。
五、收到回复
大概意思是：
为了实现 DocSearch 的搜索自动完成功能，您需要在页面中插入一个小的 JavaScript 片段：您能做到吗？
您是网站的维护者吗？请回复此电子邮件进行确认。
六、回复确认邮件
示例回复是的，我可以！ （注意要英文回复）
比较坑的点这里邮件回复的是 Clément VANNICATTE (Algolia) 对应上边图里的发信人而不是"Algolia Support"<support@algolia.com>，发信人收不到回复是不会继续处理的。
使用 163 邮箱 pc 回复默认是"Algolia Support"<support@algolia.com>，移动端应用是Clément VANNICATTE (Algolia)
正确的回复应该是类似这样
最后一次的回复是正确的（从图里不难看出我是用pc回复了3次后才反应过来🥶），所以使用163的话建议使用移动应用进行回复。
七、收到申请成功的邮件
申请邮件里会包含appId、apiKey、indexName
找不到的话就搜索下关键字，截图最后一行的对象里就是appId、apiKey、indexName 信息。
八、查看数据
这里没有数据是无法进行检索的 有数据直接跳过看下一步即可
如果没有数据就去查看 Crawler 配置
点击链接即可直达
点击图中框选的地方，进入控制台（下图是有数据的1.23k关键字）
renderJavaScript 这个配置默认是false 如果没有数据可以设置为true后复制 startUrls 到右侧输入框执行Run Test
执行正确会有如图输出
执行错误会有如图输出，没有抓取到数据
测试完成后点击 save 保存后返回 Overview 面板 执行 Restart crawling 按钮重新获取数据。
九、在应用内填入对应的信息
vitepress
const config = defineConfig({
title: 'Vue DevUI',
description: 'Vue DevUI 组件库',
themeConfig: {
algolia: {
appId: 'HOQD3NUZNM',
apiKey: '07456b4a262e8c84eb892088e5cc3791',
indexName: 'vue-devui'
},
},
})
export default config
其他
可以直接参考官方给的例子猛击查看示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>algolia</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"/>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
</head>
<body>
<div id="docsearch" style="width: 100px;height: 100px"></div>
<script type="text/javascript">
docsearch({
appId: 'HOQD3NUZNM',
apiKey: '07456b4a262e8c84eb892088e5cc3791',
indexName: 'vue-devui',
container: '#docsearch',
debug: false
});
</script>
</body>
</html>
总结
本文详细实践了如何为文档增加 algolia 检索，最终也是为 vue devui 猛击预览 的文档增加了文档检索功能。
有疑问可以进行回复但请提供尽可能多的信息，这样问题会更快的得到解决。
2023-08-22 更新
algolia 申请貌似做了优化简化了步骤，发送完申请后官方会直接回复结果而无需再次确认。
这里可以看到申请时间大概是 晚21:29 对应国外 早6:29
然后晚22:06，对应国外 早7:06 邮件告知已经可以了
在然后晚22:23，对应国外 早7:23 就邮件发送了相关信息。
国外上班这么早的吗？不过有一说一一个小时处理完成这个速度确实好评！
