Pagefind

Pagefind 是什么

pagefind 是一个 “静态搜索索引生成器”。

它的核心思想是： 测试测试测试测试

1. 不是一个实时服务：不像数据库那样，随时查询它就随时给你结果。
2. 在“构建时”工作：它的工作发生在运行 npm run build 命令之后。
3. 工作流程：
   • 在 Astro 把整个网站编译成一堆静态的 HTML 文件并放入 dist 文件夹后，astro-pagefind 插件会自动调用 Pagefind。
   • Pagefind 会扫描 dist 文件夹里所有 HTML 文件的内容，像搜索引擎的爬虫一样。
   • 然后，它会根据这些内容，创建一个高度优化的、小巧的搜索索引文件，并也存放在 dist 文件夹里（通常是 dist/pagefind/）。
   • 同时，它会自动在 HTML 页面中注入一个客户端 JavaScript 脚本 (pagefind.js)。

​ 当用户在网站上使用搜索框时，实际发生的是：那个被注入的 pagefind.js 脚本会去加载搜索索引文件，然后在用户的浏览器里本地、快速地完成搜索。

结论： Pagefind 实现了一个完全静态化的、不需要服务器后端的全站搜索功能，这与 Astro 的理念完美契合。

工作原理

两步走战略：

1. 第一步：构建时的“索引器” - 在服务器端运行
   • 做什么： 当在终端运行 npm run build 或 pnpm run build 时，astro-pagefind 这个集成插件会被激活。它会像一个图书管理员一样，扫描网站构建后生成的所有静态HTML文件，提取其中的标题、正文等内容，并为它们创建一个高度优化的搜索索引（类似一本书的目录）。
   • 触发者： astro.config.mjs 里的 pagefind() 配置。
   • 产物： 在最终的 dist 输出文件夹里，会生成一个 /pagefind 目录，里面存放着索引文件和前端搜索脚本。
   • 验证操作： 在 astro.config.mjs 和 package.json 中找到的配置，都是为了正确执行这一步。
2. 第二步：运行时的“搜索UI” - 在用户的浏览器中运行
   • 做什么： 为了让用户能在页面上真正地进行搜索，astro-pagefind 插件会自动向您网站的每个页面的 HTML 中注入一个
   • 这个脚本（通常是 /pagefind/pagefind-ui.js）被浏览器加载后，会在 window 对象上创建一个名为 pagefind 的全局对象。
   • 触发者： 浏览器加载 HTML 页面。
   • 产物： 浏览器拥有了 pagefind 这个JavaScript对象，SearchBar.svelte 组件中的代码 await pagefind.search(keyword) 才能找到它并成功调用。

启动方式

1. 构建生产环境

   pnpm run build

2. 启动预览

   pnpm preview