hexo站内搜索功能
给大家介绍一款用于Hexo博客站内搜索文章的插件hexo-generator-search，通过此插件，我们可以根据关键字搜索Hexo博客内的任何文章。下面是插件的安装以及使用操作。
安装插件
首先通过以下npm命令安装一个hexo-generator-search
1
| npm install hexo-generator-search --save
|
安装插件后，在“hexo g”生成渲染文件时，会产生一份“search.xml”文件。该文件内会记录文章（post）的文本内容，那么你就可以在xml里搜索内容并展示出来。
代码实现：
1、搜索框
1
2
3
4
5
6
| <div id="site_search">
<div class="form-group">
<input type="text" id="local-search-input" name="q" results="0" placeholder="Search" class="st-search-input st-default-search-input form-control">
</div>
<div id="local-search-result"></div>
|
2、搜索js程序
在文章内引入search.js程序。默认可以在layout.ejs文件引入，在所有文章生效。
<%- js(‘js/search.js’) %>
在文件内引入
1
| <script src="/js/search.js"></script>
|
3、程序加到搜索框上
1
2
3
4
5
6
7
8
| <script type="text/javascript">
var search_path = "search.xml";
if (search_path.length == 0) {
search_path = "search.xml";
}
var path = '/' + search_path;
searchFunc(path, 'local-search-input', 'local-search-result');
</script>
|
配置文件
在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项，search顶格放否则可能没效果：
1
2
3
4
5
| search:
path: search.xml
field: post
content: true
template: ./search.xml
|
效果实现：
重新运行Hexo博客。效果如下图，我们可以根据关键字搜索文章。关键字会有底色高亮显示，点击标题是网站链接跳转。
额外内容：
搜索框CSS
搜索框样式CSS，随便抄一个网上的搜索框样式贴过来即可。
1
2
3
4
5
6
7
8
9
10
11
12
| <style>
#local-search-input {
height: 55px;
width: 94%;
outline: none;
border: none;
border-radius: 5px;
padding: 0 3% 0 3%;
font-size: 18px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
}
</style>
|
搜索高亮CSS
搜索关键字底色高亮CSS，在class（search-keyword）里写背景颜色的css样式即可。
1
2
3
4
5
| <style>
.search-keyword {
background: #c5afd9;
}
</style>
|
Q&A
Q：生成的search文件为空或在“hexo g”生成时失败，提示“no such file or directory, open search.xml”
A：“hexo g”生成渲染文件时，需要当前位置下有“search.xml”的文件模板，内容大致如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <?xml version="1.0" encoding="utf-8"?>
<search>
{% if posts %}
{% for post in posts.toArray() %}
{% if post.indexing == undefined or post.indexing %}
<entry>
<title>{{ post.title }}</title>
<link href="{{ (url + post.path) | uriencode }}"/>
<url>{{ (url + post.path) | uriencode }}</url>
{% if content %}
<content type="html"><![CDATA[{{ post.content | noControlChars | safe }}]]></content>
{% endif %}
{% if post.categories and post.categories.length>0 %}
<categories>
{% for cate in post.categories.toArray() %}
<category> {{ cate.name }} </category>
{% endfor %}
</categories>
{% endif %}
{% if post.tags and post.tags.length>0 %}
<tags>
{% for tag in post.tags.toArray() %}
<tag> {{ tag.name }} </tag>
{% endfor %}
</tags>
{% endif %}
</entry>
{% endif %}
{% endfor %}
{% endif %}
{% if pages %}
{% for page in pages.toArray() %}
{% if post.indexing == undefined or post.indexing %}
<entry>
<title>{{ page.title }}</title>
<link href="{{ (url + page.path) | uriencode }}"/>
<url>{{ (url + page.path) | uriencode }}</url>
{% if content %}
<content type="html"><![CDATA[{{ page.content | noControlChars | safe }}]]></content>
{% endif %}
</entry>
{% endif %}
{% endfor %}
{% endif %}
</search>
|