Hexo 添加 本地搜索

使用 hexo-generator-searchdb 插件为 Hexo 添加一个本地站内搜索,效果可见 /search

Install

  1. 在 Shell 中进入 Hexo 目录,执行 npm install hexo-generator-searchdb --save 命令安装 hexo-generator-searchdb 插件。
  2. 在主题目录中的 source/js 目录中新建 search.js 文件。
// A local search script with the help of [hexo-generator-search](https://github.com/PaicHyperionDev/hexo-generator-search)
// Copyright (C) 2017
// Liam Huang <http://github.com/Liam0205>
// 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
//

var searchFunc = function (path, search_id, content_id) {
    // 0x00. environment initialization
    'use strict';
    var BTN = "<i id='local-search-close'>×</i>";
    var $input = document.getElementById(search_id);
    var $resultContent = document.getElementById(content_id);
    $resultContent.innerHTML = BTN + "<ul><span class='local-search-empty'>正在载入索引文件,请稍后...<span></ul>";
    $.ajax({
      // 0x01. load xml file
      url: path,
      dataType: "xml",
      success: function (xmlResponse) {
        // 0x02. parse xml file
        var datas = $("entry", xmlResponse).map(function () {
          return {
            title: $("title", this).text(),
            content: $("content", this).text(),
            url: $("url", this).text()
          };
        }).get();
        $resultContent.innerHTML = "";

        $input.addEventListener('input', function () {
          // 0x03. parse query to keywords list
          var str = '<ul class=\"search-result-list\">';
          var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
          $resultContent.innerHTML = "";
          if (this.value.trim().length <= 0) {
            return;
          }
          // 0x04. perform local searching
          datas.forEach(function (data) {
            var isMatch = true;
            var content_index = [];
            if (!data.title || data.title.trim() === '') {
              data.title = "Untitled";
            }
            var orig_data_title = data.title.trim();
            var data_title = orig_data_title.toLowerCase();
            var orig_data_content = data.content.trim().replace(/<[^>]+>/g, "");
            var data_content = orig_data_content.toLowerCase();
            var data_url = data.url;
            var index_title = -1;
            var index_content = -1;
            var first_occur = -1;
            // only match artiles with not empty contents
            if (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;
                  }
                  // content_index.push({index_content:index_content, keyword_len:keyword_len});
                }
              });
            } else {
              isMatch = false;
            }
            // 0x05. show search results
            if (isMatch) {
              str += "<li><a href='" + data_url + "' class='search-result-title' target='_blank'>" + orig_data_title + "</a>";
              var content = orig_data_content;
              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>";
          if (str.indexOf('<li>') === -1) {
            return $resultContent.innerHTML = BTN + "<ul><span class='local-search-empty'>没有找到内容,请尝试搜索其他...<span></ul>";
          }
          $resultContent.innerHTML = BTN + str;
        });
      }
    });
    $(document).on('click', '#local-search-close', function() {
      $('#local-search-input').val('');
      $('#local-search-result').html('');
    });
  }

  var getSearchFile = function(){
      var path = "/search.xml";
      searchFunc(path, 'local-search-input', 'local-search-result');
  }
  1. 使用 Hexo 命令创建一个搜索页面, hexo new page search
---
title: Search
date:
comments: false
---
  <form class="site-search-form">
    <input type="text" id="local-search-input" class="st-search-input" placeholder="输入搜索内容..."/>
  </form>

  <div id="local-search-result" class="local-search-result-cls"></div>

<script type="text/javascript" id="local.search.active">
var inputArea       = document.querySelector("#local-search-input");
inputArea.onclick   = function(){ getSearchFile(); this.onclick = null }
inputArea.onkeydown = function(){ if(event.keyCode == 13) return false }
</script>
  1. 引入 search.js,编辑主题目录下的 layout/_partial 目录中的 head.ejs 文件。
<script src="/js/search.js"></script>

Configure

  1. 编辑 Hexo 目录中的 _config.yml 配置文件。
# Local search
## https://www.npmjs.com/package/hexo-generator-searchdb
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  content: true
  1. 编辑主题目录中的 _config.yml 配置文件。
# Local search
local_search:
  enable: true
  1. 添加搜索页面到导航,编辑主题目录中的 _config.yml 配置文件。
menu:
  回到首页: /
  站内搜索: /search

文章作者: REPL\ acgio
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 REPL\ acgio !
 上一篇
Intel NUC 做一个 NAS Intel NUC 做一个 NAS
以下示例中,Intel NUC 地址为 192.168.1.100,代理地址为 192.168.1.99:8080,用户名为 gosicks 安装 Ubuntu Server 18.04 LTS下载安装 Ubuntu 18.04 LT
2019-10-01
下一篇 
Alfred and iTerm2 Alfred and iTerm2
Alfred and iTerm2将 Alfred 中的默认 Terminal 更换为 iTerm21. 拷贝 Applescript 脚本Alfred version: 3.1.1curl —silent ‘https://raw.g
2019-09-04
  目录