Hexo 添加站内静态搜索（全站搜索）功能

发表于 更新于 阅读次数： 评论数： 本文字数： 1.9k 阅读时长 ≈ 2 分钟

前言

网上各种 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-tipue-search-db 插件主要用来生成搜索引擎需要的 JS 数据文件（tipuesearch_content.js），默认存放的文件路径为： ${blog_root}/public/tipuesearch/tipuesearch_content.js，该插件兼容 Tipue Search 7.1 +。

1
2
3
4
5
# 进入博客的根目录
$ cd ${blog_root}

# 安装Hexo插件
$ npm install hexo-tipue-search-db --save

插件配置

1
2
3
tipue_search_db:
  exclude_page: false   # Default posts and pages are included in generated db file, you can exclude pages by value true
  path: '/tipuesearch/tipuesearch_content.js'   # Custom db file path, base on directory '${blog_root}/public'

Tipue Search 配置

值得一提的是，下面介绍的配置内容原则上适用于任何 Hexo 主题，只是个别配置细节不同而已，笔者已验证过可以适用于 Yilia 与 NexT 8.x 主题。

Tipue Search 下载

本教程使用 Tipue Search 7.1，从本站下载 Tipue Search 7.1 的压缩包并解压。以 Yilia 主题为例子，将解压后得到的 tipuesearch 文件夹复制到 Yilia 主题的 ${theme_dir}/source 目录下。若使用的 Hexo 主题是 NexT 8.x，则将解压后得到的 tipuesearch 文件夹复制到 NexT 主题的 ${theme_dir}/source/lib 目录下。

添加 HTML 代码到 HEAD 标签内

将以下代码添加到 Hexo 主题的模板文件中的 HEAD 标签内，以 Yilia 主题为例子，模板文件的路径可参考：${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>

添加搜索框到指定的 Web 页面

在需要使用搜索框的任意 UI 模板（Web 页面）中添加以下代码，样式可以根据自己的需求高度自定义

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>

或者添加到 Hexo 新建的搜索页面中

1
2
# 通过Hexo的命令新增搜索页面
$ 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 的特性

  • 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+ 等现代浏览器

最终搜索效果图

参考资料