meilisearch docsearch

meilisearch-docsearch

algolia/docsearch에서 영감을 받은 meilisearch의 빠른 검색 구성 요소입니다.

스크린샷

빛	어두운

NPM을 통한 활용(권장)

설치

yarn add meilisearch-docsearch
# or
npm install meilisearch-docsearch
# or
pnpm add meilisearch-docsearch

자바스크립트

시작하려면 DocSearch 구성 요소를 넣을 컨테이너가 필요합니다. 아직 컨테이너가 없으면 마크업에 삽입할 수 있습니다.

 < div id =" docsearch " > </ div >

그런 다음 docsearch 함수를 호출하고 컨테이너를 제공하여 DocSearch 여기에 삽입합니다. CSS 선택자 또는 요소일 수 있습니다.

input 아닌 container (예: div )를 제공해야 합니다. DocSearch 완전히 액세스 가능한 검색 상자를 생성합니다.

 import { docsearch } from "meilisearch-docsearch" ;
import "meilisearch-docsearch/css" ;

docsearch ( {
  container : "#docsearch" ,
  host : "YOUR_HOST_URL" ,
  apiKey : "YOUR_SEARCH_API_KEY" ,
  indexUid : "YOUR_INDEX_UID" ,
} ) ;

스타일링

모든 스타일은 다음과 같이 패키지에 포함됩니다.

• 하나의 큰 파일:

  •  import "meilisearch-docsearch/css" ;

• 개별 작은 파일:

  •  import "meilisearch-docsearch/css/variables" ; 

  •  import "meilisearch-docsearch/css/button" ; 

  •  import "meilisearch-docsearch/css/modal" ; 

솔리드JS

solid-js 사용하는 경우 완전히 액세스 가능한 검색 상자를 생성하는 DocSearch 구성 요소를 직접 가져올 수 있습니다.

 import { DocSearch } from "meilisearch-docsearch/solid" ;
import "meilisearch-docsearch/css" ;

function App ( ) {
  return (
    < DocSearch
      host = "YOUR_HOST_URL"
      apiKey = "YOUR_SEARCH_API_KEY"
      indexUid = "YOUR_INDEX_UID"
    / >
  ) ;
}

export default App ;

CDN을 통한 사용

패키지에는 브라우저 번들과 unpkg.com과 같은 CDN을 통해 가져올 수 있는 필수 스타일도 포함되어 있습니다.

1. 컨테이너를 추가하다

    < div id =" docsearch " > </ div >

2. js 브라우저 번들을 가져오고 구성 요소를 초기화합니다.

    < script src =" https://unpkg.com/meilisearch-docsearch@latest/dist/index.global.js " > </ script >
   < script >
     const { docsearch } = window . __docsearch_meilisearch__ ;
     docsearch ( {
       container : "#docsearch" ,
       host : "YOUR_HOST_URL" ,
       apiKey : "YOUR_SEARCH_API_KEY" ,
       indexUid : "YOUR_INDEX_UID" ,
     } ) ;
   </ script >

   또는 <script type="module"> 사용할 때 ESM 모듈을 가져올 수 있습니다.

    < script type =" module " async >
     import { docsearch } from "https://unpkg.com/meilisearch-docsearch@latest/dist/index.bundled.esm.js" ;
     docsearch ( {
       container : "#docsearch" ,
       host : "YOUR_HOST_URL" ,
       apiKey : "YOUR_SEARCH_API_KEY" ,
       indexUid : "YOUR_INDEX_UID" ,
     } ) ;
   </ script >

3. 가져오기 스타일

    < link
     rel =" stylesheet "
     href =" https://unpkg.com/meilisearch-docsearch@latest/dist/index.css "
   />

승인

이 프로젝트는 algolia/docsearch 및 meilisearch/docs-searchbar.js 에서 영감을 받았습니다.

특허

해당되는 경우 MIT 또는 MIT/Apache 2.0.