XiaBee's Studio.

Archer主题启用Algolia全文搜索

字数统计: 936阅读时长: 3 min
2021/10/31

问题描述

  • Hexo缺少站内搜索功能
  • Hexo自带的tag功能并不能满足搜索需求
  • Archer主题自带的搜索模块不能实现全文检索(详情可以参考相关issue

Hexo本质上是一个静态页面的渲染工具,而我们的博客部署在Github Page上,没有数据库的操作权限,也就不能像Wordpress那样自身实现站内的高级搜索……然而主题自带的第三方搜索插件又无法检索文章内容……

解决方案

  • 利用Archer封装的第三方插件Algolia实现搜索
  • 利用hexo-algoliasearch实现全文检索
  • 为什么不直接用hexo-algoliasearch做搜索
  • 因为主题没有封装,裸着搜索很违和,自己封装又好累(x)

Archer主题的algolia设置

Algolia简介

  • 官网
  • 提供云搜索
  • 白嫖用户可上传10,000JSON数据
  • 白嫖用户每个月可操作共100,000次(上传、搜索)

注册Algolia

  • 直接官网注册即可
  • 注册之后会创建一个应用,并得到一些API Keys,记住这些API Keys,一会需要用到

image.png

Applications中能看到刚刚申请的应用idAPI Keys里面有需要的API key

image.png

  • 注意:不要在任何配置文件中填写Admin API Key!如果有必要,则使用全局变量的方式替代

修改Hexo根目录的_config.yml

搜索algolia模块,如果没有则自己添加一个:

1
2
3
4
5
6
7
8
9
10
11
12
13
# searching 
algolia:
applicationID: 'xxxx' # used for hexo-algolia
appId: 'xxxx' # used for hexo-algoliasearch
apiKey: 'xxxxxxx'
chunkSize: 5000
indexName: 'xxxxxx'
fields:
- path
- title
- content:strip
- excerpt:strip
# fields 这栏根据自身需求设置

这里的applicationIDappId其实是一个东西,就是刚刚创建的应用的ID,只是我们需要利用两个不同的插件,所以写了两遍。

安装相关插件

Hexo根目录下执行:

1
2
3
4
5
npm install hexo-algolia --save
# 这个是主题集成的搜索模块所需插件,不支持搜索文章内容

npm install hexo-algoliasearch --save
# 这个是我们搜索全文用到的插件

修改主题_config.yml

Archer主题自身集成了algolia模块,把主题的_config.yml中的algolia_search模块的false改成true即可

1
2
3
4
5
6
7
8
9
# ========== Search ========== #
algolia_search:
enable: true
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "We did not find any results for the search: ${query}"
hits_stats: "${hits} results found in ${time} ms"
  • 注意:需要先安装相关插件再启用algolia模块,否则在渲染时会缺少js文件导致程序报错。

hexo-algoliasearch相关设置

全部设置可以参考官网

安装模块

hexo-algoliasearch刚刚已经安装过了,就不重复安装了

修改_config.yml

Hexo根目录的_config.yml文件中添加plugins字段:

1
2
plugins:
- hexo-algoliasearch

参数设置

  • 不要像官网一样把adminApiKey写进配置文件里!(因为总有人会顺手把配置文件传到Github,比如我)

  • 在不填写adminApiKey的时候,可以通过环境变量的方式认证adminApiKeyWindows用户手动添加PATH即可)

    1
    2
    3
    4
    5
    export ALGOLIA_ADMIN_API_KEY=xxxxxxxx
    # 你的 admin_api_key

    export HEXO_ALGOLIA_INDEXING_KEY=xxxxxxx
    # 你的Search-Only API Key

PS:Search-Only API Key其实就是配置文件中的apiKey,但是有时候hexo-algoliasearch模块莫名其妙找不到这个Search-Only API Key,可以通过上面的操作解决。

更新Algolia

如果你不是WSL用户,这时直接hexo aloglia即可。

如果是WSL用户,则需要检查一下环境变量有没有被覆盖……最懒的办法就是每次都添加一遍(不是)

1
2
3
4
5
6
7
8
export ALGOLIA_ADMIN_API_KEY=xxxxxxxx
# 你的 admin_api_key

export HEXO_ALGOLIA_INDEXING_KEY=xxxxxxx
# 你的Search-Only API Key

hexo algolia
# 更新 algoia

image.png

此时在Algolia管理界面里面已经能看到文章内容了:

image.png

搜索效果

image.png

标题包含关键词的会标红,文章内容包含关键字也能搜索到

CATALOG
  1. 1. 问题描述
  2. 2. 解决方案
  3. 3. Archer主题的algolia设置
    1. 3.1. Algolia简介
    2. 3.2. 注册Algolia
    3. 3.3. 修改Hexo根目录的_config.yml
    4. 3.4. 安装相关插件
    5. 3.5. 修改主题_config.yml
  4. 4. hexo-algoliasearch相关设置
    1. 4.1. 安装模块
    2. 4.2. 修改_config.yml
    3. 4.3. 参数设置
  5. 5. 更新Algolia
  6. 6. 搜索效果