hexo 搜索_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');

这里的url你也可以指定完整路径->http://localhost:4000/search.xml

生成的样式需要自定义

ul.search-result-lista.search-result-titlep.search-resultem.search-keyword

放置js文件和输入框

至于放在哪，看你的喜好了

我放到了主页位置

参考链接：插件作者