Skip to content

启用 Algolia 搜索

Jump to bottom
JasonSun edited this page Jul 19, 2021 · 14 revisions

前言

说一下做这个搜索功能的心路历程，有几种方案可选

  1. 选用 hexo-content-json 类的 hexo 插件，生成一个包含所有文章内容的 xml 或 json，这样的好处是配置步骤少，但是会下载一个 json 或 xml，体积与所有文章的内容成正比，如果文章数量较多的话要下载的体积就会比较大，文章数量少的话又没啥必要。
  2. 选用 hexo-content-json 类的 hexo 插件，生成一个只包含文章题目的 xml 或 json，这样文件的体积会小很多，hexo-theme-yilia 是采用的这种方案，并且将 # 搜索 tag 的功能也加上了，但是 Archer 已经有了 tag 分类，这样做就仅仅是搜索题目了，用处也不大。
  3. 选用第三方的搜索，具有搜索所有文章内容的功能，也是目前 hexo 主题届的老大 hexo-theme-next 采用的方案，最后选定了这种。

PS: 感谢 Algolia & hexo-theme-next

步骤

注册帐号(可以用 Github 登录)

前往 Algolia 注册页面，注册一个新账户。 可以使用 GitHub 或者 Google 账户直接登录，注册后的 14 天内拥有所有功能（包括收费类别的）。之后若未续费会自动降级为免费账户，免费账户 总共有 10,000 条记录，每月有 100,000 的可以操作数。注册完成后，创建一个新的 Index，这个 Index 将在后面使用。

image

安装 Algolia

Index 创建完成后，此时这个 Index 里未包含任何数据。 接下来需要安装 Hexo Algolia 扩展， 这个扩展的功能是搜集站点的内容并通过 API 发送给 Algolia。前往站点根目录，执行命令安装：

npm install --save hexo-algolia

获取 keys

接下来的配置为网站上使用 Algolia 进行搜索提供凭证。

然后在 Hexo 根目录下的 _config.yml 文件中加入以下字段：

algolia:
  applicationID: 'Your Algolia Application ID'
  apiKey: 'A Search-Only API key'
  indexName: 'The name of the Algolia index to use'

其中，applicationID 和 apiKey 可以在 Algolia 控制面板左侧进入 API Keys 选单，Application ID 和 Search-Only API Key 即为所求。

indexName 为您创建的用于存放记录的 indice 名称。

更新 index

接下来将读取静态博客的 .md 文件内容，作为搜索的索引结果。

在 Algolia 控制面板中创建一个新的 api key，需要包括如下权限：addObject, deleteObject, listIndexes, deleteIndex。

在 Hexo 目录下执行以下命令，注意：

  1. 如果是 Windows 系统，需要将 export 要换为 set；
  2. 填入刚刚新建的 api key。
$ export HEXO_ALGOLIA_INDEXING_KEY='apiKey'
$ hexo algolia

主题集成

为了在 Archer 主题中加载 Algolia 并显示搜索图标，需要在 Archer 主题目录下的 _config.yml 文件中修改以下字段：

algolia_search:
  enable: true
  hits:
    per_page: 10
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We did not find any results for the search: ${query}"
    hits_stats: "${hits} results found in ${time} ms"

（注意：不能在 hits_empty 和 hits_stats 中写入单引号，否则会报错）

使用 Github Actions 持续集成

假设现在您已经编写好了 Hexo 博客持续集成的 Github Actions 的工作流。

在 Hexo 博客根目录的 package.json 中添加一个新的 scripts，执行 hexo algolia 操作，例如：

"scripts": {
  "algolia": "hexo algolia",
},

在您的博客的 Github 仓库中添加一个新的 Secret，例如命名为 HEXO_ALGOLIA_INDEXING_KEY，其值为您在前面更新 index 步骤中所使用的的 api key。

修改您的 Github Actions 工作流文件，它位于仓库的 .github\workflows 路径下。

您可以在部署操作的 steps 中添加一个新的步骤，需要提醒的是，这个步骤需要位于 npm install 之后，如下：

- name: Get algolia objects
  run: npm run algolia
  env: # 设置 algolia 环境变量
    HEXO_ALGOLIA_INDEXING_KEY: ${{ secrets.HEXO_ALGOLIA_INDEXING_KEY }}

提交您的代码，现在您就可以在 Github 仓库的 Actions 页面查看自动部署的执行情况了。

完整的工作流文件可参考此示例。

参考

Hexo集成Algolia搜索插件

可算把这个坑填上了

Clone this wiki locally