对hexo博客添加站内搜索功能

作者 汪小祯 日期 2016-07-04
对hexo博客添加站内搜索功能

花了几天的时间终于把博客搜索功能给添加了上去,整理了一下修改记录,把修改方式放在这里,亲测可以使用,希望能对有需要的人有帮助。

需要修改的文件列表

_config.yml

layout/_partial/left-col.ejs

source/css/_partial/search.styl

source/css/style.styl

source/js/search.js

插件安装

npm install --save hexo-generator-search

文件修改

_config.yml 添加

search:
on: true
onload: false

layout/_partial/left-col.ejs修改/添加

<% if (theme.search.on){ %>
<form id="search-form">
<input type="text" id="local-search-input" name="q" results="0" placeholder="search..." class="search form-control" autocomplete="off" autocorrect="off" searchonload="<%= theme.search.onload %>" />
<i class="fa fa-times" onclick="resetSearch()"></i>
</form>
<div id="local-search-result"></div>
<p class='no-result'>No results found <i class='fa fa-spinner fa-pulse'></i></p>
<%}%>

source/css/_partial/search.styl 新建一个文件

.search
width 68%
height 18px
margin-top 1px
padding 0
font-family inherit
border 2px solid transparent
border-bottom 2px solid lightgray
border-radius 2px
opacity .65
background none
&:hover
border 2px solid lightgray
opacity 1
box-shadow 0 0 10px rgba(0, 0, 0, .3)
#search-form .fa-times
display none
padding 1px .7em
box-shadow: 0 0 3px rgba(0, 0, 0, .15)
cursor pointer
color gray
&:active
background lightgray
&:hover
zoom 1.1
padding 1px .6em
border: 1px solid lightgray
box-shadow: 0 0 6px rgba(0, 0, 0, .25)
#local-search-result
margin auto -12% auto -6%
font-size .9rem
text-align left
word-break break-all
ul.search-result-list li:hover
font-weight normal
li
margin .5em auto
border-bottom 2px solid lightgray
.search-result-list li:hover
background rgba(158,188,226,0.21)
box-shadow 0 0 5px rgba(0, 0, 0, .2)
a.search-result-title
line-height 1.2
font-weight bold
color #708090
p.search-result
margin .4em auto
line-height 1.2rem
max-height @line-height * 3rem
overflow hidden
font-size .8rem
text-align justify
color gray
em.search-keyword
color #f58e90
border-bottom: 1px dashed @color
font-weight: bold
font-size .85rem
p.no-result
display none
margin 2em 0 2em 6%
padding-bottom .5em
text-align left
color gray
font-family font-serif serif
border-bottom 2px solid lightgray

source/css/style.styl添加,没有的话搜索样式会错误

if search
@import "_partial/search"
### source/js/pc.js添加
var search = function(){
require([yiliaConfig.rootUrl + 'js/search.js'], function(){
var inputArea = document.querySelector("#local-search-input");
var $HideWhenSearch = $("#toc, #tocButton, .post-list, #post-nav-button a:nth-child(2)");
var $resetButton = $("#search-form .fa-times");
var $resultArea = $("#local-search-result");
var getSearchFile = function(){
var search_path = "search.xml";
var path = yiliaConfig.rootUrl + search_path;
searchFunc(path, 'local-search-input', 'local-search-result');
}
var getFileOnload = inputArea.getAttribute('searchonload');
if (yiliaConfig.search && getFileOnload === "true") {
getSearchFile();
} else {
inputArea.onfocus = function(){ getSearchFile() }
}
var HideTocArea = function(){
$HideWhenSearch.css("visibility","hidden");
$resetButton.show();
}
inputArea.oninput = function(){ HideTocArea() }
inputArea.onkeydown = function(){ if(event.keyCode==13) return false}
resetSearch = function(){
$HideWhenSearch.css("visibility","initial");
$resultArea.html("");
document.querySelector("#search-form").reset();
$resetButton.hide();
$(".no-result").hide();
}
$resultArea.bind("DOMNodeRemoved DOMNodeInserted", function(e) {
if (!$(e.target).text()) {
$(".no-result").show(200);
} else {
$(".no-result").hide();
}
})
});
}

在最下面的return函数中添加

search();

source/js/search.js添加

// A local search script with the help of [hexo-generator-search](https://github.com/PaicHyperionDev/hexo-generator-search)
// Copyright (C) 2015
// Joseph Pan <http://github.com/wzpan>
// Shuhao Mao <http://github.com/maoshuhao>
// Edited by MOxFIVE <http://github.com/MOxFIVE>
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' target='_blank'>"+ "> " + data_title +"</a>";
var content = data.content.trim().replace(/<[^>]+>/g,"");
if (first_occur >= 0) {
// cut out characters
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);
// 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>"
}
}
});
$resultContent.innerHTML = str;
});
}
});
}
<script>
yiliaConfig.search = <%= theme.search.on %>;
yiliaConfig.rootUrl = "\/";
</script>

最后

本文参照了MOxFIVE的方法,链接在这让 Hexo 博客支持本地站内搜索-MOxFIVE
博主为了给博客添加搜索功能,真是操碎了心,不停改代码都没实现,最后是在MOxFIVE帮助下,实现了功能,特别感谢,并在此整理了这篇文章,希望能对人有用。

完整的代码修改记录

Nine’s Github
添加修改功能的yilia主题
已知试用于yilia主题,spfk主题,以及从yilia主题修改出来的其他主题。