Ghost
Ghost’un yerleşik Kod Enjeksiyonu özelliği, yayınızın global <head> ve </body> kısımlarına script eklemenizi sağlar. Tüm Ghost planları kod enjeksiyonunu destekler, böylece Wink bileşenlerini herhangi bir sayfa veya gönderiye kolayca gömebilirsiniz.
Wink scriptlerini site genelinde yükleyin
Section titled “Wink scriptlerini site genelinde yükleyin”- Ghost Yönetici panelinde, Ayarlar → Kod Enjeksiyonu bölümüne gidin.
- Site Başlığı kutusuna stil sayfasını ekleyin:
<link rel="stylesheet" href="https://elements.wink.travel/styles.css">
- Site Altbilgisi kutusuna script ve uygulama yükleyicisini ekleyin (
YOUR_CLIENT_IDile değiştirin):<script src="https://elements.wink.travel/elements.js" type="module" defer></script><wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader> - Kaydet butonuna tıklayın.
Bir gönderiye veya sayfaya bileşen ekleyin
Section titled “Bir gönderiye veya sayfaya bileşen ekleyin”Ghost editörü, içeriğinizin herhangi bir yerine ham HTML eklemenizi sağlayan bir HTML kartı destekler.
- Gönderiyi veya sayfayı Ghost editöründe açın.
- Kart seçiciyi açmak için
/yazın ve HTML seçeneğini seçin. - Bileşen HTML’sini yapıştırın, örneğin:
<wink-content-loaderlayout="HOTEL"id="YOUR_LAYOUT_ID"></wink-content-loader>
- Kart dışına tıklayarak önizleyin, ardından yayınlayın.
Sayfa başına kod enjeksiyonu
Section titled “Sayfa başına kod enjeksiyonu”Sadece bir sayfada görünmesi gereken bir bileşen için Ghost, sayfa başına kod enjeksiyonunu da destekler:
- Gönderi veya sayfa ayarlarını açın (editörde dişli simgesi).
- Kod Enjeksiyonu bölümüne gidin.
- Bileşen etiketini Altbilgi alanına ekleyin (global app-loader sadece site genelinde altbilgide olmalıdır).
- Kaydedin.
Mevcut bileşenler
Section titled “Mevcut bileşenler”| Bileşen | HTML etiketi | Amaç |
|---|---|---|
| İçerik yükleyici | <wink-content-loader> | Otel kartları, ızgaralar, haritalar gösterir |
| Arama | <wink-lookup> | Destinasyonlar için arama çubuğu |
| Arama butonu | <wink-search-button> | Güzergah seçiciyi açar |
| Hesap butonu | <wink-account-button> | Giriş / kullanıcı menüsü |
| Güzergah butonu | <wink-itinerary-button> | Mevcut güzergahı gösterir |
| Güzergah seçici | <wink-itinerary-picker> | Tam güzergah formu |
| Alışveriş sepeti | <wink-shopping-cart-button> | Sepet özeti butonu |
Tam özellik referansı için Web Bileşenleri sayfasına bakın.