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>%}%><>%}else{%>
主要目的就是如果是搜索的话就进行特殊处理一下增加唤醒模态框的代码,
然后把模态框引入进来,然后点击搜索,发现已经可以弹出
生成索引
然后开始编写生成索引文件的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('');
})
效果
- 本文标题:Hexo开发主题,加入本地搜索功能
- 本文作者:孙罗蒙
- 创建时间:2019-12-01 14:04:43
- 本文链接:https://lqcoder.com/p/9dc8e349.html
- 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!