Fork me on GitHub

hexo Yilia主题支持搜索功能

字数统计: 1.4k字   |   阅读时长≈ 8分

介绍

当hexo的文章越来越多，依靠标题和tag去搜索有点不够用，因此需要支持搜索功能，hexo查询主要依赖本地索引文件生成，具体步骤如下：

  • 安装插件: npm install --save hexo-generator-search
  • 根目录下的_config.yml中添加如下配置即可
1
2
3
search:
  path: search.xml
  field: all
  • 添加搜索框，在主题目录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
<% if(theme.search) { %>
  <div class="page-header" style="">
      <%# 《集成本地搜索 %>
      <script type="text/javascript" src="/js/search.js"></script>
      <div 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>
      </div>
  
      <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
      <script>
          if ($('.local-search').size()) {
            $.getScript('/search/search.js', function() {
              searchFunc("/search.xml", 'local-search-input', 'local-search-result');
            });
          }
      </script>
      <%# 集成本地搜索》 %>
  </div>
  <% } %>
  <div id="wrapper" class="body-wrap">
  • 新建themes/yilia/source/search目录，同时新增search.js和search.css文件

代码如下：

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");
    });
}

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
.local-search {
    margin:16px 30px;
    position: relative;
}
.local-search-input-cls {
    width: 80%;
    /* margin: 10px 0; */
    padding: 8px 12px;
    border-radius: 4px;
    border: 2px solid #4d4d4d;
    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: 100%;
    /* 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: 80%;
    transition: all .3s
}
.local-search-plugin .local-search-input-cls:hover {
    opacity: 1;
    width: 80%;
    transition: all .3s
}
.local-search-plugin .icon {
    position: relative;
    left: -30px;
    color: #999;
    cursor: pointer
}

参考资料

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

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    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

borfy

毕业于广大华软学院，软件工程师一枚！

Java出身，喜欢前端进行转岗，主攻全栈发展，技术有：Vue、React、Nodejs、Java等。