astro pagefind

Astro-Pagefind

การบูรณาการ Astro สำหรับการค้นหาไซต์แบบคงที่ Pagefind

คุณสมบัติ

• สร้างดัชนี pagefind ตามการสร้างแบบคงที่
• ให้บริการดัชนีการค้นหาที่สร้างไว้ล่วงหน้าในโหมด astro dev
• ค้นหาองค์ประกอบ Astro
• รองรับเส้นทาง URL ฐานที่กำหนดเอง
• รองรับหลายอินสแตนซ์ของส่วนประกอบบนเพจ
• รองรับคำค้นหาที่กรอกไว้ล่วงหน้า
• รองรับการเปลี่ยนมุมมอง Astro

การใช้งาน

ติดตั้ง:

npm i astro-pagefind

เพิ่มการรวมเข้ากับการกำหนดค่า Astro:

 //astro.config.ts

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

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

เพิ่มองค์ประกอบการค้นหาบนหน้า:

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

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

ดู Main.layout สำหรับตัวอย่างการใช้งาน

คำค้นหาที่กรอกไว้ล่วงหน้า

ในโหมด SSR Astro ให้การเข้าถึงพารามิเตอร์การสืบค้น URL ซึ่งสามารถใช้เพื่อกรอกคำค้นหาล่วงหน้าผ่านเสา:

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

export const prerender = false ;

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

< Search query = { q } />

ดู prefilled.astro สำหรับตัวอย่างแบบเต็ม