🍻 正在加载今日诗词....

hexo+yilia集成本地搜索

yilia主题也有集成搜索功能，不过它使用的搜索是基于标题和标签的，有一定的局限性，没有提供全文检索功能。这篇文章介绍的就是集成全文检索和今日诗词。使用hexo-generator-search插件为文章生成一个全局的search.xml，里面包含所有文章的内容（可配置）。然后再去这个文件中搜索关键字，以此来找到需要的文章。

1.1安装插件

https://github.com/wzpan/hexo-generator-search

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

1
npm install hexo-generator-search --save

然后在全局（_config.yml）配置：

1
2
3
search:
  path: search.xml
  field: all
  • path，生成的路径，上述配置后可以通过 /search.xml 访问到文。
  • field，用来配置全局检索的区间，可以是 post/page/all。

重新clean、测试，就可以访问：http://localhost:4000/search.xml 了。

1.2为网页添加搜索栏

参考了博主的代码：https://github.com/barretlee/hexo-search-plugin-snippets

1.2.1添加搜索框

在e:\Hexo\themes\yilia\layout\layout.ejs的<div id="wrapper" class="body-wrap">'后面添加如下代码（同时添加了‘今日诗词’）

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
<% if(theme.search) { %>
<div class="page-header" style="">
    <%# 今日诗词网址： https://www.jinrishici.com/ %>
    <span>🍻  
        <span id="jinrishici-sentence" title="今日诗词">正在加载今日诗词....</span>
    </span>
    <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

    <%# 《集成本地搜索 %>
    <script type="text/javascript" src="/js/search.js"></script>
    <span id="local-search" class="local-search local-search-plugin" style="">
      <input type="search" placeholder="站内搜索" id="local-search-input" class="local-search-input-cls" style="">
      <i id="local-search-icon-search" class="icon" aria-hidden="true" title="站内搜索">🔍</i>
      <div id="local-search-result" class="local-search-result-cls"></div>
    </span>

    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        if ($('.local-search').size()) {
          $.getScript('/js/search.js', function() {
            searchFunc("/search.xml", 'local-search-input', 'local-search-result');
          });
        }
    </script>
    <%# 集成本地搜索》 %>
</div>
<% } %>

  <div id="wrapper" class="body-wrap">

1.2.2添加js脚本

新建文件：e:\Hexo\themes\yilia\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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
// A local search script with the help of hexo-generator-search
// Copyright (C) 2015 
// Joseph Pan <http://github.com/wzpan>
// Shuhao Mao <http://github.com/maoshuhao>
// This library is free software; you can redistribute it and/or modify
// it under the terms of the GNU Lesser General Public License as
// published by the Free Software Foundation; either version 2.1 of the
// License, or (at your option) any later version.
// 
// This library is distributed in the hope that it will be useful, but
// WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
// Lesser General Public License for more details.
// 
// You should have received a copy of the GNU Lesser General Public
// License along with this library; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
// 02110-1301 USA
// 

var searchFunc = function (path, search_id, content_id) {
    'use strict';
    var BTN = "<i id='local-search-close'>x</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('');
    });
    $(document).on('focus', '#local-search', function () {
        $('#local-search-icon-search').html('❌');
        $('#local-search-icon-search').attr('id', 'local-search-icon-close');
        //console.log("66666");
    });
    $(document).on('click', '#local-search-icon-close', function () {
        $('#local-search-input').val('');
        $('#local-search-result').html('');
        $('#local-search-icon-close').html('🔍');
        $('#local-search-icon-close').attr('id', 'local-search-icon-search');
        //console.log("1111");
    });
}

1.2.3添加样式文件

