[feat] add local search

_config.yml

@@ -25,10 +25,10 @@ sidebar:
     # about: '[关于](/about/)'
   # Sidebar widgets
   widgets:
-    index: welcome, recent, timeline # for home/wiki/categories/tags/archives/404 pages
+    index: welcome, search, recent, timeline # for home/wiki/categories/tags/archives/404 pages
     page: welcome, toc # for pages using 'layout:page'
-    post: toc, ghrepo, ghissues # for pages using 'layout:post'
-    wiki: ghrepo, toc, ghissues, related # for pages using 'layout:wiki'
+    post: toc, ghrepo, search, ghissues # for pages using 'layout:post'
+    wiki: search, ghrepo, toc, ghissues, related # for pages using 'layout:wiki'
 
 ######## Index ########
 post-index: # 近期发布 分类 标签 归档 and ...
@@ -61,6 +61,11 @@ article:
     max_count: 5
 
 
+search:
+  service: local_search # hexo, todo...
+  local_search: # npm i hexo-generator-search
+  
+
 ######## Comments ########
 comments:
   service: # beaudar, utterances, twikoo, waline

_data/widgets.yml

@@ -2,6 +2,9 @@
 # layout即组件布局，支持自定义的有：
 # - markdown: 渲染 md 文本
 #
+search:
+  layout: search
+  filter: auto # auto or 'path'
   
 ghrepo:
   layout: ghrepo

languages/en.yml

@@ -41,6 +41,11 @@ page:
     why: The address may be entered incorrectly or the address has been deleted.
     action: Back to Home
 
+search:
+  search: Search
+  search_in: Search in %s
+  no_results: No Results!
+
 message:
   copied: Copied!
 

languages/zh-CN.yml

@@ -41,6 +41,11 @@ page:
     why: 可能是输入地址有误或该地址已被删除
     action: 返回主页
 
+search:
+  search: 站内搜索
+  search_in: 在 %s 中搜索
+  no_results: 没有找到内容！
+
 message:
   copied: 复制成功
 

languages/zh-TW.yml

@@ -41,6 +41,11 @@ page:
     why: 可能是網址有誤或已經刪除
     action: 返回首頁
 
+search:
+  search: 站內搜索
+  search_in: 在 %s 中搜索
+  no_results: 沒有找到內容！
+
 message:
   copied: 複製成功
 

layout/_partial/scripts/index.ejs

@@ -107,6 +107,15 @@
     jQuery: '<%- url_for(theme.plugins.jquery || "https://fastly.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js") %>'
   };
 
+  if ('<%- theme.search.service %>') {
+    stellar.search = {};
+    stellar.search.service = '<%- theme.search.service %>';
+    if (stellar.search.service == 'local_search') {
+      let service_obj = Object.assign({}, <%- JSON.stringify(config.search) %>);
+      stellar.search[stellar.search.service] = service_obj;
+    }
+  }
+
   // stellar js
   stellar.plugins.stellar = Object.assign(<%- JSON.stringify(theme.plugins.stellar) %>);
 

layout/_partial/widgets/search.ejs

