meilisearch docsearch

meilisearch-文檔搜索

meilisearch 的快速搜尋元件，靈感來自 algolia/docsearch。

截圖

光	黑暗的

透過 NPM 使用（建議）

安裝

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

JavaScript

首先，您需要一個用於放入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" ; 

SolidJS

如果您使用的是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 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 >

   或者，您可以在使用<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（如果適用）。