进阶(四):给博客添加站内搜索功能

不知不觉坚持写博客已经快一年了,博客文章破50,虽然平均每个月4到5篇不算什么,但是对于平时一心扑到工作简直没有时间生活的我来说,已经很不容易了。虽然文章可能没有高大上的标题,也没有涉及太多前沿的技术,但是起码我记录下了我的一些小经验,累积了自己的一个小知识库。其实我还有很多内容没来及的记录,希望以后能通过博客沉淀更多的知识,同时帮助到更多的人。

言归正传,文章一多,有时自己想翻查一个内容,要找好久,要是有站内查找功能就好了。于是仔细查阅了工程yml配置,果然发现在theme下的_config.yml有个local_search配置项,满心欢心把它设为true。结果搜索图标是出来了,但是点击后除了在页面加了一个全局loading就什么都没有了。看来还需要额外的操作。百度了一番,原来hexo提供了的search插件,需要手动安装才可以使用站内搜索。

3步搞定:

1.安装两个插件

1
npm i --save hexo-generator-search hexo-generator-searchdb

2.配置hexo主配置文件(位于工程根目录下)_config.yml

在最后面追加这段,注意2个空格的缩进,这个是yml缩进语法,不能随意。

1
2
3
4
5
6
# local_search
search:
path: search.xml
field: post
format: html
limit: 10000

3.配置hexo主题下的配置文件(位于theme->next下)_config.yml

enable设为true。这一步我在一开始就已经做过了~

1
2
3
4
5
6
7
local_search:
enable: true
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 1

重新hexo g, hexo s,刷新页面,点击搜索图标,就可以看到搜索弹出框了,输入关键字,可以看到匹配到文章。

GOOD LUCK!


参考资料:
https://www.jianshu.com/p/519b45730824
https://github.com/wzpan/hexo-generator-search
https://www.npmjs.com/package/hexo-generator-searchdb