Permalink
Browse files

feat: Local Site Search | 本地站内搜索

  • Loading branch information...
1 parent 7814a79 commit 0280f6a17d1a0fa1f52056856082e022dfac220c @MOxFIVE committed May 25, 2016
View
@@ -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)
View
@@ -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
@@ -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
@@ -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>
@@ -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){%>
@@ -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;
}
@@ -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
@@ -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")
@@ -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
View
@@ -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();
}
}
});
View
@@ -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.