hexo如何添加自定义站内搜索

Hexo如何实现站内搜索

主要的步骤

1.利用插件hexo-generator-search生成xml文件
2.利用jQ.ajax解析xml
3.寻找所用主题对应文件修改

主要的部分还是插件写的好啊，对应的解析函数也是改造插件作者的

生成搜索框

加到index.ejs

<section>
        <span class="h1"><a href="#">站内搜索</a></span>
        <div id="site_search">
        <input type="text" id="local-search-input" style=" 200px;" results="0"/>
        <div id="local-search-result"></div>
        </div>
</section>

输入框样式可以自己修改我只是修改了宽度,可以这里直接加style
如果样式加的多，可以找下主题style文件

插件安装

npm install --save hexo-generator-search

这个插件可以生成供搜索的索引数据
插件配置说明

解析函数

var searchFunc = function(path, search_id, content_id) {
    'use strict'; //使用严格模式
    $.ajax({
        url: path,
        dataType: "xml",
        success: function( xmlResponse ) {
            // 从xml中获取相应的标题等数据
            var datas = $( "entry", xmlResponse ).map(function() {
                return {
                    title: $( "title", this ).text(),
                    content: $("content",this).text(),
                    url: $( "url" , this).text()
                };
            }).get();
            //ID选择器
            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;
                }
                // 本地搜索主要部分
                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;
                    // 只匹配非空文章
                    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;
                                }
                            }
                        });
                    }
                    // 返回搜索结果
                    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) {
                            // 拿出含有搜索字的部分
                            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); 
                            // 列出搜索关键字，定义class加高亮
                            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 path = "../search.xml";
searchFunc(path, 'local-search-input', 'local-search-result');

这里的url你也可以指定完整路径->http://localhost:4000/search.xml
生成的样式需要自定义