为Hexo博客Yilia主题添加本地站内搜索功能

编程之法

博客的站内搜索功能一直是一个缺憾，最初使用了Swiftype，虽然效果不是很理想，不过也正常使用了一段时间，然而之后发现使用Swiftype会导致博客标签加载不完全，进而影响正常显示。奈何我基本不懂前端，瞎折腾了很久也没能解决这个问题，最后只得禁用了Swiftype，留下的搜索框成了一个摆设。前段时候发现Hexo博客可以使用本地站内搜索，于是又折腾了一天，然而最终还是没有做出可用的搜索界面来：(本来已经不抱什么希望了，今天偶然看见让 Hexo 博客支持本地站内搜索这篇文章，作者使用的主题也是基于Yilia的，顿时觉得有戏，于是又是一天折腾，终于做出了个像样的站内搜索功能来了~~写篇文章记录下折腾过程。

生成索引文件

安装插件

本地站内搜索都是基于索引文件的，Hexo中可通过hexo-generator-search插件生成XML格式的索引文件，通过hexo-generator-json-content插件生成JSON格式的索引文件，此处选择了hexo-generator-search:

1
npm install --save hexo-generator-search

然后在Hexo站点根目录下的_config.yml中添加如下配置即可：

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

修改插件

默认生成的search.xml文件很大，而且包含很多冗余信息，参考完美解决Hexo静态博客搜索问题这篇文章对其进行精简。

首先在修改node_modules/hexo-generator-search/index.js文件，在其中添加3个函数：

1
2
3
4
5
6
7
8
9
stripe_code = function(str) { // 去除代码
    return str.replace(/<figure class="highlight.*?<\/figure>/ig, '');
}
stripe = function (str) { // 去除html标签
    return str.replace(/(<([^>]+)>)/ig, '');
}
minify = function (str) { // 压缩成一行
    return str.trim().replace(/\n/g, ' ').replace(/\s+/g, ' ');
}

Netcan的文章中是去除代码行数，此处改成了去除所有代码，因为一般无需对代码进行搜索。

之后修改模板文件search.ejs，主要目的是调用上面添加的3个函数对实际内容进行精简，修改<content type="html">标签中的内容即可：

1
2
3
<content type="html"><%-: minify(stripe(stripe_code(post.content))) | cdata %></content>

<content type="html"><%-: minify(stripe(stripe_code(page.content))) | cdata %></content>

精简后，生成的search.xml文件体积可缩小为原来的1/3.

Update 2018-01-21:

目前新版的hexo-generator-search插件模板文件位置有所改变，改为了templates/xml.ejs文件，修改方法不变。

界面结构及样式

添加HTML代码

搜索框沿用了之前Swiftype的搜索框，放在侧边栏的最上方，这个比较符合我的审美。参考MOxFIVE的做法将搜索结果也放在侧边栏中，没有添加搜索重置按钮。修改left-col.ejs文件，在其中添加相关代码：

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
<div class="overlay"></div>
<div class="intrude-less">
    
<form id="search-form" class="search">  <!-- 搜索框相关 -->
    <input type="text" id="st-search-input" name="q" results="0" class="st-default-search-input" maxlength="30" placeholder="Search..." autocomplete="off" autocorrect="off">
</form>

<header id="header" class="inner">
    <a href="/" class="profilepic">
        <% if (theme.animate){ %>
        <img lazy-src="<%=theme.avatar%>" class="js-avatar">
        <%}else{%>
        <img src="<%=theme.avatar%>" class="js-avatar" style="width: 100%;height: 100%;opacity: 1;">
        <%}%>
    </a>

    <hgroup>
      <h1 class="header-author"><a href="/"><%=theme.author%></a></h1>
    </hgroup>
    

    <% if (theme.subtitle){ %>
    <p class="header-subtitle"><%=theme.subtitle%></p>
    <%}%>
    
    <div id="local-search-result"></div> <!-- 搜索结果区 -->
    <p class='no-result'>No results found </p> <!-- 无匹配时显示，注意请在 CSS 中设置默认隐藏 -->

    <!-- 以下保持不变，省略 -->

修改CSS样式

CSS样式直接使用了MOxFIVE的样式（去掉了其中用不到的部分），在style.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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
form input.st-default-search-input {
    font-size: 12px;
    padding: 4px 9px 4px 27px;
    height: 20px;
    width: 140px;
    color: #666;
    border: 1px solid #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.17);
    -moz-box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.17);
    box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.17);
    outline: none;
    background: #fcfcfc url(/img/search.png) no-repeat 7px 7px;
}

