svelte algolia
v0.3.2
Demo Langsung
Utilitas untuk pembaruan indeks Algolia sisi server ditambah komponen pencarian sisi klien untuk aplikasi Svelte. Hanya menambahkan satu ketergantungan:
algoliasearchalgoliasearch/lite (13 KB). Ada 3 langkah untuk menyiapkan svelte-algolia :
npm install --dev svelte-algolia Buat objek 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` ] ,
} ,
} Fungsi getData diharapkan mengembalikan array objek berisi data yang ingin Anda indeks (katalog produk, postingan blog, halaman dokumentasi, pokémon, atau apa pun). Setiap objek dalam array data harus memiliki kunci bernama id , _id atau objectID agar Algolia dapat mengenalinya dan menimpa data yang ada jika diperlukan.
Objek pengaturan berlaku untuk semua indeks. Anda juga dapat meneruskan objek pengaturan ke setiap indeks satu per satu yang menggantikan indeks umum.
Berikan konfigurasi Anda ke indexAlgolia :
import { indexAlgolia } from 'svelte-algolia/server-side'
indexAlgolia ( algoliaConfig ) Anda dapat memanggil fungsi ini di mana pun Anda ingin memperbarui indeks, misalnya di svelte.config.js atau di src/hooks.ts (seperti yang dilakukan situs demo ini). Biasanya, Anda akan menyertakan ini dalam setiap build produksi aplikasi Anda.
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` }}],
} Untuk menggunakan paket ini sebagai bagian dari proses pembangunan (misalnya di aplikasi SvelteKit), cukup panggil indexAlgolia di konfigurasi pembangunan Anda:
// 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 /> memerlukan ID dan kunci pencarian aplikasi Algolia Anda untuk mengakses indeks pencariannya serta pemetaan dari nama indeks ke komponen Svelte terkait yang seharusnya menghasilkan hasil pencarian yang berasal dari indeks tersebut. Setiap komponen hit menerima objek hit sebagai prop dengan semua atribut disimpan dalam indeks 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 > Misalnya, komponen PokemonHit.svelte di situs demo terlihat seperti ini:
< 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 > Substring dalam atribut yang cocok dengan string pencarian saat ini akan dibungkus dengan <em> yang memerlukan tag {@html ...} untuk dirender dengan benar namun kemudian dapat ditata untuk menyorot mengapa hit tertentu cocok dengan string pencarian saat ini. Nilai asli (yaitu tanpa tag <em> ) dari setiap atribut yang disorot tersedia sebagai hit.[attr]Orig . Lihat hit.nameOrig di atas.
Daftar lengkap variabel props/bindable untuk komponen ini:
appId: stringID aplikasi Algolia
ariaLabel: string = `Search`Memberi tahu teknologi bantu cara mengumumkan elemen masukan kepada pengguna.
hasFocus: boolean = falseBoolean yang dapat diikat menunjukkan apakah panel input teks atau hasil saat ini memiliki fokus.
indices: Record < string , typeof SvelteComponent > | [ string , typeof SvelteComponent ] [ ] Objek memetakan nama setiap indeks yang harus digunakan oleh komponen Search untuk menemukan hasil Pencarian ke komponen Svelte yang akan memberikan hasil tersebut.
input: HTMLInputElement | null = nullMenangani ke node DOM.
loadingMsg: string = `Searching...`String untuk ditampilkan di panel hasil saat hasil Pencarian diambil.
noResultMsg = ( query : string ) : string => `No results for ' ${ query } '`Fungsi yang mengembalikan string untuk ditampilkan ketika pencarian tidak memberikan hasil.
placeholder: string = `Search`Placeholder ditampilkan dalam input teks sebelum pengguna mulai mengetik.
query: string = ``Nilai saat ini dari simpul DOM.
resultCounter = ( hits : SearchHit [ ] ) : string =>
hits . length > 0 ? `<span>Results: ${ hits . length } <span>` : ``Fungsi yang mengembalikan string yang akan ditampilkan di sebelah nama setiap indeks untuk menunjukkan berapa banyak hasil yang ditemukan dalam indeks tersebut. Kembalikan string kosong untuk tidak menampilkan apa pun.
searchKey: stringKunci API khusus penelusuran
Search.svelte mendengarkan peristiwa on:close pada setiap komponen hit yang direndernya dan akan menyetel hasFocus ke false untuk menutup sendiri saat diterima. Anda dapat menggunakan ini misalnya untuk menutup antarmuka pencarian ketika pengguna mengklik link di salah satu hasil pencarian dan menavigasi ke halaman lain di situs Anda:
< 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 > Itu juga memancarkan peristiwa focus setiap pengguna mengklik ikon pencarian dan fokus memasukkan input teks.
< Search on:focus ={() => console . log ( " Let's search! " )} /> Search.svelte menawarkan variabel CSS berikut yang tercantum di sini dengan defaultnya (jika ada) yang dapat diteruskan langsung sebagai props:
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)Misalnya:
< Search
indices ={{ Pages : SearchHit , Posts : SearchHit }}
{ appId }
{ searchKey }
-- hitsBgColor = " var(--search-body-bg) "
-- inputColor = " var(--search-text-color) "
-- iconColor = " var(--search-link-color) "
/> Elemen tingkat atas adalah aside dengan kelas svelte-algolia . Jadi Anda juga dapat menata seluruh pohon DOM di bawahnya dengan menentukan gaya global seperti
: 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 */
} Beberapa situs yang menggunakan svelte-algolia dalam produksinya:
studenten-bilden-schueler.de [kode]afara.foundation [kode]ocean-artup.eu [kode] Menggunakan svelte-algolia sendiri? Kirimkan PR untuk menambahkan situs Anda di sini!
Para humas dipersilakan, tetapi sebaiknya buka isu terlebih dahulu untuk mendiskusikan perubahan.
ID aplikasi dan kunci pencarian .env sengaja dikomit sehingga Anda dapat mengkloning repo ini dan mengerjakannya tanpa harus membuat indeks sendiri terlebih dahulu. Untuk mencoba perubahan Anda di server dev yang berjalan secara lokal, gunakan
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 Perhatikan perintah sed yang mengubah nama indeks di site/svelte.config.js dari 'Pokedex' menjadi 'Pokedex Clone' sehingga Anda tidak secara tidak sengaja mengacaukan indeks pencarian untuk situs demo ini saat mengembangkan.
