Pagefind 教程
Pagefind 是一个为静态网站生成全文搜索索引的工具。它通常在站点构建完成后运行，读取输出目录中的 HTML 文件，并把搜索所需的静态资源写入站点目录。
与依赖服务端搜索接口的方案不同，Pagefind 的查询在浏览器中完成，适合文档站、博客、产品手册、课程站点和静态生成的内容网站。
适合什么场景
| 场景 | 说明 |
|---|---|
| 静态文档站 | 构建后扫描 HTML，部署时只需要托管静态文件 |
| 博客与教程站 | 支持按正文、标题、元数据搜索 |
| 多语言站点 | 可按页面 lang 识别语言，也可强制生成单一语言索引 |
| 自定义搜索框 | 可用官方组件，也可用 JavaScript API 接入现有 UI |
学习路线
- 阅读 Pagefind 是什么，理解它和传统搜索服务的区别。
- 通过 安装与运行 在构建后的站点上生成索引。
- 学习 索引范围控制 和 中文搜索配置，避免把导航、页脚或无关内容纳入结果。
- 根据项目需要选择 官方搜索 UI 或 JavaScript API。
- 用 元数据与筛选 丰富搜索结果和分类过滤。
- 最后参考 SSG 集成实践 与 常见问题排查 上线。
参考资料
相关内容
- Pagefind 是什么 介绍 Pagefind 的定位、工作流程、适用场景与限制，帮助你判断它是否适合文档站、博客和静态内容网站。
- 安装与运行 讲解如何通过 npx、pnpm、Python 包或二进制文件运行 Pagefind，并把它接入静态站点构建流程。
- 索引范围控制 讲解 data-pagefind-body、data-pagefind-ignore、root selector、include characters 等索引控...
- 搜索 UI 介绍 Pagefind Component UI 的引入方式、弹窗搜索、搜索框组件和样式定制思路，适合快速给静态站点增加搜索入口。
- JavaScript API 讲解如何通过 /_pagefind/pagefind.js 动态导入搜索 API，执行查询、按需加载结果、渲染标题、摘要和 URL。
- 元数据与筛选 介绍 data-pagefind-meta、data-pagefind-filter、默认元数据、属性捕获和筛选查询设计，让搜索结果更有结构。