/*搜索结果区*/
#local-search-result {
  margin: auto -12% auto -6%;
  margin-top: 10px;
  font-size: 0.9em;
  text-align: left;
  word-break: break-all;
}

#local-search-result ul.search-result-list li:hover {
  font-weight: normal;
}

/*单条搜索结果*/
#local-search-result li {
  margin: 0.5em auto;
  border-bottom: 2px solid #d3d3d3;
}
#local-search-result .search-result-list li:hover {
  background: rgba(158,188,226,0.21);
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

/*匹配的标题*/
#local-search-result a.search-result-title {
  line-height: 1.2;
  font-weight: bold;
  color: #708090;
}

/*搜索预览段落*/
#local-search-result p.search-result {
  margin: 0.4em auto;
  line-height: 1.2em;
  max-height: 3.6em;
  overflow: hidden;
  font-size: 0.8em;
  text-align: justify;
  color: #808080;
}

/*匹配的关键词*/
#local-search-result em.search-keyword {
  color: #f58e90;
  border-bottom: 1px dashed #f58e90;
  font-weight: bold;
  font-size: 0.85em;
}

/*无匹配搜索结果时显示*/
p.no-result {
  display: none;
  margin: 2em 0 2em 6%;
  padding-bottom: 0.5em;
  text-align: left;
  color: #808080;
  font-family: font-serif serif;
  border-bottom: 2px solid #d3d3d3;
}

其中input.st-default-search-input是Swiftype提供的搜索框样式。

添加侧边栏滚动条

