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更新CDNversion默认值改为了true会导致Algolia搜索框的样式丢失。

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

1
2
CDN:
version: false

参考文档

Hexo + Butterfly 搜索功能