@@ -0,0 +1,31 @@
+<%
+function layoutDiv() {
+  var el = '<widget class="widget-wrapper search">'
+  el += '<div class="widget-body">'
+  el += '<div class="search-wrapper" id="search">'
+  el += '<form class="search-form">'
+  var filter = ''
+  if (item.filter == 'auto' && page.layout == 'wiki') {
+    let matches = page.path.match(/(.*?)\/(.*?)\//i)
+    if (matches?.length > 0) {
+      filter = matches[0]
+    }
+  }
+  el += '<input type="text" class="search-input" id="search-input"'
+  if (filter.length > 0) {
+    filter = '/' + filter
+    el += ' data-filter="' + filter + '"'
+    el += ' placeholder="' + (item.placeholder || __('search.search_in', filter)) + '">'
+  } else {
+    el += ' placeholder="' + (item.placeholder || __('search.search')) + '">'
+  }
+  el += '</form>'
+  el += '<div id="search-result"></div>'
+  el += '<div class="search-no-result">' + __('search.no_results') + '</div>'
+  el += '</div>'
+  el += '</div>'
+  el += '</widget>'
+  return el
+}
+%>
+<%- layoutDiv() %>

source/css/_layout/widgets/search.styl

@@ -0,0 +1,3 @@
+.widgets .widget-wrapper.search
+  margin-top: 0
+  margin-bottom: 0

source/css/_layout/widgets/widgets.styl

@@ -10,8 +10,6 @@
   z-index: 1
   line-height: 1.2
   .widget-wrapper
-    display: block
-    margin: 1rem 0 2rem
     .widget-header
       padding-left: var(--gap-l)
       padding-right: var(--gap-l)
@@ -56,3 +54,7 @@
     margin-top: 3rem
   .widget-wrapper+.widget-wrapper.toc .widget-header
     margin-top: 1rem
+
+.widget-wrapper
+    display: block
+    margin: 1rem 0 2rem

source/css/_plugins/index.styl

@@ -8,6 +8,10 @@ if hexo-config('plugins.scrollreveal.enable')
 if hexo-config('plugins.fancybox.enable')
   @import 'fancybox'
 
+// 搜索
+if hexo-config('search.service') == 'local_search'
+  @import 'search/local-search'
+
 // 评论
 if hexo-config('comments.service') == 'beaudar'
   @import 'comments/beaudar'

source/css/_plugins/search/local-search.styl

@@ -0,0 +1,70 @@
+.search-wrapper
+  width: 100%
+  >.search-form
+    position: sticky
+    top: 1rem
+  .search-input
+    width: 100%
+    padding: 0.75rem 1rem
+    line-height: 1
+    box-sizing: border-box
+    border-radius: $border-block
+    background-color: var(--card)
+    color: var(--text-p0)
+    box-shadow: $boxshadow-button
+    trans1 box-shadow
+    &:hover
+      box-shadow: 0 0 2px 0px alpha($color-theme, 0.2), 0 0 8px 0px alpha($color-theme, 0.2)
+    &:focus
+      box-shadow: 0 0 2px 0px alpha($color-theme, 0.4), 0 0 8px 0px alpha($color-theme, 0.4)
+    
+  .search-no-result
+    display: none
+    margin: 1em auto
+    color: var(--text-p1)
+    text-align: center
+    font-size: $fs-14
+    padding: 2rem
+    background: var(--block)
+    border-radius: $border-block
+
+  #search-result
+    ul.search-result-list
+      padding: 0
+      margin: 0
+      list-style-type: none
+    li
+      margin: 1em auto
+      &:hover
+        .search-result-title
+          color: $color-hover
+    .search-result-title
+      background-image: none
+      color: var(--text-p1)
+      text-transform: capitalize
+      font-weight: bold
+      line-height: 1.2
+
+    .search-result-content
+      overflow: hidden
+      color: var(--text-p3)
+      margin: .4em auto
+      max-height: 13em
+      text-align: justify
+      font-size: $fs-12
+      line-height: 1.2
+      display: -webkit-box
+      -webkit-box-orient: vertical
+      overflow: hidden
+      -webkit-line-clamp: 3
+
+    .search-keyword
+      border-bottom: 1px dashed $color-hover
+      color: $color-hover
+      font-weight: bold
+
+
+
+.search-wrapper.noresult
+  .search-no-result
+    display: block

source/js/main.js

@@ -301,6 +301,39 @@ if (stellar.plugins.fancybox) {
   }
 }
 