Yilia主题的侧边栏是不会添加滚动条的，这就会造成搜索结果显示不完全，需要修改main.styl文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.left-col {
    background: #fff;
    width: 250px;
    position:fixed;
    opacity:1;
    transition:all .2s ease-in;
    height:100%;
+    overflow-y: auto;

.switch-area{
    position: relative;
    width: 100%;
    overflow: hidden;
-    min-height: 500px;
+    min-height: 200px;
    font-size: 14px;
    .switch-wrap{
        transition: transform .3s ease-in;
        position: relative;
    }
}

Javascript功能代码

参考MOxFIVE的代码，进行了以下修改：

  1. 修改搜索框的名称以便和HTML代码配套；
  2. 去除重置搜索按钮相关代码；
  3. 不在新标签页中打开搜索结果；
  4. 搜索结果URL链接去掉主域名，使用相对路径表示；
  5. 保持搜索结果中标题大小写格式；
  6. 对搜索结果相关度进行了打分，根据关键词出现的次数进行排序

首先在pc.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
var search = function(){
    require(['/js/search.js'], function(){
        var inputArea = document.querySelector("#st-search-input");
        var $HideWhenSearch = $("#toc, #tocButton, .post-list, #post-nav-button a:nth-child(2)");
        var $resultArea = $("#local-search-result");

        var getSearchFile = function(){
            var search_path = "/search.xml";
            var path = search_path;
            searchFunc(path, 'st-search-input', 'local-search-result');
        }

        var getFileOnload = inputArea.getAttribute('searchonload');
        if (getFileOnload === "true") {
            getSearchFile();
        } else {
            inputArea.onfocus = function(){ getSearchFile() }
        }

        var HideTocArea = function(){
            $HideWhenSearch.css("visibility","hidden");
        }
        inputArea.oninput = function(){ HideTocArea() }
        inputArea.onkeydown = function(){ if(event.keyCode==13) return false}

        $resultArea.bind("DOMNodeRemoved DOMNodeInserted", function(e) {
            if (!$(e.target).text()) {
                $(".no-result").show(200);
            } else {
              $(".no-result").hide();
            }
        })
    })
}();

代码详细说明见MOxFIVE的文章。

新建source/js/search.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
109
110
111
// A local search script with the help of [hexo-generator-search](https://github.com/PaicHyperionDev/hexo-generator-search)
// Copyright (C) 2015 
// Joseph Pan <http://github.com/wzpan>
// Shuhao Mao <http://github.com/maoshuhao>
// Edited by MOxFIVE <http://github.com/MOxFIVE>
// Edited by Mingfei Gao <http://gaomf.cn>

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 finalHTML='<ul class=\"search-result-list\">';
                var str = "";                
                var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                $resultContent.innerHTML = "";
                if (this.value.trim().length <= 0) {
                    return;
                }
                // Search result Array
                function SearchData(str, score) {
                    this.str = str;
                    this.score = score;
                }
                var SearchResultArr = new Array();
                var tmpscore;
                // perform local searching
                datas.forEach(function(data) {
                    var content_index = [];
                    var data_title = data.title.trim().toLowerCase();
                    var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
                    var data_url = data.url.replace("http://gaomingfei.xyz","");
                    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 != '') {
                        tmpscore = 0;
                        keywords.forEach(function(keyword, i) {
                            index_title = data_title.indexOf(keyword);
                            index_content = data_content.indexOf(keyword);
                            
                            if (index_title >= 0) {
                                tmpscore += 30;
                            }
                            if (index_content >= 0) {
                                if (first_occur < 0) {
                                    first_occur = index_content;
                                }
                                while (index_content >= 0) {
                                    tmpscore += 1;
                                    index_content = data_content.indexOf(keyword, index_content + 1);
                                }
                            }
                        });
                    }
                    // show search results
                    if (tmpscore > 0) {
                        str = "<li><a href='"+ data_url +"' class='search-result-title'>"+ "> " + data.title +"</a>";
                        var content = data.content.trim().replace(/<[^>]+>/g,"");
                        // 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>"
                        
                        SearchResultArr.push(new SearchData(str, tmpscore));
                    }
                })
                
                // Sort Search Result
                function compareScore(a, b) {
                    return b.score - a.score;
                }
                SearchResultArr.sort(compareScore);
                
                // Final HTML
                SearchResultArr.forEach(function(data){
                    finalHTML += data.str;
                })
                $resultContent.innerHTML = finalHTML;
            })
        }
    })
}

其中打分排序标题中出现的关键词计30分，内容中的关键词一个计1分，总分越高意味着相关度越高，排在越前面。

实际效果可直接使用文章左侧边栏上的搜索框进行体验，总体来说还是很令人满意的，至此终于搞定了站内搜索问题啦~~

本文标题:为Hexo博客Yilia主题添加本地站内搜索功能

文章作者:高明飞

发布时间:2016-10-10, 22:49:23

最后更新:2021-06-11, 21:45:29

原始链接:https://gaomf.cn/2016/10/10/%E4%B8%BAHexo%E5%8D%9A%E5%AE%A2Yilia%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E6%9C%AC%E5%9C%B0%E7%AB%99%E5%86%85%E6%90%9C%E7%B4%A2%E5%8A%9F%E8%83%BD/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 生成索引文件
    1. 1.1. 安装插件
    2. 1.2. 修改插件
  2. 2. 界面结构及样式
    1. 2.1. 添加HTML代码
    2. 2.2. 修改CSS样式
    3. 2.3. 添加侧边栏滚动条
  3. 3. Javascript功能代码