为博客添加 Algolia 全局搜索

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

效果预览

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

准备工作

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

YML 复制代码

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

{% span red, 如果是别的主题，请找到相应的配置并支持 Docsearch 搜索 %}

Algolia 申请授权

首先，我们打开申请地址：Algolia 申请授权打开后填写地址、邮箱和仓库地址等信息，这里注意，网站需要是公开可访问的：填写完后，一般等待2-3天左右即可收到一封邮件：里面包含了我们配置所需要的信息：appId 、apiKey 、indexName 。官方邮箱地址：support@algolia.com

配置抓取脚本

在我们申请通过后，我们打开管理后台：Algolia CRAWLER 刚开始我们的 Indices 是没数据的，需要我们去配置抓取脚本: 然后根据我们博客的实际情况，配置爬虫的抓取逻辑：这里附上我的配置逻辑：

JavaScript 复制代码

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:

YML 复制代码

# 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 地址：

YML 复制代码

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

遇到的坑

申请的域名，不能配置重定向(我就是因为博客域名配置了重定向，导致脚本抓取数据失败，捣鼓了一两天才搞好)
脚本一定要根据博客的情况配置，因为每个人博客的布局不同，不然会导致抓取不到数据。

总结

Algolia 搜索服务不止可以用在博客上，也可以用在公司和个人的项目中，配置也很简单，如果项目需要，就赶紧安排上吧。

好了，今天的文章就到这里了，最近一直忙着更改博客域名，要等新域名备案成功，要重新配置图床的地址等操作，然后就可以开始写公众号等文章了。