Ghost

Ghostin sisäänrakennettu Code Injection -ominaisuus antaa sinun lisätä skriptejä julkaisusi globaalin <head>- ja </body>-osaan. Kaikki Ghost-suunnitelmat tukevat koodin upotusta, mikä tekee Wink-komponenttien upottamisesta helppoa mille tahansa sivulle tai artikkeliin.

Lataa Wink-skriptit koko sivustolle

Mene Ghost Admin -paneelissa kohtaan Settings → Code Injection.

Lisää Site Header -kenttään tyylitiedosto:

<link rel="stylesheet" href="https://elements.wink.travel/styles.css">

Lisää Site Footer -kenttään skripti ja sovelluksen lataaja (korvaa YOUR_CLIENT_ID):

<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

Klikkaa Save.

Lisää komponentti artikkeliin tai sivulle

Ghostin editori tukee HTML-korttia, jonka avulla voit lisätä raakaa HTML:ää mihin tahansa sisältöösi.

Avaa artikkeli tai sivu Ghost-editorissa.
Kirjoita / avataksesi korttivalitsimen ja valitse HTML.

Liitä komponentin HTML, esimerkiksi:

<wink-content-loader
  layout="HOTEL"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>

Klikkaa kortin ulkopuolelle esikatselua varten ja julkaise sitten.

Sivukohtainen koodin upotus

Jos komponentin tulisi näkyä vain yhdellä sivulla, Ghost tukee myös sivukohtaista koodin upotusta:

Avaa artikkelin tai sivun asetukset (rataskuvake editorissa).
Selaa kohtaan Code Injection.
Lisää komponenttitag Footer-kenttään (globaali app-loader tarvitsee olla vain koko sivuston alatunnisteessa).
Tallenna.

Saatavilla olevat komponentit

Komponentti	HTML-tagi	Tarkoitus
Content loader	`<wink-content-loader>`	Näytä hotellikortit, ruudukot, kartat
Lookup	`<wink-lookup>`	Hakupalkki kohteille
Search button	`<wink-search-button>`	Avaa matkasuunnitelman valitsin
Account button	`<wink-account-button>`	Kirjaudu sisään / käyttäjävalikko
Itinerary button	`<wink-itinerary-button>`	Näytä nykyinen matkasuunnitelma
Itinerary picker	`<wink-itinerary-picker>`	Täysi matkasuunnitelmalomake
Shopping cart	`<wink-shopping-cart-button>`	Ostoskorin yhteenvetopainike

Katso täydellinen attribuuttiviite Web Components -sivulta.