Pagefind 搜索库

关于 Pagefind

Pagefind 是一个开源的静态站点搜索库，专为静态网站设计。它可以轻松地集成到各种静态网站生成器（如 Hugo、Jekyll、Eleventy 等）中，为用户提供快速且高效的搜索体验。Pagefind还提供了一个默认的用户界面，无需配置即可使用。

Pagefind 的主要特点包括：

• 支持多语言网站
• 丰富的知识过滤引擎
• 自定义排序属性
• 自定义元数据追踪
• 自定义内容权重
• 返回页面部分结果
• 跨域搜索
• 为任何东西添加索引
• 占有较少的带宽

构建索引

Pagefind 通常在静态站点生成后运行，摄取静态HTML文件并创建静态搜索索引。通过 npx 命令可以轻松地安装 Pagefind 并完成索引的构建。

1npx pagefind --site "public"

Note

“public” 是 Hugo 生成的静态网站的文件根目录，确保在运行此命令前已经执行了 hugo server 命令生成了站点。
执行上述命令后，Pagefind 会在 public/pagefind 目录下生成索引文件。

添加 Pagefind UI

在合适的 html 文件中添加搜索 UI， 通过下面3个步骤便可完成。

1. 导入 Pagefind 索引文件夹中的 CSS 和 JavaScript 文件。
2. 在需要展示搜索功能的页面中添加一个占位元素。
3. 在页面底部添加 JavaScript 代码来初始化 Pagefind UI。

 1<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
 2<script src="/pagefind/pagefind-ui.js"></script>
 3
 4<div id="search"></div>
 5
 6<script>
 7    window.addEventListener('DOMContentLoaded', (event) => {
 8        new PagefindUI({ element: "#search" });
 9    });
10</script>

部署到 Netlify

1. 打开 Netlify网站，登录后找到 Hugo 项目。
2. 在该项目的详情页面左侧菜单点击 Project configuration, 找到 Build & deploy 选项并点击。
3. 在内容列表找到 Build Setting，点击 Configure 按钮进入编辑模式。
4. 在 Build command 输入框内追加 ; npx pagefind --site "public" 命令。
5. 完成后点击 Save 按钮进行保存。
6. 接下来便可部署该项目。
7. 部署成功后验证你的网站是否应用了 Pagefind 的搜索功能。