astro pagefind

Astro-Pagefind

Integração Astro para pesquisa estática de sites Pagefind.

Características

• Construir índice pagefind em construção estática
• Servir índice de pesquisa pré-construído anteriormente no modo astro dev
• Componente Pesquisar Astro
• Suporta caminho de URL base personalizado
• Suporta múltiplas instâncias do componente em uma página
• Suporta consulta de pesquisa pré-preenchida
• Suporta transições de visualização Astro

Uso

Instalar:

npm i astro-pagefind

Adicione integração à configuração do Astro:

 //astro.config.ts

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

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

Adicionar componente de pesquisa em uma página:

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

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

Consulte Main.layout para obter um exemplo de uso.

Consulta de pesquisa pré-preenchida

No modo SSR, o Astro fornece acesso a parâmetros de consulta de URL que podem ser usados ​​para preencher previamente a consulta de pesquisa por meio de um suporte:

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

export const prerender = false ;

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

< Search query = { q } />

Veja prefilled.astro para um exemplo completo.