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（如果适用）。