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-tipue-search-db 插件主要用来生成搜索引擎需要的 JS 数据文件(tipuesearch_content.js
),默认存放的文件路径为: ${blog_root}/public/tipuesearch/tipuesearch_content.js
,该插件兼容 Tipue Search 7.1 +。
1 | # 进入博客的根目录 |