Hexo博客为Butterfly主题添加Algolia文章搜索功能

注册

进入Algolia官网，可以使用Google账号、Github账号或直接使用邮箱进行注册。

登录后进入控制台，按以下步骤创建index。

image-20240401190821591

安装

到博客根目录执行以下代码下载第三方包：

1
npm install hexo-algoliasearch --save

修改_config.yml或_config.butterfly.yml配置文件，加入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
algolia:
  appId: "your applicationID"
  apiKey: "your Search-Only API Key"
  adminApiKey: "your Admin API Key"
  chunkSize: 5000
  indexName: "your indexName"
  fields:
    - content:strip:truncate,0,500
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title

需要修改的参数解释如下：

参数说明
appID应用ID
apiKey只有查询权限的密钥
adminApiKey管理员密钥
indexName自定义的索引名称

在Algolia设置页面点击API Keys即可查看上述参数

image-20240401191928291

修改_config.butterfly.yml配置文件即可开启Algolia搜索：

1
2
3
4
5
6
7
8
algolia_search:
  enable: true
  hits:
    per_page: 6
  labels:
    input_placeholder: Search for Posts
    hits_empty: "我们没有找到任何搜索结果: ${query}"
    hits_stats: "找到${hits}条结果（用时${time} ms）"

生成索引

到博客根目录执行以下代码生成索引：

注意：以后每次增加新文章的时候或者文章结构改变都需要使用此命令更新索引

1
hexo algolia

出现以下内容即表示生成成功！

1
2
3
4
5
INFO  xxx files generated in xx.xx s
INFO  Clearing index on Algolia...
INFO  Index cleared.
INFO  Indexing posts on Algolia...
INFO  xxx posts indexed.

启动

在博客根目录，依次执行以下代码，查看搜索是否生效：

1
2
3
4
5
6
# 清理生成的静态文件
hexo clean
# 重新生成静态文件
hexo generate
# 开启本地服务
hexo server

踩坑

Butterfly4.12更新将CDN的version默认值改为了true会导致Algolia搜索框的样式丢失。

需要到_config.butterfly.yml配置文件中做如下更改：

1
2
CDN:
  version: false

参考文档

Hexo + Butterfly 搜索功能