astro pagefind

Astro-Seitensuche

Astro-Integration für die statische Site-Suche von Pagefind.

Merkmale

• Erstellen Sie einen Pagefind-Index nach statischem Build
• Bereitstellen eines zuvor vorgefertigten Suchindex im astro dev -Modus
• Astro-Komponente suchen
• Unterstützt benutzerdefinierten Basis-URL-Pfad
• Unterstützt mehrere Instanzen der Komponente auf einer Seite
• Unterstützt vorab ausgefüllte Suchanfragen
• Unterstützt Astro-Ansichtsübergänge

Verwendung

Installieren:

npm i astro-pagefind

Integration zur Astro-Konfiguration hinzufügen:

 //astro.config.ts

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

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

Suchkomponente auf einer Seite hinzufügen:

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

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

Ein Anwendungsbeispiel finden Sie unter Main.layout.

Vorab ausgefüllte Suchanfrage

Im SSR-Modus bietet Astro Zugriff auf URL-Abfrageparameter, die zum Vorabfüllen einer Suchanfrage über eine Requisite verwendet werden können:

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

export const prerender = false ;

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

< Search query = { q } />

Ein vollständiges Beispiel finden Sie unter prefilled.astro.