meilisearch docsearch

meilisearch-docsearch

องค์ประกอบการค้นหาอย่างรวดเร็วสำหรับ meilisearch ซึ่งได้รับแรงบันดาลใจจาก algolia/docsearch

ภาพหน้าจอ

แสงสว่าง	มืด

การใช้งานผ่าน NPM (แนะนำ)

การติดตั้ง

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

จาวาสคริปต์

ในการเริ่มต้น คุณต้องมีคอนเทนเนอร์สำหรับคอมโพเนนต์ DocSearch ของคุณเพื่อเข้าไป หากคุณยังไม่มี คุณสามารถแทรกคอนเทนเนอร์ลงในมาร์กอัปของคุณได้:

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

จากนั้น แทรก DocSearch ลงไปโดยการเรียกใช้ฟังก์ชัน docsearch และจัดเตรียมคอนเทนเนอร์ อาจเป็นตัวเลือก CSS หรือองค์ประกอบก็ได้

ตรวจสอบให้แน่ใจว่าได้จัดเตรียม container (เช่น div ) ไม่ใช่ input 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

แพคเกจนี้ยังมีชุดเบราว์เซอร์และสไตล์ที่จำเป็นที่สามารถดึงผ่าน CDN เช่น unpkg.com:

1. เพิ่มภาชนะ

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

2. นำเข้าบันเดิล js borwser และเริ่มต้นส่วนประกอบ

    < 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 >

   หรือคุณสามารถนำเข้าโมดูล ESM ได้เมื่อใช้ <script type="module">

    < 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 หากมี