Astro-Pagefind

Astro集成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获取完整示例。