搜索博客与维基

技术/前端/搜索

Pagefind

在构建产物上再跑一遍,生成纯静态的全文检索索引,不联网、不用第三方服务。

1 分钟阅读别名:pagefind、全文搜索

Pagefind 是一个静态搜索工具。它不提供服务,只提供一个命令行程序:你把构建好的 HTML 目录丢给它,它扫描一遍,吐出一套索引文件和一个前端界面。

为什么不用第三方搜索

常见的做法是接 Algolia 之类的托管搜索。缺点有三个:

  1. 索引在别人服务器上,文章内容要上传。
  2. 有免费额度,超了就收费。
  3. 站点要联网才能搜。

Pagefind 三个都没有。索引就是 dist/pagefind/ 目录下的一堆文件,跟着站点一起部署。

怎么跑

构建脚本里串起来:

{
  "scripts": {
    "build": "astro build && pagefind --site dist"
  }
}

顺序不能反。必须等 astro build 把 HTML 生成完,Pagefind 才有东西可扫。

索引是怎么做出来的

扫描生成的 HTML,按块提取文本,写成分片的压缩索引。查询时浏览器只下载命中的那几片,所以站点很大也不会一次性拖下整个索引。

提取时会跳过一些明显的噪声:脚本、样式、导航里的重复文字。剩下的正文会按语言做分词,中文按字切分,英文按词切分。

在这个站里的接法

搜索框平时不加载脚本,用户点搜索按钮或按 Ctrl+K 才去拉 /pagefind/pagefind-ui.js,拉回来再挂载。没搜索过的访问者不会为这个功能付任何下载成本。

开发模式的限制

npm run dev 时没有 dist/,也就没有索引。此时点搜索会弹一句提示,告诉你需要先跑一次 npm run build。这不是 bug,是静态搜索的固有前提。

什么时候不适合

需要搜索实时更新的内容、需要跨站点联合搜索、需要按用户权限过滤结果的场景,静态索引都不合适。