搜索 UI

Pagefind 提供官方 Component UI，可以快速添加弹窗搜索或下拉搜索框。它适合没有复杂设计系统的小型文档站，也适合先验证搜索效果。

使用脚本标签

先构建站点并运行 Pagefind。默认输出目录是 /pagefind/；如果站点本身已有 /pagefind/ 教程路由，可以把搜索资产输出到 /_pagefind/。然后在页面中引入：

<link href="/_pagefind/pagefind-component-ui.css" rel="stylesheet">
<script src="/_pagefind/pagefind-component-ui.js" type="module"></script>

弹窗搜索

弹窗搜索适合放在导航栏按钮附近：

<pagefind-modal-trigger></pagefind-modal-trigger>
<pagefind-modal></pagefind-modal>

它会提供一个可打开的搜索体验，适合绝大多数内容站点。

下拉搜索框

如果想把搜索框直接放在页面或导航栏中，可以使用：

<pagefind-searchbox></pagefind-searchbox>

这种方式更像常见文档站的顶部搜索框，用户输入后直接看到结果下拉列表。

使用 npm 包

在前端项目中，也可以通过包引入：

npm install @pagefind/component-ui

import "@pagefind/component-ui";
import "@pagefind/component-ui/css";

然后在模板里使用对应 Web Component。

什么时候不用官方 UI

如果站点已经有统一的弹窗、快捷键、无障碍焦点管理或结果卡片样式，可以使用 Pagefind JavaScript API 自己渲染结果。官方 UI 更适合快速落地，自定义 API 更适合深度融入现有产品体验。