meilisearch docsearch

meilisearch-docsearch

algolia/docsearch からインスピレーションを得た、meilisearch のクイック検索コンポーネント。

スクリーンショット

ライト	暗い

NPM 経由での使用 (推奨)

インストール

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

JavaScript

開始するには、 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" ,
} ) ;

スタイリング

すべてのスタイルは次のようにパッケージに含まれています。

• 1 つの大きなファイル:

  •  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 ブラウザバンドルをインポートし、コンポーネントを初期化します。

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