astro pagefind

Astro-페이지찾기

Pagefind 정적 사이트 검색을 위한 Astro 통합.

특징

• 정적 빌드 시 페이지 찾기 색인 구축
• 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는 prop을 통해 검색어를 미리 채우는 데 사용할 수 있는 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를 참조하세요.