为博客添加 Algolia 全局搜索

Algolia 是一个数据库实时查找服务，能够提供毫秒级的数据库查找服务，而且其服务能以 API 的方式方便地布局到网页、客户端、APP 等多种场景。

作用预览

欢迎拜访我的博客：白雾苍茫丶

准备工作

由于我的博客的主题为 Butterfly，需求将版别更新至4.7.0及以上，不然以前的版别不支持 Docsearch。 你会在主题下面看到这个装备：

docsearch:
  enable: true
  appId: 
  apiKey: 
  indexName: 
  option:

{% span red, 假如是别的主题，请找到相应的装备并支持 Docsearch 查找 %}

Algolia 请求授权

首先，咱们翻开请求地址：Algolia 请求授权 翻开后填写地址、邮箱和库房地址等信息，这儿注意，网站需求是公开可拜访的：

填写完后，一般等候2-3天左右即可收到一封邮件：

里面包含了咱们装备所需求的信息：appId、apiKey、indexName。 官方邮箱地址：support@algolia.com

装备抓取脚本

在咱们请求通过后，咱们翻开办理后台：Algolia CRAWLER 刚开端咱们的 Indices 是没数据的，需求咱们去装备抓取脚本:

然后根据咱们博客的实际状况，装备爬虫的抓取逻辑：

这儿附上我的装备逻辑：

recordExtractor: ({ $, helpers }) => {
    const tags = new Array();
    $(".post-container-tags")
      .find("span.tags-name")
      .each(function () {
        tags.push($(this).text());
      });
    return helpers.docsearch({
      recordProps: {
        lvl1: [".post-title", "title"],
        content: [
          ".post-content p",
          ".post-content .tianliGPT-explanation",
          "#page p",
          ".page p",
          ".bber-content p",
        ],
        lvl0: {
          selectors: [".post-container-categories .categories-link"],
          defaultValue: "白雾苍茫丶导航菜单",
        },
        lvl2: [".post-content h2"],
        lvl3: [".post-content h3"],
        lvl4: [".post-content h4"],
        lvl5: [".post-content h5"],
        lvl6: [".post-content h6"],
        tags: {
          selectors: "",
          defaultValue: tags,
        },
      },
      aggregateContent: true,
      recordVersion: "v3",
    });
  },

装备完后，咱们能够在右边测试爬虫抓取的状况，假如抓取成功，控制台则会输出相应的数据：

承认没问题后，咱们点击右上角的 Save 按钮，然后返回办理面板，点击 Restart crawling 按钮：

然后等候脚本抓取数据就行了，不出意外都会抓取成功的，除非你的脚本装备不正确，成功后就能够在面本看到抓取记载：

点击 View in Algolia 进入 Index 办理面板，咱们就会看到咱们的抓取记载：

到这儿，咱们就完成一大半了。

装备博客

翻开主题目录下的 _config.yml 文件，找到 docsearch，填入邮件上的appId、apiKey、indexName:

# Algolia search
algolia_search:
  enable: false  
  hits:
    per_page: 6
# Local search
local_search:
  enable: false
  preload: false
  CDN:
# Docsearch
docsearch:
  enable: true
  appId: xxxxxx
  apiKey: xxxxxx
  indexName: xxxxxx
  option:
    placeholder: '输入关键词查找'

对应的 js 和 css 文件最好也改成咱们的 cdn 地址：

option:
  docsearch_js: https://ali-oss.xmwpro.com/cdn/js/docsearch.min.js
  docsearch_css: https://ali-oss.xmwpro.com/cdn/css/docsearch.min.css

最终履行夺命三连：hexo c、hexo g、hexo s，即可看到作用：

具体的装备，可检查文档：Algolia Docsearch

遇到的坑

1. 请求的域名，不能装备重定向(我就是由于博客域名装备了重定向，导致脚本抓取数据失利，捣鼓了一两天才搞好)
2. 脚本必定要根据博客的状况装备，由于每个人博客的布局不同，不然会导致抓取不到数据。

总结

Algolia 查找服务不止能够用在博客上，也能够用在公司和个人的项目中，装备也很简单，假如项目需求，就赶忙安排上吧。

好了，今天的文章就到这儿了，最近一直忙着更改博客域名，要等新域名存案成功，要重新装备图床的地址等操作，然后就能够开端写公众号等文章了。