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。