随着博客文章越来越多,需要给博客系统提供一个搜素功能,暂时采用本地搜索。

本地搜索插件的原理是在生成博客文件(执行hexo generate)的时候,生成搜索索引文件,索引文件中包含文章的必要数据。数据包括:标题、文章路径、文章内容、标签、目录分类等。在网页加载或需要搜索的时候,会载入搜索文件,之后从搜索文件中查找想要的内容。

感觉速度就取决于搜索的算法和需要去查找的文章内容。

索引文件中有一种数据为:文章内容。在文件中有一个属性content,值为文章的内容,刚才看了一下我生成的索引文件,有一篇文章的content属性字符数量高达8万个字符。

所以这个索引文件会随着文章数量的增多和文章内容的增长变得越来越大,这可能会影响到文章内容的搜索速度。

一、安装插件

butterfly文档中是可选两个插件:

你需要安装 hexo-generator-searchdb 或者 hexo-generator-search,根据它的文档去做相应配置

我最开始安装的hexo-generator-search,但后来发现有一点不完美,所以选择了另一个。

1
2
$ npm install hexo-generator-search
$ npm install hexo-generator-searchdb

二、配置

1、butterfly的配置

1
2
3
4
5
6
local_search:
enable: true
preload: true
top_n_per_article: 5
unescape: false
CDN:

上面的配置中:

  • enable,为是否开启本地搜索功能
  • preload,为是否预加载,开启的话,当加载页面的时候即获取search文件,关闭的话,在点击搜索的时候才会获取
  • top_n_per_article,匹配的文章结果,即从文章中找到的搜索结果的展示数量,默认为1,如果想要展示全部的划设置为-1即可
  • unescape,将html字符串解码为可读字符串
  • CDN,搜索文件的CDN地址(默认使用的本地链接)

2、插件配置

_config.yml中添加插件的配置如下(在_config.butterfly.yml中添加配置不会生效):

1
2
3
4
search:
path: search.xml
field: post
content: true

上面的配置中:

  • path,为执行hexo generate命令之后生成的文件名称
    • 可以选择json文件,将值改为search.json即可,json文件占用的空间会更小一点相较于xml
  • field,为插件要搜索的范围,可选项有:
    • post(默认),只覆盖博客的所有文章
    • page,覆盖博客的所有页面
    • all,将覆盖所有页面和所有文章
  • content,是否从文章的内容中进行搜索。如果为false,则不会从文章的内容中进行搜索,只会包含标题和其他元信息。生成的search文件中也不会有content的内容

另外还有一个可选配置template,可以自定义自己的search文件

三、展示效果及优化

上图中可以看到,每一个文章有5条搜索结果,这就是local_search.top_n_per_article配置所起到的作用。

1、优化第一步:去除结果中markdown语法

但是有一点呢,可以看到它的搜索结果是markdown的内容,而不是文章的内容,因为里面可以看到markdown的语法。这个还是有一点不是很完美。

所以我换了另一个插件:hexo-generator-searchdb,在插件配置中添加search.format = html即可(当然html也是其默认配置),之后的搜索展示如下:

可以看到,搜索结果中已经看不到markdown的语法了,这是文章内容截图。

2、优化第二步:减小生成索引文件大小

但是,使用默认的search.format = html配置还是有缺点的。

缺点就是生成的索引文件的content属性的值更大了,因为值当中存储的虽然不是markdown文件内容了,但是却变成了html文件内容了,且是附带标签的html。

所以更好的效果是:去除html标签,只获取html标签的内容。

将配置修改为search.format = striptags即可。这将大幅减小生成文件的大小。

相关链接

Butterfly 安裝文檔(四) 主題配置-2 | Butterfly

wzpan/hexo-generator-search: A plugin to generate search data for Hexo. (github.com)

next-theme/hexo-generator-searchdb: 🔍 Seach data generator plugin for Hexo. (github.com)

theme-next/hexo-generator-searchdb: Seach data generator plugin for Hexo. (github.com)

OB tags

#Hexo