hexo如何添加自定义站内搜索-白红宇

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

阅读量：5933 次

发布时间：2019-06-19

本文共 4278 字，大约阅读时间需要 14 分钟。

Hexo如何实现站内搜索

主要的步骤

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

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

生成搜索框

加到index.ejs


            
     站内搜索

输入框样式可以自己修改我只是修改了宽度,可以这里直接加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='
    
     ';                                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 += "
     "+ "> " + data_title +"";                        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, ""+keyword+"");                            })                            str += "" + match_content +"...
"                        }                    }                })                $resultContent.innerHTML = str;            })        }    })};var path = "../search.xml";searchFunc(path, 'local-search-input', 'local-search-result');