为博客添加站内搜索功能

当我的博客文章和练习题发表得比较多的时候,要查询哪些习题是我曾经整理过的,就变得比较复杂和麻烦了,我们不可能一个一个文件的挨着去找。为了方便读者查询相应的题目以及为了我能快速定位我整理过哪些习题,故添加了站内搜索功能。

a.前言

我的博客采用的是hexo进行搭建,选择的是next主题。而next主题其实也集成了几种搜索插件,我采用的是local-search插件。此插件会生成一个search.xml文件,其中包含了你网站上所有相关的数据,搜索的时候就从这个文件中根据关键字检索出相应的链接。

b.安装

在项目的根目录下,通过cmd或者Git Bash执行下面这条命令以安装hexo-generator-searchdb插件。

1
npm install hexo-generator-searchdb --save

c.配置

1.修改站点配置文件

打开站点配置文件,即根目录下的_config.yml文件,添加以下代码

1
2
3
4
5
search:
path: search.xml ##索引文件的路径,相对于站点根目录
field: post ##搜索范围,默认是 post,还可以选择 page、all,设置成 all 表示搜索所有页面
format: html
limit: 10000 ##限制搜索的条目数

注意冒号和空格的处理。这些参数都是可以修改的,不过默认设置为这样就行了,一般也不需要修改。如果要修改,请查看hexo-generator-searchdb配置参数。

2.修改主题配置文件

打开主题配置文件,即themes/next下的_config.yml文件,将local_search下的enable修改为true,即启用local_search插件。

1
2
3
4
5
6
7
8
9
10
11
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
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false

d.部署

执行上述步骤后,再运行以下命令,部署上去,就可以看到在页面上有一个搜索图标,点击并输入相关文字,就可以看到搜索结果,点击即可跳转到对应页面,十分方便。

1
2
3
#hexo clean
#hexo g
#hexo d

e.最终效果见本人博客主页

点击查看
-------------------本文结束 感谢您的阅读-------------------
0%