Hugo 的搜索逻辑

1

https://teaize.github.io/search/?keyword=%s

1. 核心技术栈

• Hugo (框架)：这是一个极速的静态网站生成器。该博客使用了名为 Hugo Theme Stack 的主题（由 CaiJimmy 开发），这是目前 Hugo 社区非常流行的一款卡片式主题。
• Fuse.js (搜索引擎)：这是一个轻量级的 JavaScript 模糊搜索库。它不需要后端服务器支持，非常适合静态网站。

2. 搜索原理：它是如何工作的？

由于静态网站没有数据库（如 MySQL），它的搜索通常是“客户端本地搜索”：

1. 索引生成 (Build Time)：当你（博客作者）运行 hugo 命令构建网站时，Hugo 会根据配置文件生成一个名为 index.json 的文件。这个文件包含了你所有文章的标题、内容摘要、标签和链接。
2. 数据获取 (Client Side)：当访问者在浏览器中点击搜索按钮时，浏览器会异步下载这个 index.json 文件（通常在首次打开搜索框时）。
3. 模糊匹配：当你在搜索框输入关键词时，Fuse.js 会在这个 JSON 数据中进行实时匹配。由于是模糊搜索，即使你拼错了一两个字母，它通常也能找到相关的文章。
4. 结果展示：搜索结果会即时显示在页面上，整个过程都在你的浏览器里完成，不需要请求服务器。

3. 为什么选择这种方式？

• 零成本：不需要搭建后端服务器或支付 Algolia 等第三方搜索服务的费用。
• 速度快：对于中小型博客，JSON 文件体积不大，搜索体验非常流畅。
• 易于部署：完全兼容 GitHub Pages 等静态托管平台。

客户端本地搜索的主要缺点是什么？随着文章增多，索引文件（index.json）会变大，增加首次加载的流量消耗。

4. 静态搜索的“天花板”

当文章达到几千篇时，index.json 可能会达到几 MB 甚至更大。这时候作者通常会采取以下优化：

1. 分片加载：只加载标题索引，不加载全文索引。
2. 切换方案：改用 Pagefind（只下载搜索结果相关的碎片文件）或者 Algolia（真正的云端搜索服务）。 目前该博客的量级，使用 Fuse.js 是非常丝滑的。

自定义搜索引擎

可以把这个博客集成到 Chrome 或 Edge 的地址栏中，实现“一键检索”：

1. 打开浏览器设置 -> 搜索引擎 -> 管理搜索引擎和网站搜索。
2. 在“网站搜索”里点击“添加”：
   • 搜索引擎：Teaize Blog
   • 快捷字：tz（或者任何你喜欢的简写）
   • 网址：https://teaize.github.io/search/?keyword=%s
3. 使用方法：以后你只需在浏览器地址栏输入 tz + 空格 + 关键词，敲回车就能直接看到搜索结果。

![[Pasted image 20251229165216.png]]

Anki 学习闭环

你平时在复习 Anki 卡片时，如果突然对某个知识点感到模糊，或者想看更多案例，手动去搜非常打断思路。

• 实现方式：在 Anki 卡片模板中加入“深度阅读”链接。
• 代码示例：

1

<a href="https://teaize.github.io/search/?keyword={{Tags}}">查看博主的工程笔记</a>

价值：复习时如果卡住了，一键跳转到博主的深度笔记中查缺补漏，形成“记忆 - 理解 - 应用”的闭环。