svelte algolia

สเวลเต้ อัลโกเลีย

การสาธิตสด

ยูทิลิตี้สำหรับการอัปเดตดัชนี Algolia ฝั่งเซิร์ฟเวอร์ รวมถึงองค์ประกอบการค้นหาฝั่งไคลเอ็นต์สำหรับแอป Svelte เพิ่มการพึ่งพาเดียวเท่านั้น:

• ฝั่งเซิร์ฟเวอร์: algoliasearch
• ฝั่งไคลเอ็นต์: algoliasearch/lite (13 KB)

มี 3 ขั้นตอนในการตั้งค่า svelte-algolia :

1. npm install --dev svelte-algolia
2. ตั้งค่าการอัปเดตดัชนีฝั่งเซิร์ฟเวอร์ของคุณ
3. รวมองค์ประกอบการค้นหาฝั่งไคลเอ็นต์เข้ากับไซต์ของคุณ

การอัปเดตดัชนีฝั่งเซิร์ฟเวอร์

1. สร้างวัตถุ 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 จดจำและเขียนทับข้อมูลที่มีอยู่ตามความเหมาะสม

   ออบเจ็กต์การตั้งค่าใช้กับดัชนีทั้งหมด คุณยังสามารถส่งผ่านออบเจ็กต์การตั้งค่าไปยังแต่ละดัชนีแยกกันได้ ซึ่งจะแทนที่ออบเจ็กต์ทั่วไป

2. ส่งการกำหนดค่าของคุณไปที่ 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 )
} 

UI ฝั่งไคลเอ็นต์

<Search /> ต้องใช้ ID ของแอป Algolia และคีย์การค้นหาเพื่อเข้าถึงดัชนีการค้นหา ตลอดจนการแมปจากชื่อดัชนีไปยังส่วนประกอบ Svelte ที่เกี่ยวข้องซึ่งควรแสดงผลการค้นหาที่มาจากดัชนีนั้น องค์ประกอบ Hit แต่ละรายการจะได้รับวัตถุ 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 ...} แสดงผลอย่างถูกต้อง แต่สามารถจัดรูปแบบได้เพื่อเน้นว่าทำไม Hit ใดรายการหนึ่งจึงตรงกับสตริงการค้นหาปัจจุบัน ค่าเดิม (เช่น ไม่มีแท็ก <em> ) ของแอตทริบิวต์ที่ไฮไลต์ทุกค่าสามารถใช้เป็น hit.[attr]Orig ดู hit.nameOrig ด้านบน

อุปกรณ์ประกอบฉาก

รายการอุปกรณ์ประกอบฉาก/ตัวแปรที่เชื่อมโยงได้ทั้งหมดสำหรับส่วนประกอบนี้:

1. appId: string

   รหัสแอปอัลโกเลีย

2. ariaLabel: string = `Search`

   บอกเทคโนโลยีอำนวยความสะดวกว่าจะประกาศองค์ประกอบอินพุตให้ผู้ใช้ทราบได้อย่างไร

3. hasFocus: boolean = false

   Bindable boolean ระบุว่าช่องป้อนข้อความหรือช่องผลลัพธ์มีโฟกัสอยู่หรือไม่

4. indices: Record < string , typeof SvelteComponent > | [ string , typeof SvelteComponent ] [ ]

   การแมปวัตถุชื่อของแต่ละดัชนีที่องค์ประกอบ Search ควรใช้เพื่อค้นหาผลการค้นหาไปยังองค์ประกอบ Svelte ที่ควรแสดงผล Hit เหล่านั้น

5. input: HTMLInputElement | null = null

   จัดการกับโหนด DOM

6. loadingMsg: string = `Searching...`

   สตริงที่จะแสดงในบานหน้าต่างผลลัพธ์ในขณะที่กำลังดึงผลการค้นหา

7.  noResultMsg = ( query : string ) : string => `No results for ' ${ query } '`

   ฟังก์ชันที่ส่งคืนสตริงที่จะแสดงเมื่อการค้นหาไม่มีผลลัพธ์

8. placeholder: string = `Search`

   ตัวยึดตำแหน่งที่แสดงในการป้อนข้อความก่อนที่ผู้ใช้จะเริ่มพิมพ์

9. query: string = ``

   ค่าปัจจุบันของโหนด DOM

10.  resultCounter = ( hits : SearchHit [ ] ) : string =>
      hits . length > 0 ? `<span>Results: ${ hits . length } <span>` : ``

    ฟังก์ชั่นที่ส่งคืนสตริงซึ่งจะแสดงถัดจากชื่อของแต่ละดัชนีเพื่อแสดงจำนวนผลลัพธ์ที่พบในดัชนีนั้น คืนสตริงว่างเพื่อไม่แสดงอะไรเลย

11. searchKey: string

    คีย์ API สำหรับการค้นหาเท่านั้น

กิจกรรม

Search.svelte จะรับฟังเหตุการณ์ on:close ในทุกองค์ประกอบ Hit ที่มันแสดงผล และจะตั้งค่า 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 ต่อไปนี้ที่แสดงอยู่ที่นี่พร้อมค่าเริ่มต้น (ถ้ามี) ที่สามารถส่งผ่านเป็นอุปกรณ์ประกอบฉากได้โดยตรง:

• button
  • color: var(--search-icon-color)
• h2
  • color: var(--search-heading-color)
• input
  • background: var(--search-input-bg)
  • color: var(--search-input-color)
  • font-size: var(--search-input-font-size, 1em)
• input::placeholder
  • color: var(--search-input-color)
• input.hasFocus + button
  • color: var(--search-input-color)
• div.results
  • background-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 ด้วยตัวเองเหรอ? ส่ง PR เพื่อเพิ่มเว็บไซต์ของคุณที่นี่!

ต้องการที่จะมีส่วนร่วม?

ยินดีต้อนรับฝ่ายประชาสัมพันธ์ แต่ควรเปิดประเด็นก่อนเพื่อหารือเกี่ยวกับการเปลี่ยนแปลง

ID ของแอปและคีย์การค้นหา .env เกิดขึ้นโดยเจตนา ดังนั้นคุณจึงสามารถโคลน repo นี้และดำเนินการได้โดยไม่ต้องสร้างดัชนีของคุณเองก่อน หากต้องการลองการเปลี่ยนแปลงในเซิร์ฟเวอร์ dev ที่ทำงานภายในเครื่อง ให้ใช้

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' เพื่อที่คุณจะได้ไม่ทำให้ดัชนีการค้นหาสำหรับไซต์สาธิตนี้เสียหายโดยไม่ตั้งใจขณะพัฒนา