Clay

用进废退 | 工字不出头

  • 主页
  • 归档
  • 随笔
  • 搜索
所有文章

Clay

用进废退 | 工字不出头

  • 主页
  • 归档
  • 随笔

Hexo 添加站内静态搜索插件

发表于:2020-01-09
字数统计:1.3k
阅读量统计:

前言

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

搜索效果图

  • Tipue Search Preview

参考资料

  • Tipue Search
  • Hexo-Tipue-Search-Json
  • 分享几个实用的 HEXO 博客功能插件
本文作者: Clay
发布时间: 2020-01-09 21:42:00
本文链接: https://www.techgrow.cn/posts/47b23c66.html
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!
赏

谢谢你的支持

支付宝
微信
  • 前端

扫一扫,分享到微信

微信分享二维码
Nacos 入门教程 - 服务发现基础篇
Nacos 入门教程 - 配置管理高级篇
© 2021 Clay
本站总访问量  人次
载入天数...载入时分秒...
粤ICP备19024664号
  • 所有文章

显示标签:

  • AI
  • C/C++
  • CI/CD
  • CentOS
  • Centos
  • Docker
  • HarmonyOS
  • Java
  • Linux
  • Manjaro
  • Python
  • Web服务器
  • 企业面试
  • 分布式
  • 前端
  • 区块链
  • 开发工具
  • 开源
  • 微服务
  • 数据库
  • 架构
  • 树莓派
  • 爬虫
  • 版本控制
  • 知识图谱
  • 算法与数据结构
  • 缓存
  • 网络攻防
  • 随笔

    [^_^] 出错啦!请重新刷新页面!