svelte algolia
v0.3.2
العرض المباشر
أداة مساعدة لتحديثات فهرس Algolia من جانب الخادم بالإضافة إلى مكون بحث من جانب العميل لتطبيقات Svelte. يضيف فقط تبعية واحدة:
algoliasearchalgoliasearch/lite (13 كيلوبايت). هناك 3 خطوات لإعداد svelte-algolia :
npm install --dev svelte-algolia قم بإنشاء كائن algoliaConfig :
import 'dotenv/config' // optional
async function loadPokedex ( ) {
const json = await import ( 'pokedex.json' )
return json . default . map ( ( el ) => ( { ... el , id : el . someUniqAttribute } ) )
}
const algoliaConfig = {
appId : process . env . VITE_ALGOLIA_APP_ID ,
// don't prefix admin key with VITE_ else it would get exposed to client-side code
apiKey : process . env . ALGOLIA_ADMIN_KEY ,
indices : [
{ name : `Pokedex` , getData : loadPokedex } ,
{ name : `Hitchhiker's Guide` , getData : guideLoader } ,
] ,
settings : {
attributesToHighlight : [ `name` ] ,
} ,
} من المتوقع أن تقوم وظيفة getData بإرجاع مجموعة من الكائنات التي تحتوي على البيانات التي ترغب في فهرستها (كتالوج المنتج أو منشورات المدونة أو صفحات التوثيق أو البوكيمونات أو أي شيء آخر). يجب أن يحتوي كل كائن في مصفوفة البيانات على مفتاح يسمى id أو _id أو objectID حتى تتمكن Algolia من التعرف عليه والكتابة فوق البيانات الموجودة حيثما كان ذلك مناسبًا.
ينطبق كائن الإعدادات على كافة المؤشرات. يمكنك أيضًا تمرير كائن إعدادات إلى كل فهرس على حدة مما يتجاوز الكائن العام.
قم بتمرير التكوين الخاص بك إلى indexAlgolia :
import { indexAlgolia } from 'svelte-algolia/server-side'
indexAlgolia ( algoliaConfig ) يمكنك استدعاء هذه الوظيفة أينما تريد تحديث الفهارس الخاصة بك، على سبيل المثال في svelte.config.js أو في src/hooks.ts (كما يفعل هذا الموقع التجريبي). عادةً، يمكنك تضمين هذا في كل إصدار إنتاجي لتطبيقك.
const defaultConfig = {
verbosity : 1 , // 0, 1 or 2 for no/some/lots of logging
partialUpdates : false , // if true, figures out diffs between existing
// items and new ones and only uploads changes, otherwise, completely
// overwrites each index on every call to indexAlgolia()
matchFields : [ ] , // (only used when partialUpdates is true) keys of fields to check
// for whether an item has changed; could e.g. be a timestamp, hash or an ID that's
// updated every time the item has changed; if not provided, items are checked for
// deep-equality to discover changes which can become slow for thousands of items
settings : { } , // an object of Algolia index settings that applies to all indices
// see https://algolia.com/doc/api-reference/settings-api-parameters for available options
// can be overridden for individual indices by passing a settings object as part of the indices array:
// indices = [{ name: `pokedex`, ..., settings: { foo: `bar` }}],
} لاستخدام هذه الحزمة كجزء من عملية البناء (على سبيل المثال، في تطبيق SvelteKit)، ما عليك سوى الاتصال indexAlgolia في تكوين البناء الخاص بك:
// svelte.config.js
// only update Algolia indices on production builds (saves API quota)
if ( process . env [ 'NODE_ENV' ] === `production` ) {
const { indexAlgolia } = await import ( `svelte-algolia/server-side` )
const algoliaConfig = {
// see above
}
indexAlgolia ( algoliaConfig )
} يحتاج <Search /> إلى معرف تطبيق Algolia ومفتاح البحث للوصول إلى مؤشرات البحث الخاصة به بالإضافة إلى التعيين من أسماء الفهرس إلى مكون Svelte المقابل الذي يجب أن يعرض نتائج البحث الواردة من هذا الفهرس. يتلقى كل مكون نتيجة كائن hit كدعم مع جميع السمات المخزنة في فهرس Algolia.
< script >
import Search from ' svelte-algolia '
import PokemonHit from ' $site/PokemonHit.svelte '
const appId = ' 0OJ5UL9OJX '
const searchKey = ' 63f563566cdd6de606e2bb0fdc291994 '
// in a real app you'd get your credentials like this:
const appId = import .meta.env.VITE_ALGOLIA_APP_ID
const searchKey = import .meta.env.VITE_ALGOLIA_SEARCH_KEY
</ script >
< header >
< nav >{ ... }</ nav >
< Search
{ appId }
{ searchKey }
indices ={{ Pokedex : PokemonHit }}
placeholder = " Search Pokedex " />
</ header > على سبيل المثال، يبدو مكون PokemonHit.svelte الموجود على الموقع التجريبي كما يلي:
< script >
export let hit
</ script >
< h2 >{ @html hit . name }</ h2 >
< div >
< ul >
< li >Type: { @html hit . type . join ( ` , ` )}</ li >
< li >Height: { @html hit . height }</ li >
< li >Weight: { @html hit . weight }</ li >
< li >Weaknesses: { @html hit . weaknesses . join ( ` , ` )}</ li >
</ ul >
< img src ={ hit . img } alt ={ hit . nameOrig } />
</ div >
< style >
/* highlights text matching the search string */
:global( em ) {
color : darkcyan ;
line-height : 1.2 em ;
border-radius : 3 pt ;
font-style : normal ;
}
div {
display : flex ;
justify-content : space-between ;
}
</ style > سيتم تغليف السلاسل الفرعية في السمات المطابقة لسلسلة البحث الحالية في <em> والتي تحتاج إلى عرض العلامة {@html ...} بشكل صحيح ولكن يمكن بعد ذلك تصميمها لتسليط الضوء على سبب تطابق نتيجة معينة مع سلسلة البحث الحالية. القيمة الأصلية (أي بدون علامات <em> ) لكل سمة مميزة متاحة hit.[attr]Orig . انظر hit.nameOrig أعلاه.
القائمة الكاملة للدعائم/المتغيرات القابلة للربط لهذا المكون:
appId: stringمعرف تطبيق ألجوليا
ariaLabel: string = `Search`يخبر التكنولوجيا المساعدة بكيفية الإعلان عن عنصر الإدخال للمستخدم.
hasFocus: boolean = falseمنطقية قابلة للربط تشير إلى ما إذا كان جزء إدخال النص أو النتائج قد تم التركيز عليه حاليًا.
indices: Record < string , typeof SvelteComponent > | [ string , typeof SvelteComponent ] [ ] يقوم الكائن بتعيين اسم كل فهرس يجب أن ينقر عليه مكون Search للعثور على نتائج البحث إلى مكون Svelte الذي يجب أن يعرض تلك النتائج.
input: HTMLInputElement | null = nullالتعامل مع عقدة DOM.
loadingMsg: string = `Searching...`سلسلة سيتم عرضها في جزء النتائج أثناء جلب نتائج البحث.
noResultMsg = ( query : string ) : string => `No results for ' ${ query } '`دالة تقوم بإرجاع السلسلة المراد عرضها عندما لا يُرجع البحث أي نتائج.
placeholder: string = `Search`يظهر العنصر النائب في إدخال النص قبل أن يبدأ المستخدم في الكتابة.
query: string = ``القيمة الحالية لعقدة DOM.
resultCounter = ( hits : SearchHit [ ] ) : string =>
hits . length > 0 ? `<span>Results: ${ hits . length } <span>` : ``دالة تقوم بإرجاع سلسلة سيتم عرضها بجوار اسم كل فهرس لإظهار عدد النتائج التي تم العثور عليها في هذا الفهرس. قم بإرجاع سلسلة فارغة لإظهار أي شيء.
searchKey: stringمفتاح واجهة برمجة التطبيقات للبحث فقط
يستمع Search.svelte إلى أحداث on:close في كل مكون نتيجة يعرضه وسيقوم بتعيين hasFocus على false لإغلاق نفسه عند استلامه. يمكنك استخدام هذا، على سبيل المثال، لإغلاق واجهة البحث عندما ينقر المستخدم على رابط في إحدى نتائج البحث وينتقل إلى صفحة مختلفة على موقعك:
< script >
import { createEventDispatcher } from ' svelte '
export let hit
const dispatch = createEventDispatcher ()
</ script >
< h3 >
< a href ={ hit . slug } on:click ={() => dispatch ( ` close ` )}>{ @html hit . title }</ a >
</ h3 >
< p >{ @html hit . body }</ p > كما أنه يصدر أيضًا حدث focus في كل مرة ينقر فيها المستخدم على أيقونة البحث ويدخل التركيز في إدخال النص.
< Search on:focus ={() => console . log ( " Let's search! " )} /> يقدم Search.svelte متغيرات CSS التالية المدرجة هنا مع إعداداتها الافتراضية (إن وجدت) والتي يمكن تمريرها مباشرة كخاصيات:
buttoncolor: var(--search-icon-color)h2color: var(--search-heading-color)inputbackground: var(--search-input-bg)color: var(--search-input-color)font-size: var(--search-input-font-size, 1em)input::placeholdercolor: var(--search-input-color)input.hasFocus + buttoncolor: var(--search-input-color)div.resultsbackground-color: var(--search-hits-bg-color, white)box-shadow: var(--search-hits-shadow, 0 0 2pt black)على سبيل المثال:
< Search
indices ={{ Pages : SearchHit , Posts : SearchHit }}
{ appId }
{ searchKey }
-- hitsBgColor = " var(--search-body-bg) "
-- inputColor = " var(--search-text-color) "
-- iconColor = " var(--search-link-color) "
/> عنصر المستوى الأعلى هو aside مع فئة svelte-algolia . لذلك يمكنك أيضًا تصميم نمط شجرة DOM بأكملها الموجودة أسفلها من خلال تحديد الأنماط العامة مثل
: global (aside.svelte-algolia input button svg) {
/* this would target the search icon */
}
: global (aside.svelte-algolia div.results section h2) {
/* this would target the heading shown above the list of results for each index */
} بعض المواقع التي تستخدم svelte-algolia في الإنتاج:
studenten-bilden-schueler.de [الكود]afara.foundation [الكود]ocean-artup.eu [الكود] باستخدام svelte-algolia نفسك؟ إرسال العلاقات العامة لإضافة موقعك هنا!
العلاقات العامة مرحب بها ولكن من الأفضل فتح قضية أولاً لمناقشة التغييرات.
تم الالتزام بمعرف التطبيق ومفتاح البحث .env عمدًا حتى تتمكن من استنساخ هذا الريبو والعمل عليه دون الحاجة إلى إنشاء فهرس خاص بك أولاً. لتجربة تغييراتك في خادم مطور يعمل محليًا، استخدم
git clone https://github.com/janosh/svelte-algolia
cd svelte-algolia
sed -i.bak ' s/name: `Pokedex`/name: `Pokedex Clone`/ ' svelte.config.js
npm install
npm run dev لاحظ الأمر sed الذي يغير اسم الفهرس في site/svelte.config.js من 'Pokedex' إلى 'Pokedex Clone' حتى لا تفسد فهرس البحث لهذا الموقع التجريبي عن طريق الخطأ أثناء التطوير.
