为Hexo blog博客创建本地搜索引擎

刚开始使用github+hexo建立blog博客。参考了不少文章，发现大部分作者采用的主题为iissan 创建的 NexT。NexT 主题默认提供了两个站内搜索解决方案：swiftype 和 tinysou，所以大都比较好配置。
对于不想使用NexT主题，然而喜欢的主题又没有提供站内搜索方案的时候，可能就比较折腾了。有人不想使用swiftype 和 tinysou方法也可能是基于某些其他原因：

  • 不愿意受限于第三方服务：第三方服务随时可能完蛋，风险大受限多。原本建独立博客目的就是为了不受限，如此这般， swiftype 就是如此原因；
  • 第三方服务样式单一；
  • 第三方服务，需要应用第三方JS，存在安全问题；
    后经过大量搜索查询，发现目前Hexo已经有比较满意的解决方法了。

1. 基本思路

  • Step1： 生成索引文件；
  • Step2： 有效的算法：根据用户输入的检索词，返回包含检索词的文章列表；
  • Step3 ：使用 JavaScript 和 jQuery 来实现在浏览器中执行算法；
  • Step4 ：在页面的合适位置展示搜索框和输出结果；
  • Step5 ：美化。

2. 使用 hexo-generator-search 生成索引文件

这一步在网上大部分文章中都有提及，安装 hexo-generator-search 的生成器，在执行 hexo generate 的过程中，会按照配置生成一个 XML 文件，用于保存全站的文档数据。这个 XML 文件只是简单地做了数据的结构化存储，而完全没有考虑分词、倒排等问题。
安装 hexo-generator-search

1
npm install --save hexo-generator-search

在站点配置文件 _config.yml 当中写入如下配置，即可为全站的文档生成索引文件

1
2
3
search:
  path: search.xml
  field: post

hexo-generator-search 会为全站所有 post 类型的页面生成结构化的数据，并保存在本站的 /search.xml 当中。若想让 page 类型的页面也纳入索引，则可以将 field 的值修改为 all。

3. 使用 JavaScript 和 jQuery 实现检索算法

以 jQuery 的文本匹配为基础，在前端界面上运行站内搜索。文件在这里local_search.js。主要的处理流程是：

  • 载入 search.xml；
  • 解析 search.xml；
  • 解析检索词；
  • 在索引中进行字符串匹配；
  • 展现结果。

    search.js 依赖 jQuery。因此，你需要在引入 search.js 之前，引入 jQuery 的脚本。比如，你可以在 head 部分这样做：。

4. 在页面的合适位置展示搜索框和输出结果

1
2
3
4
<form class="site-search-form">
    <input type="text" id="local-search-input" class="st-search-input" />
</form>
<div id="local-search-result" class="local-search-result-cls"></div>

local-search-input 是一个输入框，用于接收用户输入的检索词；local-search-result 是用于展现搜索结果的 div 标签。这部分代码参考： hexo-search-plugin-snippets

5. 调用函数

现在，已经有了索引文件、搜索算法和搜索框。但是，现在而言，搜索框是孤立的：用户在搜索框中输入内容，并不会触发搜索算法。换而言之，搜索函数并没有调用。因此，我们需要调用定义在 search.js 当中定义的 searchFunc。

1
2
var path = "/search.xml";
searchFunc(path, 'local-search-input', 'local-search-result');

在网上找到了两位老师分享这种方法，但是您们没告诉小白要把这个东西写到哪儿才能起到调用的做用。解答如下：在你的layout文件中script最多的地方加入这么一句话：

1
<script type="text/javascript" src="/js/local_search.js"></script>

/js/local_search.js是你项目文件的地址。

6. 美化

Liam0205 提供 search.stylus 的样式。样式美化，每个人想法不一样，开心就好。

参考资料

发布于 
tags:
  • { github }
  • { hexo }
  • { blog }