hexo增加搜索功能

hexo 增加搜索功能

hexo 版本 5.0.2 npm 版本 6.14.7 next 版本 7.8.0

作为一个博客，没有搜索功能，如何在大批文章中找到自己想要的，那在 hexo 中如何增加搜索功能呢？

1
2
3
search:
  path: search.json
  field: post

在博客目录下安装 npm install hexo-generator-search --save，此时使用 hexo cl && hexo g 就会在博客 public 目录下生成一个 search.json，在使用 hexo d 部署上去搜索就可以用了

本地搜索弊端

前期还好，后来随着我的文章越来越多，search.json 文件已经达到了十几 M，每次加载页面都需要花费几分钟来加载 search.json 文件，使用体验很不好

algolia 搜索

本地搜索走不通，那就只能使用远程搜索了，还好 hexo 提供了 algolia 搜索

先去官网登录一下，这里我使用的是 Github 登录，然后新建一个 Index

![创建索引]
创建索引

创建 Index 后，右上角头像处点击选择 Settings

![ApiKey]
ApiKey

查看 ApiKeys

![ApiKeys]
ApiKeys

在 _config.yml 中配置 algolia

1
2
3
4
5
algolia:
  applicationID: #对应Application ID
  apiKey: # 对应Search-Only API Key
  adminApiKey: # Admin API Key
  indexName: # 创建的那个索引名称

还需要在环境变量中配置 HEXO_ALGOLIA_INDEXING_KEY 值为 页面中 Admin API Key 的值

在博客目录下安装 npm install hexo-algolia --save

之后修改使用的主题下(我使用的是 next 主题)的 _config.yml，配置使用 algolia 搜索

1
2
3
4
5
6
7
8
9
10
11
12
13
algolia_search:
  enable: true # 开始algolia搜索
  hits:
    per_page: 10
  labels:
    input_placeholder: 查询
    hits_empty: "没有找到任何相关结果: ${query}"
    hits_stats: " ${time} ms内找到 ${hits} 条结果"

# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: false #关闭本地搜索

此时执行 hexo algolia 就会将博客生成的 search 发送到 algolia 中，而部署的博客就可以搜索到所上传的内容

![搜索内容]
搜索内容

这里有一个小问题，在执行 hexo algolia 时，algolia 会多条合并进行提交，而免费的 algolia 会有大小的限制，可以看到超过 10000 字节就不行了，algolia 默认会 50 条合并提交，可以设置几条进行合并

使用 chunkSize 来设置条数，如 hexo algolia --chunkSize 10 就是 10 条合并

![字数限制]
字数限制

每次都指定参数还是挺麻烦的，看一下 algolia 中是怎么写的吧。

发现在 node_modules/hexo-algolia/lib/command.js 中有一个默认配置

1
2
3
4
5
6
var CONSOLE_DEFAULTS = {
  dryRun: false,
  flush: false,
  chunkSize: 50,
  layouts: INDEXED_LAYOUTS
};

设置的 chunkSize 是 50，我由于正文内容比较多，改成了 3，这样就不需要每次都带参数了