astro pagefind

Astro-Pencarian Halaman

Integrasi Astro untuk pencarian situs statis Pagefind.

Fitur

• Bangun indeks pencarian halaman berdasarkan build statis
• Sajikan indeks pencarian bawaan sebelumnya dalam mode astro dev
• Cari komponen Astro
• Mendukung jalur URL dasar yang disesuaikan
• Mendukung banyak contoh komponen pada satu halaman
• Mendukung permintaan pencarian yang telah diisi sebelumnya
• Mendukung transisi tampilan Astro

Penggunaan

Memasang:

npm i astro-pagefind

Tambahkan integrasi ke konfigurasi Astro:

 //astro.config.ts

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

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

Tambahkan komponen pencarian pada halaman:

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

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

Lihat Main.layout untuk contoh penggunaan.

Kueri Penelusuran yang telah diisi sebelumnya

Dalam mode SSR Astro menyediakan akses ke parameter kueri URL yang dapat digunakan untuk mengisi kueri penelusuran terlebih dahulu melalui prop:

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

export const prerender = false ;

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

< Search query = { q } />

Lihat prefilled.astro untuk contoh lengkap.