1.新建：e:\Hexo\themes\yilia\source\css\search.css

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
127
.local-search {
    position: absolute;
    text-align: left;
    display:inline-block;
    margin-bottom: 0px;
    right:10%;
}
.local-search-input-cls {
    width: 200px;
    /* margin: 10px 0; */
    padding: 8px 12px;
    border-radius: 4px;
    border: 2px solid #5ad1ed;
    color: #666;
    font-size: 14px
}
.local-search-input-cls::-webkit-input-placeholder {
    color: #2d2626;
}
.local-search-input-cls::-moz-input-placeholder {
    color: #2d2626;
}
.local-search-input-cls::-ms-input-placeholder {
    color: #2d2626;
}
#local-search-close {
    content:'x';
    position: absolute;
    right: 10px;
    top: 10px;
    background: #fff;
    color: #888;
    border-radius: 100%;
    line-height: 16px;
    text-align: center;
    font-size: 16px;
    font-family: consolas;
    border: 1px solid #ccc;
    display: block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-style: normal;
    font-weight: 400;
    transform: rotateZ(0);
    transition: all .3s
}
#local-search-close:hover {
    border-color: #666;
    color: #222;
    transform: rotateZ(180deg);
    transition: all .3s
}
.local-search-result-cls {
    position: absolute;
    z-index: 99;
    width: 400px;
    /* top: 50px; */
    right: -16px;
}
.local-search-result-cls .local-search-empty {
    color: #888;
    line-height: 44px;
    text-align: center;
    display: block;
    font-size: 16px;
    font-weight: 400
}
.local-search-result-cls ul {
    width: 360px;
    max-height: 450px;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 3px 4px 10px #7dc3d8;
    margin-top: 20px;
}
.local-search-result-cls ul li {
    text-align: left;
    border-bottom: 1px solid #bdb7b7;
    padding-bottom: 20px;
    margin-bottom: 20px;
    line-height: 30px;
    font-weight: 400
}
.local-search-result-cls ul li:last-child {
    border-bottom: none;
    margin-bottom: 0
}
.local-search-result-cls ul li a {
    margin-top: 20px;
    font-size: 16px;
    text-decoration:none;
    transition: all .3s
}
.local-search-result-cls ul li a:hover {
    text-decoration:underline;
}
.local-search-result-cls ul li p {
    margin-top: 10px;
    font-size: 14px;
    max-height: 124px;
    overflow: hidden
}
.local-search-result-cls ul li em.search-keyword {
    color: #e58c7c;
    font-weight:bold;
}
.local-search-plugin .local-search-input-cls {
    opacity: .6;
    width: 160px;
    transition: all .3s
}
.local-search-plugin .local-search-input-cls:hover {
    opacity: 1;
    width: 200px;
    transition: all .3s
}
.local-search-plugin .icon {
    position: relative;
    left: -30px;
    color: #999;
    cursor: pointer
}

2.将上面的样式引入页面中，修改themes/yilia/layout/_partial/css.ejs，再后面添加：

1
复制<link rel="stylesheet" type="text/css" href="<%=config.root%>./search.css">

3.修改e:\Hexo\themes\yilia\source\main.0cf68a.css，添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 页面头部：包含‘今日诗词’，站内搜索 */
.page-header {
    position: relative;
    border: 1px solid #fff;
    margin: 5px 30px 4px 30px;
    background: #fff;
    -webkit-transition: all 0.2s ease-in;
    height:45px;
    font-family: '微软雅黑';
    border-radius:5px;
    padding-left:10px;
}

/* 今日诗词 */
#jinrishici-sentence{
  color:#27d7a1;
  padding-left: 10px;
  line-height: 45px;
  font-size: 15px;
}

2.更近一步适配手机端

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
e:\Hexo\themes\yilia\source\main.0cf68a.css
@media screen and (max-width:800px) {
.page-header {
    position: relative;
    border: 1px solid #fff;
    /* margin: 5px 30px 4px 30px; */
    background: #fff;
    -webkit-transition: all 0.2s ease-in;
    height: 45px;
    font-family: '微软雅黑';
    border-radius: 5px;
    padding-left: 2px;
}
}
e:\Hexo\themes\yilia\source\search.css
/* 手机端 */
@media screen and (max-width:800px) {
.local-search {
    position: absolute;
    text-align: left;
    display:inline-block;
    margin-bottom: 0px;
    right: -5%;
}
.local-search-plugin .local-search-input-cls {
    opacity: .6;
    width: 100px;
    transition: all .3s;
}
.local-search-result-cls {
    right: 2px;
}
.local-search-result-cls ul {
    width: 360px;
    max-height: 400px;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 3px 4px 10px #7dc3d8;
    margin-top: 20px;
}
}

手机端取消本地搜索功能

因为考虑到手机端界面比较小，这里取消搜索功能。

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
e:\Hexo\themes\yilia\layout\layout.ejs
<script>
    // 移动设备侦测
    var isMobile = {
      Android: function () {
        return navigator.userAgent.match(/Android/i);
      },
      BlackBerry: function () {
        return navigator.userAgent.match(/BlackBerry/i);
      },
      iOS: function () {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
      },
      Opera: function () {
        return navigator.userAgent.match(/Opera Mini/i);
      },
      Windows: function () {
        return navigator.userAgent.match(/IEMobile/i);
      },
      any: function () {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
      }
    };

    if(isMobile.any()){
        //手机端取消搜索功能
        $('.local-search').css("display","none");
    }

    if ($('.local-search').size() && !isMobile.any()) {
      $.getScript('/js/search.js', function() {
        searchFunc("/search.xml", 'local-search-input', 'local-search-result');
      });
    }
</script>

或者直接用css隐藏搜索框e:\Hexo\themes\yilia\source\css\search.css

1
2
3
4
5
6
7
/* 手机端 */
@media screen and (max-width:800px) {
    .page-header {
        display:none;
        /* right: -5%; */
    }
}
赏

谢谢你请我吃糖果

支付宝
微信
置顶

扫一扫，分享到微信

微信分享二维码
本站总访问量次 |

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

刘峻良<br><br>从事Java软件开发，敲了几年代码<br>修炼的道路，一颗不服输的心，努力奔跑<br><br><br>声明：<br>现部分文章为寻找问题时在网上相互转载，在此博客中做个记录，方便自己也方便有类似问题的朋友，故原出处已不好查到，如有侵权，请私信表明文章和原出处地址进行删除,谢谢！