Hexo 添加站内静态搜索插件

前言

网上各种 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+ 等现代浏览器

搜索效果图

参考资料