安装插件

在hexo博客的根目录打开Git Bash安装hexo-algoliasearch插件

1
npm install hexo-algoliasearch --save

然后查看根目录的package.json文件，查看是否安装成功，出现插件名称就说明安装插件成功

image-20220323200738339

注册Algolia账号

网址：Site Search & Discovery powered by AI | Algolia

创建应用

打开创建页面

image-20220323201316692

填写应用信息

image-20220323201515572

选择相关节点

image-20220323201811493

勾选同意

image-20220323201932407

获取API Keys

在控制台主页，选择刚刚创建的应用，查看它的API Keys

image-20220323202146576

获取下图的三个

image-20220323202335997

开始配置

在hexo根目录下的_config.yml配置文件添加以下代码，appId、apiKey、adminApiKey、indexName根据自己的情况填写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
plugins:
  - hexo-algoliasearch

algolia:
  appId: "0Z2Q111FG111"
  apiKey: "079e96e1d3e11111116bf59011"
  adminApiKey: "9e2f194f9f28111111199ce53111"
  chunkSize: 5000
  indexName: "hexo_blog"
  fields:
    - content:strip:truncate,0,200
    - tags
    - permalink
    - excerpt:strip
    - title
    - categories

修改Butterfly主题的_config.yml配置文件

1
2
3
4
5
# Algolia search
algolia_search:
  enable: true
  hits:
    per_page: 6

接下来需要将搜索方式设置为按回车键后才搜索，要不然每输入一个字符就实时搜索一次太浪费Algolia的搜索次数了，Algolia的免费次数每个月只有10000次，实时搜索很容易把次数用光，首先打开algolia.js文件，这个文件在\themes\butterfly\source\js\search目录下，在下图位置加入代码：

1
searchOnEnterKeyPressOnly: true,

image-20220324215731530

接下来修改搜索框的提示信息，上图横线下的placeholder:后接提示信息，建议直接注释掉该行（使用//注释），直接重写，不建议去修改语言配置文件（在\themes\butterfly\languages目录下）

1
placeholder: "输入关键词后，按下回车键即可搜索文章..."

依次执行以下命令

1
2
3
4
5
6
#生成静态文件
hexo g
#生成Algolia索引
hexo algolia
#部署网站，同时将网站的改动提交到GitHub仓库
hexo d

查看结果

执行启动服务器命令hexo s查看结果，访问网址为： http://localhost:4000/

image-20220323203020481

PS.

执行命令的顺序如下：（不然可能会出现一些错误）

1
2
3
4
5
6
7
8
#生成静态文件
hexo g

#生成algolia的搜索索引
hexo algolia

#提交到GitHub
hexo d