Skip to content

Commit

Permalink
feat: Local Site Search | 本地站内搜索
Browse files Browse the repository at this point in the history
  • Loading branch information
MOxFIVE committed May 25, 2016
1 parent 7814a79 commit 0280f6a
Show file tree
Hide file tree
Showing 10 changed files with 230 additions and 26 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ git pull
| 5 | 文章导航切换按钮 | Post navigation button |
| 6 | 网站计数 | Site counter |
| 7 | 多语言支持 | i18n, multi-language |
| 8 | 本地站内搜索 | Local Site Search |

![feature](http://moxfive.github.io/resources/yelee-features.jpg)

Expand Down
13 changes: 9 additions & 4 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -146,10 +146,6 @@ toc: true
# Keep TOC title on the same line |
toc_nowrap: false

# 是否显示边栏中的搜索框(仅样式,未添加搜索功能)
# Search Box in left column
search_box: false

# 是否开启主页及加载头像时的动画效果
# Animation in Homepage and Loading avatar
animate: true
Expand Down Expand Up @@ -193,6 +189,15 @@ ie_updater:

# >>> Vendors | 第三方工具 & 服务 <<<

# Local Site Search | 本地站内搜索
## Insatall below plugin to take effect | 使用搜索需先安装对应插件
## https://github.com/PaicHyperionDev/hexo-generator-search
search:
#on: true
onload: false
## true: get search.xml file when the page has loaded
## false: get the file when search box gets focus

# images viewer | 图片浏览器
## http://www.fancyapps.com/fancybox/
fancybox: true
Expand Down
3 changes: 2 additions & 1 deletion layout/_partial/head.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,8 @@
isCategory: <%=is_category()%>,
open_in_new: <%=theme.open_in_new%>,
fancybox_js: "<%- theme.CDN.fancybox_js %>",
scrollreveal: "<%- theme.CDN.scrollreveal %>"
scrollreveal: "<%- theme.CDN.scrollreveal %>",
search: <%= theme.search.on %>
}
</script>

Expand Down
12 changes: 9 additions & 3 deletions layout/_partial/left-col.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,15 @@
<% if (theme.subtitle){ %>
<p class="header-subtitle"><%=theme.subtitle%></p>
<%}%>
<% if (theme.search_box){ %>
<form><input type="text" class="search" placeholder=" Search..."></form>
<%}%>

<% 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>
<%}%>


<%if(theme.tagcloud){%>
Expand Down
18 changes: 0 additions & 18 deletions source/css/_partial/main.styl
Original file line number Diff line number Diff line change
Expand Up @@ -233,24 +233,6 @@
padding: 0 40px;
}

.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: .2;
background: none;
&:hover {
border: 2px solid lightgray;
opacity: 1;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
};
}

#scroll{
right: 0;
}
Expand Down
69 changes: 69 additions & 0 deletions source/css/_partial/search.styl
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
.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
1 change: 1 addition & 0 deletions source/css/_variables.styl
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ i-opacity = .75
toc-top = 378px

share = hexo-config("share.on")
search = hexo-config("search.on")

color-scheme = hexo-config("color_scheme")
background-image = hexo-config("background_image")
Expand Down
4 changes: 4 additions & 0 deletions source/css/style.styl
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,10 @@ if share
@import "_partial/scroll"
@import "_partial/mobile-slider"
@import "_partial/post/youyan"

if search
@import "_partial/search"

@import "_partial/customise/color-scheme"

if sidebar
Expand Down
46 changes: 46 additions & 0 deletions source/js/pc.js
Original file line number Diff line number Diff line change
Expand Up @@ -156,13 +156,59 @@ define([], function(){
});
}

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 {
init: function(){
resetTags();
bind();
Tips.init();
miniArchives();
tooltip();
search();
}
}
});
89 changes: 89 additions & 0 deletions source/js/search.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
// 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;
});
}
});
}

0 comments on commit 0280f6a

Please sign in to comment.