astro pagefind

Astro-Pagefind

Integración de Astro para la búsqueda de sitios estáticos de Pagefind.

Características

• Crear un índice de búsqueda de páginas tras una compilación estática
• Servir índice de búsqueda previamente creado en modo astro dev
• Buscar componente Astro
• Admite ruta URL base personalizada
• Admite múltiples instancias del componente en una página
• Admite consultas de búsqueda precargadas
• Admite transiciones de vista Astro

Uso

Instalar:

npm i astro-pagefind

Agregue integración a la configuración de Astro:

 //astro.config.ts

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

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

Agregar componente de búsqueda en una página:

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

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

Consulte Main.layout para ver un ejemplo de uso.

Consulta de búsqueda precargada

En el modo SSR, Astro proporciona acceso a los parámetros de consulta de URL que se pueden usar para completar previamente la consulta de búsqueda a través de un accesorio:

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

export const prerender = false ;

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

< Search query = { q } />

Consulte prefilled.astro para ver un ejemplo completo.