访问官网
GithubAstro-Pagefind
特性
- 静态构建时生成pagefind索引
- 在
astro dev模式下提供预先构建的搜索索引 - Astro搜索组件
- 支持自定义基础URL路径
- 支持在一个页面上使用多个组件实例
- 支持预填充搜索查询
- 支持Astro视图转换
使用方法
安装：
npm i astro-pagefind
在Astro配置中添加集成：
//astro.config.ts
import { defineConfig } from "astro/config";
import pagefind from "astro-pagefind";
export default defineConfig({
build: {
format: "file",
},
integrations: [pagefind()],
});
在页面中添加搜索组件：
---
import Search from "astro-pagefind/components/Search";
---
<Search id="search" className="pagefind-ui" uiOptions={{ showImages: false }} />
查看Main.layout获取使用示例。
预填充搜索查询
在SSR模式下，Astro提供了访问URL查询参数的功能，可以通过prop预填充搜索查询：
---
import Search from "astro-pagefind/components/Search";
export const prerender = false;
const q = Astro.url.searchParams.get("q") ?? undefined;
---
<Search query={q} />
查看prefilled.astro获取完整示例。
