astro pagefind

Astro-Pagefind

Pagefind 静的サイト検索のための Astro の統合。

特徴

• 静的ビルド時にページ検索インデックスを構築する
• 以前に事前に構築された検索インデックスを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 クエリ パラメーターへのアクセスを提供します。

 ---
import Search from " astro-pagefind/components/Search " ;

export const prerender = false ;

const q = Astro . url . searchParams . get ( " q " ) ?? undefined ;
---

< Search query = { q } />

完全な例については、prefilled.astro を参照してください。