# 搜索 UI

URL: https://caijiao.org/pagefind/tutorial-04-search-ui
Source: docs/pagefind/tutorial-04-search-ui.md
Description: 介绍 Pagefind Component UI 的引入方式、弹窗搜索、搜索框组件和样式定制思路，适合快速给静态站点增加搜索入口。

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

## 使用脚本标签

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

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

## 弹窗搜索

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

```html
<pagefind-modal-trigger></pagefind-modal-trigger>
<pagefind-modal></pagefind-modal>
```

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

## 下拉搜索框

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

```html
<pagefind-searchbox></pagefind-searchbox>
```

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

## 使用 npm 包

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

```bash
npm install @pagefind/component-ui
```

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

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

## 什么时候不用官方 UI

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