Hexo 添加站内静态搜索插件

发表于 阅读次数： 评论数： 本文字数： 1.6k 阅读时长 ≈ 1 分钟

前言

网上各种 Hexo 站内静态搜索方案，原理基本都是通过 Hexo 插件动态生成 JSON 数据文件，然后基于 JSON 数据文件，使用 JS 开发简单的搜索引擎，以此达到搜索目的。目前主流的方案是使用 NexT 主题集成的 hexo-generator-searchdb 插件，可惜该方案的 UI 界面和 JS 代码都耦合了 NexT 主题，对其他 Hexo 主题并不友好。由于笔者的博客使用的是 Yilia 主题，因此只能尝试其他替代方案，最终发现 Tipue Search 配合 hexo-tipue-search-db 实现的搜索效果挺不错。Tipue Search 是一款 JQuery 搜索插件，提供了基础的 UI 界面 和 JS 搜索引擎，只要浏览器支持 JQuery 就可以开箱即用，而且 UI 样式支持高度定制，非常适合对搜索界面有强自定义需求的使用场景。这里值得注意的是，上面介绍的站内静态搜索方案都存在共同的致命弱点，那就是当文章数量比较多的时候，Hexo 插件动态生成的数据文件的体积会很大（单位：MB），导致用户首次加载搜索界面时非常慢；而且由于浏览器缓存的缘故，不一定能够实时搜索到最新的文章内容。此时若想从根本上解决上述痛点，只能引入后端的搜索引擎技术，例如 Elasticsearch、Solr、Lucene 等，可这又违背了 Hexo 打造静态博客的初衷。附上本站 Tipue Search 的演示链接。

Hexo 插件安装

Hexo 插件主要用来生成搜索引擎需要的 JS 数据文件（tipuesearch_content.js），默认的文件路径为： ${blog_root}/tipuesearch/tipuesearch_content.js，该插件兼容 Tipue Search 7.1 +。

1
$ npm install hexo-tipue-search-db --save

Tipue Search 安装

本教程使用 Tipue Search 7.1，从官网或者 本站下载 Tipue Search 的压缩包并解压，将目录下里的 tipuesearch 文件夹复制到 Hexo 的主题目录：${theme_dir}/source

添加 Html 代码到 Head 标签内

将以下代码添加到 Hexo 主题的模板文件中的 Head 标签内，模板文件的路径可参考：${theme_dir}/layout/_partial/head.ejs

1
2
3
4
5
6
7
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>

<script src="tipuesearch/tipuesearch_content.js"></script>
<link rel="stylesheet" href="tipuesearch/tipuesearch.css">
<script src="tipuesearch/tipuesearch_set.js"></script>
<script src="tipuesearch/tipuesearch.min.js"></script>

添加搜索界面的 HTML 代码

在需要使用搜索框的任意 UI 模板中添加以下代码，或者添加到新建的搜索页面中，样式可以根据自己的需求自定义。

1
2
3
4
5
6
7
8
9
10
11
12
13
<form>
  <div class="tipue_search_group">
    <input type="text" name="q" id="tipue_search_input" pattern=".{3,}" title="At least 3 characters" autofocus="autofocus" required><button type="submit" class="tipue_search_button"><div class="tipue_search_icon">&#9906;</div></button>
  </div>
</form>

<div id="tipue_search_content"></div>

<script>
  $(document).ready(function() {
       $('#tipue_search_input').tipuesearch();
  });
</script>
1
2
# 新增搜索页面
$ hexo new page search

添加 HTML5 的自动补全功能

若希望 Tipue Search 的搜索框使用 HTML5 的自动补全功能，只需在 input 标签内添加 list 属性和在页面中添加 datalist 标签即可。提示： list 属性的值必须与 datalist 标签的 ID 值一致。

1
2
3
4
5
6
7
8
9
10
11
12
13
<form>
  <div class="tipue_search_group">
    <input type="text" name="q" id="tipue_search_input" pattern=".{3,}" title="At least 3 characters" list="search" autocomplete="off" autofocus="autofocus" required><button type="submit" class="tipue_search_button"><div class="tipue_search_icon">&#9906;</div></button>
  </div>
</form>

<datalist id="search">
  <option>jQuery</option>
  <option>Support</option>
  <option>Tipr</option>
  <option>Tipue</option>
  <option>Tipue Search</option>
</datalist>

Tipue Search 常用参数配置

Tipue Search 默认只支持搜索整个英文单词，若想支持中文搜索，必须设置参数： 'wholeWords': false

1
2
3
4
5
6
7
8
9
$('#tipue_search_input').tipuesearch({
        'show': 10,              // 每页显示的最大搜索记录数，默认值：10
        'showURL': false,        // 是否将URL显示在每个搜索结果中，默认值：true
        'newWindow': true,       // 点击搜索结果时是否在新的浏览器选项卡中打开页面，默认值：false
        'footerPages': 10,       // 页脚中显示的最大页面选择数，默认值：3
        'minimumLength': 3,      // 搜索关键字中最小的字符长度，默认值：3
        'wholeWords': false,     // 是否不使用英语以外的其他语言，默认值：true
        'showTitleCount': false  // 是否将搜索结果的数量显示在浏览器选项卡的标题中，默认值：true
   });

注意事项

  • Tipue Search 7.1 依赖 JQuery-2.2.4，官方推荐使用 JQuery-3.x，实测使用低版本的 JQuery-1.11.0 也可以正常运行
  • Tipue Search 不同版本之间最本质的区别是：新版的数据文件是 JS 文件，旧版的数据文件是 JSON 文件，两者互不兼容
  • Tipue Search 7.1 默认的数据文件名为：tipuesearch_content.js，Tipue Search 旧版本的数据文件名则为：tipuesearch_content.json
  • Tipue Search 支持包括：Chrome 49+，Edge 16+， IE10+， Firefox 58+， Safari 11+， iOS Safari 10.3+， Chrome for Android 66+， Samsung Internet 4+ 等现代浏览器

搜索效果图

参考资料