关于FixIt主题的搜索功能

目前hugo博客使用的是FixIt主题，这个主题算是功能比较全的一个主题了，用着还不错，但是搜索功能有点小问题，搜索时只能搜索到文章前面一小部分的内容，后面的就搜不到了，我在其它用hugo搭建的博客试过别人配置好的搜索功能，确实还是比较好用的，所以今天有时间也配置一下

教程链接：关于 Algolia 的使用技巧 | FixIt

创建Algolia应用#

注册 algolia 账号
在 algolia 中创建一个应用（Application），例如 fixit-blog

我这里选择了免费的套餐

然后点击skip for now
「选中应用 fixit-blog 」>「点击 Data Sources 」>「点击 Indices 」>「点击 Create Index」
创建一个索引，例如 index.zh-cn
「点击Settings」>「点击API Keys」>「复制保存API Keys」：
- Application ID
- Search-Only API Key
- Admin API Key (请勿公开)

Application ID 和 Search-Only API Key 用于搜索配置，Admin API Key 用于自动化更新索引。

配置hugo.toml#

将配置文件中关于搜索的部分修改一下：

1
# 搜索配置
2
[params.search]
3
    # 是否启用搜索
4
    enable = true
5
    # string 搜索引擎的类型，可选值：algolia、fuse、cse 或 post-chat，默认：fuse。
6
    type = "algolia"
7
    # int 文章内容最长索引长度。
8
    contentLength = 4000
9
    # string 搜索框的占位提示语。
10
    placeholder = "请输入要搜索的内容"
11
    # int 最大结果数目。
12
    maxResultLength = 10
13
    # int 结果内容片段长度。
14
    snippetLength = 30
15
    # string 搜索结果中高亮部分的 HTML 标签。
16
    highlightTag = "em"
17
    # bool 是否在搜索索引中使用基于 baseURL 的绝对路径。
18
    absoluteURL = false
19
    [params.search.algolia]
20
      # string Algolia 索引。
21
      index = "index.zh-cn"
22
      # string algolia Application ID
23
      appID = ""
24
      # string algolia Search-Only API Key
25
      searchKey = ""

写本文档时使用的Application ID、Search-Only API Key、Admin API Key保存在「百度网盘」>「娱乐」>「7.加密数据」>「algolia相关key_25_7_21.7z」中

为了生成搜索功能所需要的 search.json, 请在你的站点配置中添加 search 输出文件类型到 outputs 部分的 home 字段中。

1
[outputs]
2
  home = ["html", "rss", "archives", "offline", "search"]

上传索引#

然后你需要上传 search.json 到 algolia 来激活搜索功能。你可以使用浏览器来上传 search.json 文件，但是一个自动化的脚本可能效果更好，Algolia Atomic 是一个不错的选择。

使用Shell脚本自动化上传索引#

准备#

首先确保已经安装了node.js

安装Algolia Atomic#

如果你的项目中没有 package.json 文件，请先创建一个，创建命令如下，输入该命令后会提示输入对应的信息，如果不输入npm会使用默认值（后续在package.json里可以修改）

1
npm init

然后安装 Algolia Atomic。

1
npm install atomic-algolia

在 package.json 文件中添加以下内容。

1
{
2
  "scripts": {
3
    "algolia": "atomic-algolia"
4
  }
5
}

使用#

当你执行 hugo 命令生成站点后，你可以在bash中使用以下命令上传 search.json 文件到 algolia 来更新索引。

1
ALGOLIA_APP_ID=YOUR_APP_ID \
2
ALGOLIA_ADMIN_KEY=YOUR_ADMIN_KEY \
3
ALGOLIA_INDEX_NAME=YOUR_INDEX_NAME \
4
ALGOLIA_INDEX_FILE=public/search.json \
5
npm run algolia
6

7
# 直接写在一行的版本
8
ALGOLIA_APP_ID=YOUR_APP_ID ALGOLIA_ADMIN_KEY=YOUR_ADMIN_KEY ALGOLIA_INDEX_NAME=index.zh-cn ALGOLIA_INDEX_FILE=public/search.json npm run algolia

ALGOLIA_APP_ID：algolia Application ID
ALGOLIA_ADMIN_KEY：algolia Admin API Key
ALGOLIA_INDEX_NAME：algolia 索引名称，我这里是index.zh-cn
ALGOLIA_INDEX_FILE：本地 search.json 文件路径

创建deploy.sh#

1
#!/bin/bash
2

3
# 构建 Hugo 网站
4
hugo
5

6
# 上传到 Algolia
7
ALGOLIA_APP_ID=YOUR_APP_ID \
8
ALGOLIA_ADMIN_KEY=YOUR_ADMIN_KEY \
9
ALGOLIA_INDEX_NAME=index.zh-cn \
10
ALGOLIA_INDEX_FILE=public/search.json \
11
npm run algolia

⚠️注意：ALGOLIA_APP_ID和ALGOLIA_ADMIN_KEY要改成自己的

赋予执行权限

1
chmod +x deploy.sh

运行脚本

1
./deploy.sh