本文来自公众号：开发者码神 。 欢迎关注第一时间阅读精华文章。

什么是Pgefind

Paefind 是一个完全静态的搜索库，旨在在大型网站上表现出色，尽量减少用户带宽的使用，并且无需托管任何基础设施。

Pagefind 可以在 Hugo、Eleventy、Jekyll、Next、Astro、SvelteKit 或任何其他网站框架之后运行。安装过程始终相同：Pagefind 只需要包含您网站构建后的静态文件的文件夹，因此在大多数情况下无需配置即可开始使用。

索引完成后，Pagefind 会向您的构建文件添加一个静态搜索包，其中包含一个可以在网站任何位置使用的 JavaScript 搜索 API。Pagefind 还提供了一个预构建的用户界面，可以无需配置即可使用（您可以在此页面顶部看到预构建的用户界面）。

Pagefind 的目标是确保拥有成千上万页的网站可以在用户的浏览器中进行搜索，同时尽量减少带宽的使用。Pagefind 的搜索索引被分成多个片段，因此在浏览器中进行搜索时只需要加载搜索索引的一个小子集。Pagefind 可以在拥有 10,000 页的网站上进行全文搜索，总网络负载包括 Pagefind 库本身在内不超过 300kB。对于大多数网站而言，这个负载可能会更接近 100kB。

特点

• 零配置支持多语言网站
• 丰富的知识库过滤引擎
• 自定义排序属性
• 自定义元数据跟踪
• 自定义内容加权
• 返回页面部分的搜索结果
• 跨多个域名进行搜索
• 使用 NodeJS 索引库索引任何内容（如 PDF、JSON 文件或字幕）
• 所有功能均在相同低带宽占用的情况下可用

官方地址：pagefind.app/docs/instal…

安装

过 npx 运行（public是你静态文件生成的目录，注意一定要是静态，要不然文件不好索引）

npx pagefind --site "public"

Pagefind 通过 npm 发布一个包装器包，这是最简单的开始方式。该包将会为您的平台下载最新发布版本的正确二进制文件，并将其作为 npm 依赖运行。

可以通过传递版本标签来运行特定版本：

npx pagefind@latest --site "public"
npx pagefind@v0.2.0 --site "public"

通过 npx 运行 Pagefind 将会下载 pagefind_extended 发布版，其中包含专门支持中文和日文页面索引的功能。

执行完之后会自动在dist下生成索引文件。

Pagefind 在静态生成器之后运行，并将静态搜索包输出到生成的站点。使用 Pagefind，你不需要手动构建搜索索引——索引是从生成的站点自动生成的。

由于 Pagefind 在站点构建后进行索引，我们将稍微逆序操作，先添加搜索 UI——这样当我们进行索引时，它已经存在于构建后的站点上。

Pagefind 提供了一个开箱即用的预构建搜索 UI。将以下代码片段添加到您选择的页面：

<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div><script>window.addEventListener('DOMContentLoaded', (event) => {new PagefindUI({ element: "#search", showSubResults: true });
    });
</script>

Pagefind 将在我们索引站点时创建 /pagefind/pagefind-ui.css 和 /pagefind/pagefind-ui.js 资源。

这时候打开指定的页面，就会看到搜索款，搜索试试看就知道了~~~很方便。