给hexo添加本地搜索站内功能

hexo, search

前言

之前博客用的typecho的deep主题，还是挺喜欢的，只是感觉写文章就是稍微有点麻烦，每次都需要登录网站后台编写或发布，而且很多东西我都喜欢开源，分享知识也是，于是最近就尝试用hexo + github pages，用了这套组合才知道这简直太符合我这种懒癌，博客搭建配置好后，本地编写markdown文章之后直接hexo g 然后hexo d 就发布了，寻找很久的主题，后来看到P牛博客前端用的hexo的cactus-dark主题，顿时就喜欢上了，博客配置成功之后又装了一些必要的插件，然后对博客布局和样式代码进行一些修改，由于cactus-dark主题没有搜索功能，于是便尝试给添加搜索功能。

过程

至于hexo怎么搭建hexo + github pages博客网上一堆就不讲了，由于搜索功能是调用hexo-generator-search生成xml数据，所以需要安装hexo-generator-search插件：

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

然后为hexo博客的配置文件_config.yml添加插件配置（注意：不是主题的配置文件）：

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

添加到search页面的导航：

1
2
3
4
5
6
7
nav:
  Home: /
  About: /about/
  Link: /link/
  Archives: /archives/
  Projects: https://github.com/sunnyelf
  Search: /search/

然后在themes\cactus-dark\layout文件夹下新建search.ejs文件，编写搜索框模板：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<section id="search">
    <span class="h1"><a href="#">Search</a></span>
    <form>
        <div class="row">
            <div class="col-xs-8 col-md-4">
                <input type="text" class="search-input" id="search-input" placeholder="search...">
            </div>
            <div class="col-xs-4 col-md-2">
                <button type="reset" class="reset-button" onclick="resetSearch()">reset</button>
            </div>
        </div>
        </form>
        <div id="search-result"></div>
        <p class='no-result'>No results found</p>
</section>

由于上面用到了flexboxgrid的CSS框架，所以需要在C:\Users\Jing Ling\Documents\blog\themes\cactus-dark\layout\_partial\styles.ejs文件引入：

1
2
3
<% if (page.layout === 'search') { %>
<link href="https://cdn.bootcss.com/flexboxgrid/6.3.1/flexboxgrid.min.css" rel="stylesheet">
<% } %>

，之后\themes\cactus-dark\source\css\_partial新建search.styl文件，编写搜索框样式：

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
.search-input
  font-size: 0.875rem
  height: 1.75rem
  border-width: 1px
  display: block
  font-family: inherit
  padding: 0.5rem
  width: 100%
.reset-button
  height: 1.75rem
  color: #fff
  background-color: #2bbc8a;
  padding: 0 16px
  font-size:.8em
  border:1px solid #2bbc8a;
  border-radius:2px;
  font-family: inherit
  font-weight: bold
#search-result ul.search-result-list {
  list-style-type:none;
  padding: 0px;
}
#search-result li {
  margin: 2em auto;
  border-bottom: 2px solid #2bbc8a;
}
#search-result .search-result-list li:hover {
  color:#eee
}
#search-result a.search-result-title {
  line-height: 1.2;
  font-weight: bold;
  color: #2bb48a;
}
#search-result p.search-result {
  margin: 0.4em auto;
  max-height: 13em;
  overflow: hidden;
  font-size: 0.8em;
  text-align: justify;
}
#search-result em.search-keyword {
  color: #f58e90;
  border-bottom: 1px dashed #f58e90;
  font-weight: bold;
  font-size: 0.85em;
}
p.no-result {
  display: none;
  padding-bottom: 0.5em;
  color: #eee;
  border-bottom: 2px solid #2bbc8a;
}

为了调用编写的样式需要在\themes\cactus-dark\source\css\style.styl样式文件添加@import "_partial/search"引入。
之后便是编写search.js处理hexo-generator-search生成索引数据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
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
// // A local search script with the help of [hexo-generator-search](https://github.com/PaicHyperionDev/hexo-generator-search)
// MIT License
// Copyright (C) 2015
// Joseph Pan <https://github.com/wzpan>
// Shuhao Mao <https://github.com/maoshuhao>
// MOxFIVE <https://github.com/MOxFIVE>
// Jing Ling <https://github.com/sunnyelf>
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);
            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 = [];
                    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) {
                        str += "<li><a href='" + data_url + "' class='search-result-title' target='_blank'>" + "> " + data_title + "</a>";
                        var content = data.content.trim().replace(/<[^>]+>/g, "");
                        if (first_occur >= 0) {
                            // cut out characters
                            var start = first_occur - 6;
                            var end = first_occur + 6;
                            if (start < 0) {
                                start = 0;
                            }
                            if (start == 0) {
                                end = 10;
                            }
                            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>"
                        }
                    }
                })
                $resultContent.innerHTML = str;
            })
        }
    })
}
var inputArea = document.querySelector("#search-input");
var $resultArea = $("#search-result");
inputArea.onfocus = function () {
    var path = "/search.xml";
    searchFunc(path, 'search-input', 'search-result');
}
inputArea.onkeydown = function () {
    if (event.keyCode == 13) {
        return false
    }
}
resetSearch = function () {
    $resultArea.html("");
    $(".no-result").hide();
}
$resultArea.bind("DOMNodeRemoved DOMNodeInserted", function (e) {
    if (!$(e.target).text()) {
        $(".no-result").show(200);
    } else {
        $(".no-result").hide();
    }
})

将search.js放入到\themes\cactus-dark\source\js文件夹下，为了调用js需要在\themes\cactus-dark\layout\_partial\scripts.ejs添加引入：

1
2
3
<% if (page.layout === 'search') { %>
    <%- js('js/search.js') %>
<% } %>

使用hexo命令新建search页面，hexo new page search，会生成\source\search\index.md，在index.md添加yaml标记,表示此页面渲染使用search模板：

1
2
3
---
layout: search
---

最后依此使用hexo generate和hexo server命令，访问http://localhost:4000/search/便可以进行搜索了。

后话

如果你不想折腾话，我已将添加了搜索功能pull到了cactus-dark，你可以根据cactus-dark的说明直接开始使用。