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

准备工作

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

1
2
3
4
5
6
docsearch:
  enable: true
  appId: 
  apiKey: 
  indexName: 
  option:
如果是别的主题，请找到相应的配置并支持 Docsearch 搜索

Algolia 申请授权

首先，我们打开申请地址：Algolia 申请授权
打开后填写地址、邮箱和仓库地址等信息，这里注意，网站需要是公开可访问的：

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

里面包含了我们配置所需要的信息：appId、apiKey、indexName。
官方邮箱地址：support@algolia.com

配置抓取脚本

在我们申请通过后，我们打开管理后台：Algolia CRAWLER
刚开始我们的 Indices 是没数据的，需要我们去配置抓取脚本:

然后根据我们博客的实际情况，配置爬虫的抓取逻辑：

这里附上我的配置逻辑：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 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 地址：

1
2
3
option:
  docsearch_js: https://cdn.baiwumm.com/blog/js/docsearch.min.js
  docsearch_css: https://cdn.baiwumm.com/blog/css/docsearch.min.css

最后执行夺命三连：hexo c、hexo g、hexo s，即可看到效果：

具体的配置，可查看文档：Algolia Docsearch

遇到的坑

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

总结

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

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