PaperMod 内置 Fuse.js 搜索:开箱即用、离线可用

当前项目的搜索功能完全由 PaperMod 主题内置实现,无需额外配置。构建时自动生成 index.json 搜索索引,浏览器端 Fuse.js 引擎做模糊匹配。

工作原理是什么?

整个搜索流程分两步:构建时生成索引 + 浏览器端实时匹配。

构建时:Hugo 生成 index.json

PaperMod 的 layouts/index.json 模板遍历 site.RegularPages,收集每篇文档的标题、正文、URL、摘要,序列化为 JSON 数组。Hugo 在构建时自动执行,产物为 public/index.json。

浏览器端:Fuse.js 模糊匹配

用户打开搜索页面,浏览器加载 index.json(3-10KB 级别),Fuse.js 做实时模糊匹配。支持中文字符、容错拼写(typo 容忍度可调)、关键词高亮。

Fuse.js vs FlexSearch

对比项Fuse.jsFlexSearch
体量~12KB gzip~8KB gzip
模糊匹配✅✅
中文支持✅✅
Web Worker❌(需手动)✅ 内置
增量索引❌✅
API 复杂度低中

当前项目用 Fuse.js,对于千篇文档完全够用。若后续文档规模超过 5000 篇可考虑切换 FlexSearch。

性能考虑

索引体积控制

默认索引全文(title + content + summary),千篇文档约 50-100KB。可在 hugo.toml 配置只索引标题和摘要来减小体积:

# 自定义 index.json 模板只索引必要字段

关键词高亮

PaperMod 的 fastsearch.js 内置高亮,搜索结果中的匹配关键词自动加 <mark> 标签,CSS 控制高亮样式。

FAQ

为什么选择纯前端搜索?

纯前端搜索无需后端服务、无需数据库、可离线使用,适合静态站点。Hugo 构建时生成 JSON 索引,浏览器端 JS 引擎匹配。

Fuse.js 和 FlexSearch 怎么选?

两者都是成熟的模糊搜索库。FlexSearch 性能更高(Web Worker、增量索引),Fuse.js API 更简洁。中小规模站点 Fuse.js 完全够用,PaperMod 内置 Fuse.js。

搜索索引文件太大怎么办?

可配置只索引标题和摘要(排除全文)、启用分段搜索(分页加载)、使用 Web Worker 避免阻塞主线程。超过 5000 篇文档建议引入搜索服务器。

相关文档:Hugo + PaperMod 快速上手、GEO 优化指南