Pagefind 是什么
Pagefind 是一个面向静态网站的全文搜索工具。它不要求你维护搜索服务器,也不要求在构建 Markdown 时生成索引,而是在站点 HTML 已经输出之后再运行。
典型流程如下:
Markdown / CMS / 数据源
↓
静态站点生成器输出 HTML
↓
Pagefind 扫描输出目录并生成 /pagefind/
↓
浏览器加载搜索包并完成查询
Pagefind 的核心价值是把搜索功能变成静态资产的一部分。只要你的托管平台能分发 HTML、CSS、JavaScript 和二进制索引文件,就可以运行搜索。
它解决的问题
很多静态站点一开始会使用浏览器内置搜索、第三方托管搜索或自己写 JSON 索引。页面数量变多后,这些方案会遇到几个问题:
- 全量 JSON 太大,首屏加载变慢。
- 自写分词和排名容易变得粗糙。
- 第三方搜索需要额外服务、爬虫或密钥。
- 构建系统里手写索引逻辑会越来越难维护。
Pagefind 会把索引拆成按需加载的静态文件,搜索时只加载必要的数据。结果详情也通过每条结果的 data() 方法按需取回,适合文档类站点的交互模式。
适用边界
Pagefind 适合:
- 页面主要由静态 HTML 组成。
- 搜索目标是站内文档、教程、博客或帮助中心。
- 构建流程可以在部署前运行一个额外命令。
- 搜索结果不需要按用户权限实时变化。
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、默认元数据、属性捕获和筛选查询设计,让搜索结果更有结构。
- 中文搜索配置 讲解 Pagefind 在中文站点中的语言识别、extended 版本、force language、中文分词特点和技术文档搜索建议。