astro pagefind

Astro寻页

Astro 集成用于 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。