主题搜索框配置

1. 效果截图

1717239726415.png

2. algolia

这里查阅主题的配置文件_config.yml得知主题中内置了对algolia的支持。

1717239996974.png

2.1 注册

1717240052230.png

1717240078310.png

前往 Algolia 官网注册一个账号，新建 应用和 index

1717240199032.png

数据中心建议选择新加坡或香港，当然根据你自己情况而定

1717240144278.png

1717240243348.png

2.2 安装插件

在hexo目录的根目录下运行git，输入以下两个命令（二选一）

1
2
npm install hexo-algolia --save  
npm install hexo-algoliasearch --save

也就很明显了，如果你想要全站搜索可选择前者，如果你只想搜索文章两者兼可。但前者不能将文章内容作为索引上传（其实老版本是支持的，但因为索引大小限制，在新版本取消索引了文章内容），后者目前仍可全文上传。然后就是 HEXO 配置文件中添加以下内容，下文基本以 hexo-algoliasearch 为例，因为我个人认为访客只会搜文章吧（事实上是搜索根本没人用，毕竟也根本没人访问），hexo-algolia 可查看官方文档，注意配置和命令的区别。

2.3 项目配置

在hexo下的_config.yml中添加以下的内容，不是主题的配置

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

为了保险，识别到插件，还可以加入以下内容

1
2
3
plugins:
  - hexo-algoliasearch

去主题配置文件打开 Algolia 搜索，记得关闭本地搜索，二者只能取其一！

_config.butterfly.yml :

1
2
3
4
5
6
7
8
9
10
# Algolia search
algolia_search:
  enable: true
  hits:
    per_page: 3

# Local search
local_search:
  enable: false

然后来看以下具体的参数配置获取方式appId，apiKey，adminApiKey可在 API Keys 页面获取，注意保管好你的 Admin Key，不要让其他人知道，不建议直接写在配置中

1717240692795.png

1717240775285.png

1717240826763.png

这个写到indexName处

对于 Windows 系统，如果你不想每次都进行设定变量操作，可以添加ALGOLIA_ADMIN_API_KEY到系统的环境变量中[image.png

path

添加完毕后需要重启电脑生效

3. 上传索引

是否删除之前建立好的索引重新建立索引？

1
2
3
hexo algolia -n
或者
hexo algolia --no-clear

1717240995821.png

这里在上传成功后就会在仓库中自动生成很多的索引，这样就可以实现其中的搜索功能。

4. 错误解决

4.1 访问搜索的结果后出现的域名是以example.com开头

1717241129537.png

将图中的url修改成你的域名即可，这里需要重新使用3中的重新上传索引。

4.2 报错: Please set an HEXO_ALGOLIA_INDEXING_KEY environment variable to enable content indexing.

1
2
ERROR [hexo-algolia] Please set an `HEXO_ALGOLIA_INDEXING_KEY` environment variable to enable content indexing.
ERROR >> Read https://npmjs.com/hexo-algolia#api-key for more informations.

原因：需要将API密钥添加到系统环境变量(首先需要去algolia官网注册一个账号获取API密钥，此步教程较多，在此文章2.3中写明了添加系统变量的方法。