Ghost

Ciri Code Injection terbina dalam Ghost membolehkan anda menambah skrip ke <head> dan </body> global penerbitan anda. Semua pelan Ghost menyokong code injection, memudahkan anda menyelitkan komponen Wink pada mana-mana halaman atau pos.

Muatkan skrip Wink di seluruh tapak

Dalam panel Ghost Admin, pergi ke Settings → Code Injection.

Dalam kotak Site Header, tambah helaian gaya:

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

Dalam kotak Site Footer, tambah skrip dan pemuat aplikasi (gantikan 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>

Klik Save.

Tambah komponen ke pos atau halaman

Editor Ghost menyokong kad HTML yang membolehkan anda memasukkan HTML mentah di mana-mana dalam kandungan anda.

Buka pos atau halaman dalam editor Ghost.
Taip / untuk membuka pemilih kad dan pilih HTML.

Tampal HTML komponen, contohnya:

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

Klik di luar kad untuk pratonton, kemudian terbitkan.

Code injection per halaman

Untuk komponen yang hanya perlu muncul pada satu halaman, Ghost juga menyokong code injection per halaman:

Buka tetapan pos atau halaman (ikon gear dalam editor).
Tatal ke Code Injection.
Tambah tag komponen dalam medan Footer (pemuat aplikasi global hanya perlu ada di footer seluruh tapak).
Simpan.

Komponen tersedia

Komponen	Tag HTML	Tujuan
Pemuat kandungan	`<wink-content-loader>`	Papar kad hotel, grid, peta
Carian	`<wink-lookup>`	Bar carian destinasi
Butang carian	`<wink-search-button>`	Buka pemilih jadual perjalanan
Butang akaun	`<wink-account-button>`	Log masuk / menu pengguna
Butang jadual perjalanan	`<wink-itinerary-button>`	Papar jadual perjalanan semasa
Pemilih jadual perjalanan	`<wink-itinerary-picker>`	Borang jadual perjalanan penuh
Troli beli-belah	`<wink-shopping-cart-button>`	Butang ringkasan troli

Lihat Web Components untuk rujukan atribut penuh.