Hexo 添加本地搜索

这里是借鉴的这个大佬的解决方案.

但是这个解决方案,具体的实施还是摸索了一下,并不是直接就能拿来用。而且我针对大佬的这个方案还是修改过的,不然有点别问题(比如样式)

新建一个名为search.ejs 的文件在 yourthemes/layout/partial/

内容如下:

1
2
3
4
5
6
7
8
<span class="local-search local-search-plugin" style="<%- wrapStyle %>">
<input type="search" placeholder="搜索" id="local-search-input" class="local-search-input-cls" style="<%- inputStyle %>">
<i class="icon" aria-hidden="true">✈</i>
<div id="local-search-result" class="local-search-result-cls"></div>
</span>

如下图所示:

在通过F11看源码的构成看看吧 这个搜索框放在哪里

加入搜索框代码为:

1
<%- partial('search', {wrapStyle: '', inputStyle: ''}) %>

如下图所示:

然后在 yourthemes/source/js/ 下找到你的main.js文件(不一定是这个名字但是是主体js就行)

在其中插入如下代码片段:

1
2
3
if ($('.local-search').size()) {
searchFunc("/search.xml", 'local-search-input', 'local-search-result');
}

如下图所示:

searchFunc 函数的定义如下,把他也放到 main.js里

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
var searchFunc = function (path, search_id, content_id) {
'use strict';
var BTN = "<i id='local-search-close' Color='red' >|退出搜索|</i>";
$.ajax({
url: path,
dataType: "xml",
success: function (xmlResponse) {
// get the contents from search data
var datas = $("entry", xmlResponse).map(function () {
return {
title: $("title", this).text(),
content: $("content", this).text(),
url: $("url", this).text()
};
}).get();
var $input = document.getElementById(search_id);
var $resultContent = document.getElementById(content_id);
$input.addEventListener('input', function () {
var str = '<ul class=\"search-result-list\">';
var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
$resultContent.innerHTML = "";
if (this.value.trim().length <= 0) {
return;
}
// perform local searching
datas.forEach(function (data) {
var isMatch = true;
var content_index = [];
if (!data.title || data.title.trim() === '') {
data.title = "Untitled";
}
var data_title = data.title.trim().toLowerCase();
var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
var data_url = data.url;
var index_title = -1;
var index_content = -1;
var first_occur = -1;
// only match artiles with not empty contents
if (data_content !== '') {
keywords.forEach(function (keyword, i) {
index_title = data_title.indexOf(keyword);
index_content = data_content.indexOf(keyword);
if (index_title < 0 && index_content < 0) {
isMatch = false;
} else {
if (index_content < 0) {
index_content = 0;
}
if (i == 0) {
first_occur = index_content;
}
// content_index.push({index_content:index_content, keyword_len:keyword_len});
}
});
} else {
isMatch = false;
}
// show search results
if (isMatch) {
str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";
var content = data.content.trim().replace(/<[^>]+>/g, "");
if (first_occur >= 0) {
// cut out 100 characters
var start = first_occur - 20;
var end = first_occur + 80;
if (start < 0) {
start = 0;
}
if (start == 0) {
end = 100;
}
if (end > content.length) {
end = content.length;
}
var match_content = content.substr(start, end);
// highlight all keywords
keywords.forEach(function (keyword) {
var regS = new RegExp(keyword, "gi");
match_content = match_content.replace(regS, "<em class=\"search-keyword\">" + keyword + "</em>");
});
str += "<p class=\"search-result\">" + match_content + "...</p>"
}
str += "</li>";
}
});
str += "</ul>";
if (str.indexOf('<li>') === -1) {
return $resultContent.innerHTML = BTN + "<ul><span class='local-search-empty'>没有找到内容,更换下搜索词试试吧~<span></ul>";
}
$resultContent.innerHTML = BTN + str;
});
}
});
$(document).on('click', '#local-search-close', function() {
$('#local-search-input').val('');
$('#local-search-result').html('');
});
}

接着我们创建搜索框的样式代码 在 yourthemes/source/css/ 下创建 search.style

内容如下:

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
// 记得在 style.stylus 中引入进去
.local-search {
position: relative;
text-align: left;
margin-bottom: 1px;
}
.local-search-input-cls {
width: 200px;
height: 3px;
margin: 10px 0;
padding: 8px 12px;
border-radius: 4px;
border: 1px solid #CCC;
color: #666;
font-size: 2px;
}
.local-search-close {
content: 'x';
position: absolute;
right: 10px;
top: 10px;
background: #fff;
color: #888;
border-radius: 100%;
line-height: 10px;
text-align: center;
font-size: 16px;
font-family: consolas;
border: 1px solid #CCC;
display: block;
width: 20px;
height: 10px;
cursor: pointer;
font-style: normal;
font-weight: 400;
transform: rotateZ(0);
transition: all 0.3s;
&:hover {
border-color: #666;
color: #222;
transform: rotateZ(180deg);
transition: all 0.3s;
}
}
.local-search-result-cls {
position: absolute;
z-index: 99;
width: 400px;
top: 50px;
right: 0;
.local-search-empty {
color: #888;
line-height: 10px;
text-align: center;
display: block;
font-size: 16px;
font-weight: normal;
}
ul {
width: 360px;
max-height: 450px;
min-height: 0;
height: auto;
overflow-y: auto;
border: 1px solid #CCC;
padding: 10px 20px;
background: #FFF;
box-shadow: 1px 2px 4px #CCC;
li {
text-align: left;
border-bottom: 1px solid #CCC;
padding-bottom: 20px;
margin-bottom: 20px;
line-height: 30px;
font-weight: normal;
&:last-child {
border-bottom: none;
margin-bottom: 0;
}
a {
margin-top: 20px;
font-size: 16px;
}
p {
margin-top: 10px;
font-size: 14px;
max-height: 124px;
overflow: hidden;
}
em.search-keyword {
color: #e58c7c;
}
}
}
}
.local-search-plugin {
.local-search-input-cls {
opacity: 0.6;
width: 160px;
transition: all 0.3s;
&:hover {
opacity: 1;
width: 200px;
transition: all 0.3s;
}
}
.icon {
position: relative;
left: -30px;
color: #999;
cursor: pointer;
}
}

然后同样找到一个 类似main.styl的文件,这个文件里有很多导入别的.styl文件的代码
比如我找的就是vno.styl,然后把search.styl导入进去

1
@import "search"

如下图所示:

到现在搜索框的配置完成了,但是这些都是基于你安装了hexo-generator-search 这个插件

安装分为两步,首先通过 npm 将插件安装到本地:

npm install hexo-generator-search –save

然后添加到根目录下的 config.yml 中

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

效果图下: