How to create Local Search for your Blog with hexo-generate-search plugin

Recently, i wrote a article to show how to create a Blog by using Hexo.
Today, we will implement a Local Search by using a hexo-generate-search plugin. This plugin help you to generate a search.xml file, which contains all the neccessary data of your Blog that you can use to write a local search engine for your Blog.
This a Demo of this plugin. You can check it before doing this article.

Let’s do it

Download plugin

At first, we must install hexo-generator-search by the following command:

1
$ npm install hexo-generator-search --save

And configure this plugin in _config.yml file of your theme.

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

You can change parameters:

  • path: file path, default is search.xml
  • field: the search scope you want to search, you can choose:
    • page - will only covers all the pages of your blog.
    • all - will covers all the posts and pages of your blog.
    • post (by default) - will only covers all the posts of your blog.

Create Local Search engine

Special thanks to @hahack, who wrote this search engine. Now, you just attack it and modify for yourself.

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
var searchFunc = function(path, search_id, content_id) {
'use strict';
$.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);
if (!$input) return;
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
var numOfPostFound = 0; // keeping track of # of result
datas.forEach(function(data) {
var isMatch = true;
var content_index = [];
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 titles and contents
if(data_title != '' && 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;
}
}
});
}
// show search results
if (isMatch) {
numOfPostFound += 1; // keeping track of # of results
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>";
// attaching a summary of searching result
if (numOfPostFound > 0) {
if (numOfPostFound > 1) {
summary = numOfPostFound + " posts found";
} else {
summary = numOfPostFound + " post found";
}
} else {
summary = "Nothing found";
}
var summary = "<p class=\"text-xlarge text-color-base archieve-result search-result-summary\">" + summary + "</ul>";
$resultContent.innerHTML = summary + str;
});
}
});
}

How to use this search engine?

The Search engine will be called by this way, you just insert in your ./themes/<theme-name>/layout/_partial/script.ejs file the following code:

1
2
3
4
5
6
7
8
9
<%- js('assets/js/search.js') %> 
<script type="text/javascript">
var search_path = "<%= config.search.path %>";
if (search_path.length == 0) {
search_path = "search.xml";
}
var path = "<%= config.root %>" + search_path;
searchFunc(path, 'local-search-input', 'local-search-result');
</script>

Edit search interface

The searching interface consists of a input box and an

block that is used as a container of the results. e.g.
1
2
3
4
<div id="site_search" class="main-content-wrap">
<input type="text" id="local-search-input" name="q" results="0" placeholder="search my blog..." class="form-control input--xlarge" autofocus="autofocus"/>
<div id="local-search-result"></div>
</div>

You can modify it however you like. And style it in your *.css files.

You already had a local search engine for your Blog. Lets check it out.

Reference

Plugin hexo-generate-search
Demo of this plugin
Local search engine

Share