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.js | FlexSearch |
|---|---|---|
| 体量 | ~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 篇文档建议引入搜索服务器。