关于FixIt主题的搜索功能

CBBA 收录于杂

2025-07-21 约 400 字预计阅读 2 分钟

目前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
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


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

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

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

1
2


[outputs]
  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
3
4
5


{
  "scripts": {
    "algolia": "atomic-algolia"
  }
}

使用

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

1
2
3
4
5
6
7
8


ALGOLIA_APP_ID=YOUR_APP_ID \
ALGOLIA_ADMIN_KEY=YOUR_ADMIN_KEY \
ALGOLIA_INDEX_NAME=YOUR_INDEX_NAME \
ALGOLIA_INDEX_FILE=public/search.json \
npm run algolia

# 直接写在一行的版本
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
 2
 3
 4
 5
 6
 7
 8
 9
10
11


#!/bin/bash

# 构建 Hugo 网站
hugo

# 上传到 Algolia
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_ADMIN_KEY要改成自己的

赋予执行权限

1

chmod +x deploy.sh

运行脚本

1

./deploy.sh