Hexo开发主题，加入本地搜索功能

前言

最近在折腾自己的hexo 主题，本文记录一下如何添加搜索功能。

安装插件

由于搜索功能是调用hexo-generator-search生成xml数据，所以需要安装hexo-generator-search插件

npm install --save hexo-generator-search

然后在站点配置文件中增加插件配置，不是主题的是站点的。

search:
    path: search.xml
    field: post

效果如下：

然后添加到导航目录上面

我在这里是使用的bootstrap来写的主题，所以我们就选择模态对话框来完成搜索的界面。

然后创建search.ejs文件，把模态对话框的代码复制进去

然后在导航加入判断：

<%if(i!='搜索'){%>
<%= i %>
<%}else{%>
<%= i %>
            <%}%>< code>

主要目的就是如果是搜索的话就进行特殊处理一下增加唤醒模态框的代码，

然后把模态框引入进来，然后点击搜索，发现已经可以弹出

生成索引

然后开始编写生成索引文件的js

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'>"+ 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>";
                $resultContent.innerHTML = str;
            });
        }
    });
}

var path = "/search.xml";
searchFunc(path, 'local-search-input', 'local-search-result');

然后修改模态对话框

注意

searchFunc(path, 'local-search-input', 'local-search-result');

输入框的ID设置为local-search-input,然后返回结果的ID 设置为local-search-result.

可以看下面的例子

完成以后重启服务器

加入清楚输入框内容的代码，当模态框隐藏后清楚

$('#identifier').on('hidden.bs.modal', function () {
    // 执行一些动作...
  $("#local-search-result").empty();
  $("#local-search-input").val('');
})

效果