hexo博客使用algolia搜索

hexo博客的众多主题中，例如next、butterfly等，都支持多种搜索。本地搜索是其中最简单也是最不精确的一种。这次探讨的是如何装备使用第三方搜索 algolia，提供全文检索、秒级响应的搜索服务。

一、手动提交

这是使用 algolia 搜索相对简单的方法，没有申请门槛，注册即用。缺点是 algolia 不会自动爬取你的博客更新搜索结果。

1. 注册algolia

注册地址：dashboard.algolia.com/users/sign_up

2. 创建应用

注册成功后创建应用：dashboard.algolia.com/account/plan/create?from=dashboard

这里选不了亚洲地区，例如香港、日本、新加坡。

3. 创建索引

创建完应用后，按照下图所示创建索引。

4. 获取id

按照如图获取id

依次获取 appId、apiKey 和 adminApiKey。

5. 上传记录

进入博客目录，安装插件 hexo-algoliasearch

npm install hexo-algoliasearch --save

安装成功后在 _config.yml 配置 algolia，替换为第四步获取的三个id

algolia:
  appId: "Z7A3XW4R2I"
  apiKey: "12db1ad54372045549ef465881c17e743"
  adminApiKey: "40321c7c207e7f73b63a19aa24c4761b"
  chunkSize: 5000
  indexName: "my-hexo-blog"
  fields:
    - content:strip:truncate,0,500
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title

然后执行下面命令上传博客内容供 algolia 生成检索。

hexo clean && hexo generate && hexo algolia

插件会先删除 algolia 的检索记录，再将本地编译生成的 db.json 文件上传给 algolia 重新生成检索记录。如果带上参数 -n，插件会跳过删除检索记录。

6. 自动上传记录

可以知道，每次创建了文章就需要执行 hexo algolia 手动上传记录供algolia检索，这并不是优雅的事情。比较简单的方法就是修改 package.json

{
  ...
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
-    "deploy": "hexo deploy",
+    "deploy": "hexo deploy && hexo algolia",
    "server": "hexo server"
  },
  ...
}

修改 deploy 命令，每次 deploy 之后就会上传记录到 algolia，这算是比较简单的解决方法。

另一种方法就是借助 github 的工作流。在博客目录下创建文件： .github/workflows/algolia.yml，文件内容为:

name: Algolia Upload Records
on:
  push:
    branches
      - master   # 替换为你的分支名
jobs:
  algolia:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v3
        with:
          submodules: recursive
      - name: npm install
        run: |
          npm install hexo-cli && \
          npm install hexo-algoliasearch && \
          npx hexo generate && \
          npx hexo algolia -n

效果为：每次push代码到github上，就会自动执行 hexo algolia上传记录到 algolia，可以在 Actions 页查看工作流执行情况。

如果结合 github pages 就更加完美了，无服务器实现运行博客 + 搜索。

二、自动爬虫

algolia申请地址：docsearch.algolia.com/apply/，申请有一定的难度，优点就是 algolia 会定期自动爬取你的博客。申请后要等几天才能邮件回复，我等了一天时间。邮件截图如下:

申请下来后，邮件内附邀请地址，点击邀请地址 注册/登录algolia 以接受邀请，之后看到 algolia的应用和索引已经创建完成了，crawler也已经创建成功了。再细看却发现应用所有权在官方：

所以你看不到这个应用的 adminApiKey，因为这个应用不属于你。。。

这个事情对hexo并不友好，因为很多主题都是按照 hexo-algoliasearch 这个插件美化的，而插件自定义了索引结果，例如多了 permalink、title 等结果。怎么解决呢？

方法一就是自定义 crawler，②处就是抓取元素，③处就是将对应的变量作为索引的一个结果。

例如在②处添加

title: ["header h1", "article h1", "main h1", "h1", "head > title"],

然后在③处添加

"title",

那么索引结果就会出现title结果项。

方法二就是使用 algolia 回复邮件的方法，引入 css 和 js，然后将 container 换成hexo主题的搜索容器。例如 butterfly 主题为 #search-button

<script type="text/javascript">
  docsearch({
    apiKey: apiKey,
    indexName: index,
    container: '### REPLACE ME ###',
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script>

至此搜索将使用 algolia 原生的样式。