+
+if (stellar.search.service) {
+  if (stellar.search.service == 'local_search') {
+    stellar.jQuery(() => {
+      stellar.loadScript('/js/search/local-search.js', { defer: true }).then(function () {
+        var $inputArea = $("input#search-input");
+        var $resultArea = document.querySelector("div#search-result");
+        $inputArea.focus(function() {
+          var path = stellar.search[stellar.search.service]?.path || '/search.xml';
+          const filter = $inputArea.attr('data-filter') || '';
+          searchFunc(path, filter, 'search-input', 'search-result');
+        });
+        $inputArea.keydown(function(e) {
+          if (e.which == 13) {
+            e.preventDefault();
+          }
+        });
+        var observer = new MutationObserver(function(mutationsList, observer) {
+          if (mutationsList.length == 1) {
+            if (mutationsList[0].addedNodes.length) {
+              $('.search-wrapper').removeClass('noresult');
+            } else if (mutationsList[0].removedNodes.length) {
+              $('.search-wrapper').addClass('noresult');
+            }
+          }
+        });
+        observer.observe($resultArea, { childList: true });
+      });
+    })
+  }
+}
+
+
 // heti
 if (stellar.plugins.heti) {
   stellar.loadCSS(stellar.plugins.heti.css);

source/js/search/local-search.js

@@ -0,0 +1,161 @@
+// 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>
+// This library is free software; you can redistribute it and/or modify
+// it under the terms of the GNU Lesser General Public License as
+// published by the Free Software Foundation; either version 2.1 of the
+// License, or (at your option) any later version.
+//
+// This library is distributed in the hope that it will be useful, but
+// WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+// Lesser General Public License for more details.
+//
+// You should have received a copy of the GNU Lesser General Public
+// License along with this library; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
+// 02110-1301 USA
+//
+// Modified by:
+// Pieter Robberechts <http://github.com/probberechts>
+
+/*exported searchFunc*/
+var searchFunc = function(path, filter, searchId, contentId) {
+
+  function stripHtml(html) {
+    html = html.replace(/<style([\s\S]*?)<\/style>/gi, "");
+    html = html.replace(/<script([\s\S]*?)<\/script>/gi, "");
+    html = html.replace(/<figure([\s\S]*?)<\/figure>/gi, "");
+    html = html.replace(/<\/div>/ig, "\n");
+    html = html.replace(/<\/li>/ig, "\n");
+    html = html.replace(/<li>/ig, "  *  ");
+    html = html.replace(/<\/ul>/ig, "\n");
+    html = html.replace(/<\/p>/ig, "\n");
+    html = html.replace(/<br\s*[\/]?>/gi, "\n");
+    html = html.replace(/<[^>]+>/ig, "");
+    return html;
+  }
+
+  function getAllCombinations(keywords) {
+    var i, j, result = [];
+
+    for (i = 0; i < keywords.length; i++) {
+        for (j = i + 1; j < keywords.length + 1; j++) {
+            result.push(keywords.slice(i, j).join(" "));
+        }
+    }
+    return result;
+  }
+
+  $.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: $("link", this).attr("href")
+        };
+      }).get();
+
+      var $input = document.getElementById(searchId);
+      if (!$input) { return; }
+      var $resultContent = document.getElementById(contentId);
+
+      $input.addEventListener("input", function(){
+        var resultList = [];
+        var keywords = getAllCombinations(this.value.trim().toLowerCase().split(" "))
+          .sort(function(a,b) { return b.split(" ").length - a.split(" ").length; });
+        $resultContent.innerHTML = "";
+        if (this.value.trim().length <= 0) {
+          return;
+        }
+        // perform local searching
+        datas.forEach(function(data) {
+          var matches = 0;
+          if (!data.title || data.title.trim() === "") {
+            return;
+          }
+          if (filter && !data.url.includes(filter)) {
+            return;
+          }
+          var dataTitle = data.title.trim().toLowerCase();
+          var dataTitleLowerCase = dataTitle.toLowerCase();
+          var dataContent = stripHtml(data.content.trim());
+          var dataContentLowerCase = dataContent.toLowerCase();
+          var dataUrl = data.url;
+          var indexTitle = -1;
+          var indexContent = -1;
+          var firstOccur = -1;
+          // only match artiles with not empty contents
+          if (dataContent !== "") {
+            keywords.forEach(function(keyword) {
+              indexTitle = dataTitleLowerCase.indexOf(keyword);
+              indexContent = dataContentLowerCase.indexOf(keyword);
+
+              if( indexTitle >= 0 || indexContent >= 0 ){
+                matches += 1;
+                if (indexContent < 0) {
+                  indexContent = 0;
+                }
+                if (firstOccur < 0) {
+                  firstOccur = indexContent;
+                }
+              }
+            });
+          }
+          // show search results
+          if (matches > 0) {
+            var searchResult = {};
+            searchResult.rank = matches;
+            searchResult.str = "<li><a href='"+ dataUrl +"'><span class='search-result-title'>"+ dataTitle +"</span>";
+            if (firstOccur >= 0) {
+              // cut out 100 characters
+              var start = firstOccur - 20;
+              var end = firstOccur + 80;
+
+              if(start < 0){
+                start = 0;
+              }
+
+              if(start == 0){
+                end = 100;
+              }
+
+              if(end > dataContent.length){
+                end = dataContent.length;
+              }
+
+              var matchContent = dataContent.substring(start, end);
+
+              // highlight all keywords
+              var regS = new RegExp(keywords.join("|"), "gi");
+              matchContent = matchContent.replace(regS, function(keyword) {
+                return "<span class=\"search-keyword\">"+keyword+"</span>";
+              });
+
+              searchResult.str += "<p class=\"search-result-content\">" + matchContent +"...</p>";
+            }
+            searchResult.str += "</a></li>";
+            resultList.push(searchResult);
+          }
+        });
+        if (resultList.length) {
+          resultList.sort(function(a, b) {
+              return b.rank - a.rank;
+          });
+          var result ="<ul class=\"search-result-list\">";
+          for (var i = 0; i < resultList.length; i++) {
+            result += resultList[i].str;
+          }
+          result += "</ul>";
+          $resultContent.innerHTML = result;
+        }
+      });
+    }
+  });
+};