likes
comments
collection
share

你有没有好奇过vue文档的检索是怎么实现的？

作者站长头像
站长
· 阅读数 20

利用 Algolia 可以让文档拥有类似vue文档的检索功能。

大概步骤

  1. 先注册一个 algolia 的账号猛击进入，嫌麻烦选择 github 即可。
  2. 向 algolia 发出申请，发出后等待回复。
  3. algolia工程师回复申请，确认你是否可以更改文档的内容增加css、js等。
  4. 回复 algolia 工程师 的确认邮件，表示自己可以。
  5. 收到申请成功的邮件
  6. 拿着邮件提供的信息，为文档增加检索。

申请的限制

你有没有好奇过vue文档的检索是怎么实现的？

详细步骤

一、 点击网址申请

algolia docsearch 申请网址

二、填写相关信息

网址是英文 谷歌翻译转换成了中文 你有没有好奇过vue文档的检索是怎么实现的？

三、加入计划

填写完成后点击加入计划即可 你有没有好奇过vue文档的检索是怎么实现的？

四、等待邮件回复

因为是在国外会有一定时差，耐心等候即可，邮件内包含一个链接如这个图片里的 support.algolia.com/hc/requests/529050（可能需要🪜）。 你有没有好奇过vue文档的检索是怎么实现的？

点击后页面大概是这样，这里可以进行回复查看申请进度。

你有没有好奇过vue文档的检索是怎么实现的？

五、收到回复

大概意思是：

为了实现 DocSearch 的搜索自动完成功能，您需要在页面中插入一个小的 JavaScript 片段：您能做到吗？

您是网站的维护者吗？请回复此电子邮件进行确认。 你有没有好奇过vue文档的检索是怎么实现的？

六、回复确认邮件

示例回复是的，我可以！ （注意要英文回复）

比较坑的点这里邮件回复的是 Clément VANNICATTE (Algolia) 对应上边图里的发信人而不是"Algolia Support"<support@algolia.com>，发信人收不到回复是不会继续处理的。

使用 163 邮箱 pc 回复默认是"Algolia Support"<support@algolia.com>，移动端应用是Clément VANNICATTE (Algolia)

正确的回复应该是类似这样

你有没有好奇过vue文档的检索是怎么实现的？

最后一次的回复是正确的（从图里不难看出我是用pc回复了3次后才反应过来🥶），所以使用163的话建议使用移动应用进行回复。

你有没有好奇过vue文档的检索是怎么实现的？

七、收到申请成功的邮件

申请邮件里会包含appId、apiKey、indexName

找不到的话就搜索下关键字，截图最后一行的对象里就是appId、apiKey、indexName 信息。

你有没有好奇过vue文档的检索是怎么实现的？

八、查看数据

这里没有数据是无法进行检索的 有数据直接跳过看下一步即可

你有没有好奇过vue文档的检索是怎么实现的？

如果没有数据就去查看 Crawler 配置

你有没有好奇过vue文档的检索是怎么实现的？

点击链接即可直达

你有没有好奇过vue文档的检索是怎么实现的？

点击图中框选的地方，进入控制台（下图是有数据的1.23k关键字） 你有没有好奇过vue文档的检索是怎么实现的？

你有没有好奇过vue文档的检索是怎么实现的？ renderJavaScript 这个配置默认是false 如果没有数据可以设置为true后复制 startUrls 到右侧输入框执行Run Test

执行正确会有如图输出 你有没有好奇过vue文档的检索是怎么实现的？

执行错误会有如图输出，没有抓取到数据 你有没有好奇过vue文档的检索是怎么实现的？

测试完成后点击 save 保存后返回 Overview 面板 执行 Restart crawling 按钮重新获取数据。 你有没有好奇过vue文档的检索是怎么实现的？

九、在应用内填入对应的信息

vitepress

你有没有好奇过vue文档的检索是怎么实现的？

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 猛击预览 的文档增加了文档检索功能。

有疑问可以进行回复但请提供尽可能多的信息，这样问题会更快的得到解决。

往期文章

转载自:https://juejin.cn/post/7178640669999628349
评论
请登录