astro pagefind

Astro-Pagefind

Intégration Astro pour la recherche de site statique Pagefind.

Caractéristiques

• Créer un index de recherche de page lors d'une construction statique
• Servir un index de recherche précédemment prédéfini en mode astro dev
• Rechercher un composant Astro
• Prend en charge le chemin d'URL de base personnalisé
• Prend en charge plusieurs instances du composant sur une page
• Prend en charge les requêtes de recherche pré-remplies
• Prend en charge les transitions de vue Astro

Usage

Installer:

npm i astro-pagefind

Ajoutez l'intégration à la configuration Astro :

 //astro.config.ts

import { defineConfig } from "astro/config" ;
import pagefind from "astro-pagefind" ;

export default defineConfig ( {
  build : {
    format : "file" ,
  } ,
  integrations : [ pagefind ( ) ] ,
} ) ;

Ajouter un composant de recherche sur une page :

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

< Search id = " search " className = " pagefind-ui " uiOptions = { { showImages: false } } />

Voir Main.layout pour un exemple d'utilisation.

Requête de recherche pré-remplie

En mode SSR, Astro donne accès aux paramètres de requête URL qui peuvent être utilisés pour pré-remplir la requête de recherche via un accessoire :

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

export const prerender = false ;

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

< Search query = { q } />

Voir prefilled.astro pour un exemple complet.