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

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

تحتوي الحزمة أيضًا على حزمة متصفح والأنماط الضرورية التي يمكن سحبها من خلال CDN مثل unpkg.com:

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 >

   وبدلاً من ذلك، يمكنك استيراد وحدة 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 حيثما ينطبق ذلك.