svelte algolia
v0.3.2
現場演示
用於伺服器端 Algolia 索引更新的實用程式以及 Svelte 應用程式的用戶端搜尋元件。只新增一個相依性：
algoliasearchalgoliasearch/lite (13 KB)。設定svelte-algolia有 3 個步驟：
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 應用程式的 ID 和搜尋鍵來存取其搜尋索引，以及從索引名稱到對應 Svelte 元件的映射，該元件應呈現來自該索引的搜尋命中。每個命中組件接收一個hit物件作為 prop，其所有屬性都儲存在 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 。
此元件的 props/可綁定變數的完整清單：
appId: string阿爾戈利亞應用程式 ID
ariaLabel: string = `Search`告訴輔助技術如何向使用者宣布輸入元素。
hasFocus: boolean = false可綁定布林值，指示文字輸入或結果窗格目前是否具有焦點。
indices: Record < string , typeof SvelteComponent > | [ string , typeof SvelteComponent ] [ ]將Search元件為尋找搜尋結果而應利用的每個索引的名稱對應到應呈現這些命中的 Svelte 元件的物件。
input: HTMLInputElement | null = nullDOM 節點的句柄。
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僅限搜尋 API 金鑰
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 變數及其預設值（如果有），可以直接作為 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)例如：
< Search
indices ={{ Pages : SearchHit , Posts : SearchHit }}
{ appId }
{ searchKey }
-- hitsBgColor = " var(--search-body-bg) "
-- inputColor = " var(--search-text-color) "
-- iconColor = " var(--search-link-color) "
/>頂層元素是類svelte-algolia的aside 。因此，您也可以透過定義全域樣式來設定其下面的整個 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嗎？在這裡提交 PR 以添加您的網站！
歡迎 PR，但最好先打開一個問題來討論更改。
應用程式 ID 和搜尋鍵.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'這樣您在開發時就不會意外弄亂此演示站點的搜尋索引。
