随着网站的内容变多，站内搜索变得至关重要。像我们常用的 Vue、React 等文档站点，都添加了全文搜索功能，并且都使用了 algolia。跟着这篇文章我们一起了解下什么是 algolia、如何给自己的博客添加全文搜索。

algolia 是什么？

algolia 是一个搜索、推荐服务平台，可以通过简单的配置来为站点添加全文检索功能。

基本原理：通过爬虫对目标网站的内容创建 Records（记录），在用户搜索时调用接口返回相关内容。

给自己的博客添加全文搜索

一. 创建 Application

首先我们去创建一个 algolia 账号，接着根据指引创建应用（Application）和索引（Index），官网有详细的步骤，在这里就不做过多介绍了。创建完进入到应用，大概是这个样子。

二. 增加 Records（关键）

最核心的就是这里了，我们如何添加自己站点的信息？这里有两种方式

方案一：使用官方的 Algolia Crawler 爬虫后台

网上搜到的大多是这种，通过发送邮件来申请免费的服务。 VuePress 博客优化之开启 Algolia 全文搜索这篇文章有讲怎么弄。

不推荐这个方案，原因如下：

一般情况下我们想要的是更新博客后第一时间同步搜索。但是这个服务是定期更新（7天自动同步一次，应该可以设置），当然肯定可以手动刷新，但是... 手动？程序员最讨厌的就是手动。
不知道哪步错了，没申请下来，一直要求付费（对于个人项目，algolia 是有开源项目来帮助我们完成的，见方案二）。

方案二：DocSearch Scraper Action

使用 Github Actions 在 Docker 中运行自托管的 Algolia DocSearch scraper

获取 Application ID 和 Admin API Key

将 Application ID 和 Admin API Key 设置到仓库（Github）的 Secrets

在项目根目录创建配置 algolia.json （爬虫的配置文件）

下面👇是笔者的配置，可根据文档自行调整，也可以参考一些配置模版

{
  "index_name": "vitepress-blog",
  "start_urls": ["https://mingyuli97.github.io/blog"],
  "rateLimit": 8,
  "maxDepth": 10,
  "selectors": {
    "lvl0": {
      "selector": "",
      "defaultValue": "Documentation"
    },
    "lvl1": ".content h1",
    "lvl2": ".content h2",
    "lvl3": ".content h3",
    "lvl4": ".content h4",
    "lvl5": ".content h5",
    "content": ".content p, .content li"
  }
}Ï

在项目的 worlflow 中添加新任务

  algolia:
    needs: deploy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Get the content of algolia.json as config
        id: algolia_config
        run: echo "::set-output name=config::$(cat algolia.json | jq -r tostring)"
      - name: Push indices to Algolia
        uses: signcl/docsearch-scraper-action@master
        env:
          APPLICATION_ID: ${{ secrets.APPLICATION_ID }}
          API_KEY: ${{ secrets.API_KEY }}
          CONFIG: ${{ steps.algolia_config.outputs.config }}

三、在项目中接入

<XXX_XXX> 这种是占位，需要替换成自己对应的值

VuePress

// .vuepress/config.js
module.exports = {
  themeConfig: {
    algolia: {
      apiKey: '<API_KEY>',
      indexName: '<INDEX_NAME>'
      // If Algolia did not provided you any `appId`, use `BH4D9OD16A` or remove this option
      appId: '<APP_ID>',
    }
  }
}

VitePress

官方文档没有写，参考 issue 可以这么用

// docs/.vitepress/config.ts
algolia: {
  appId: '<APP_ID>',
  apiKey: '<API_KEY>',
  indexName: '<INDEX_NAME>'
}

最后

查看项目完整配置：github.com/mingyuLi97/…
查看最终效果：mingyuli97.github.io/blog/

参考

备注

----- 2023.4.20 更 -----

最近发现自己博客搜索功能失效了，但是在 Algolia Dashboard 中搜索却是正常的。于是给官方发了邮件，下面是官方的回复。

大概意思就是，我在发送请求的时候增加了 facetFilters: [lang: en-US],但是后台的 records 中并没有设置。

🤔 想到前段时间升级了 vitepress 的版本，可能与这个有关。

打开 vitepress 仓库，全局搜了一下 facetFilters，果然有这个字段，跟踪了下文件 commit 记录，原来是 Vitepress 支持了 i18n，在发送请求时会默认加上 lang 字段，这就导致之前的配置失效, 原因见源码。

知道原因，就很好解决了，只要让我们的 records 加上 lang 就可以了。详细操作见 commit。

快来给你的博客添加全文搜索