Ghost

ฟีเจอร์ Code Injection ที่มีในตัวของ Ghost ช่วยให้คุณเพิ่มสคริปต์ลงใน <head> และ </body> ของสิ่งพิมพ์ของคุณได้ทุกหน้า แผนบริการ Ghost ทุกแผนรองรับการฝังโค้ด ทำให้ง่ายต่อการฝังส่วนประกอบของ Wink บนหน้าใดก็ได้หรือโพสต์ใดก็ได้

โหลดสคริปต์ Wink ทั่วทั้งไซต์

ในแผงควบคุม Ghost Admin ไปที่ Settings → Code Injection
ในกล่อง Site Header ให้เพิ่มสไตล์ชีต:
```
<link rel="stylesheet" href="https://elements.wink.travel/styles.css">
```
ในกล่อง Site Footer ให้เพิ่มสคริปต์และตัวโหลดแอปพลิเคชัน (แทนที่ 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>
```
คลิก Save

เพิ่มส่วนประกอบลงในโพสต์หรือหน้า

ตัวแก้ไขของ Ghost รองรับ HTML card ที่ช่วยให้คุณแทรก HTML ดิบได้ทุกที่ในเนื้อหาของคุณ

เปิดโพสต์หรือหน้าในตัวแก้ไข Ghost
พิมพ์ / เพื่อเปิดตัวเลือกการ์ด แล้วเลือก HTML

วาง HTML ของส่วนประกอบ เช่น:

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

คลิกนอกการ์ดเพื่อดูตัวอย่าง จากนั้นเผยแพร่

การฝังโค้ดแบบเฉพาะหน้า

สำหรับส่วนประกอบที่ควรแสดงเฉพาะในหน้าเดียว Ghost ยังรองรับการฝังโค้ดแบบเฉพาะหน้า:

เปิดการตั้งค่าของโพสต์หรือหน้า (ไอคอนรูปเฟืองในตัวแก้ไข)
เลื่อนลงไปที่ Code Injection
เพิ่มแท็กส่วนประกอบในช่อง Footer (ตัวโหลดแอปพลิเคชันแบบทั่วไซต์ต้องอยู่ใน footer ของไซต์เท่านั้น)
บันทึก

ส่วนประกอบที่มีให้ใช้งาน

ส่วนประกอบ	แท็ก HTML	จุดประสงค์
Content loader	`<wink-content-loader>`	แสดงการ์ดโรงแรม, ตาราง, แผนที่
Lookup	`<wink-lookup>`	แถบค้นหาปลายทาง
Search button	`<wink-search-button>`	เปิดตัวเลือกแผนการเดินทาง
Account button	`<wink-account-button>`	ลงชื่อเข้าใช้ / เมนูผู้ใช้
Itinerary button	`<wink-itinerary-button>`	แสดงแผนการเดินทางปัจจุบัน
Itinerary picker	`<wink-itinerary-picker>`	ฟอร์มแผนการเดินทางเต็มรูปแบบ
Shopping cart	`<wink-shopping-cart-button>`	ปุ่มสรุปตะกร้าสินค้า

ดูรายละเอียดคุณสมบัติทั้งหมดได้ที่ Web Components