Ghost

Tính năng Code Injection tích hợp sẵn của Ghost cho phép bạn thêm các script vào <head> toàn cục và </body> của ấn phẩm. Tất cả các gói Ghost đều hỗ trợ code injection, giúp bạn dễ dàng nhúng các thành phần Wink trên bất kỳ trang hoặc bài đăng nào.

Tải script Wink trên toàn trang

Trong bảng điều khiển Ghost Admin, vào Settings → Code Injection.

Trong ô Site Header, thêm stylesheet:

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

Trong ô Site Footer, thêm script và trình tải ứng dụng (thay 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>

Nhấn Save.

Thêm thành phần vào bài đăng hoặc trang

Trình soạn thảo Ghost hỗ trợ HTML card cho phép bạn chèn HTML thô vào bất kỳ đâu trong nội dung.

Mở bài đăng hoặc trang trong trình soạn thảo Ghost.
Gõ / để mở trình chọn card và chọn HTML.

Dán HTML của thành phần, ví dụ:

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

Nhấn ra ngoài card để xem trước, sau đó xuất bản.

Code injection theo từng trang

Đối với thành phần chỉ xuất hiện trên một trang, Ghost cũng hỗ trợ code injection theo từng trang:

Mở cài đặt bài đăng hoặc trang (biểu tượng bánh răng trong trình soạn thảo).
Kéo xuống Code Injection.
Thêm thẻ thành phần vào trường Footer (trình tải ứng dụng toàn cục chỉ cần ở footer toàn trang).
Lưu lại.

Các thành phần có sẵn

Thành phần	Thẻ HTML	Mục đích
Content loader	`<wink-content-loader>`	Hiển thị thẻ khách sạn, lưới, bản đồ
Lookup	`<wink-lookup>`	Thanh tìm kiếm điểm đến
Search button	`<wink-search-button>`	Mở trình chọn hành trình
Account button	`<wink-account-button>`	Đăng nhập / menu người dùng
Itinerary button	`<wink-itinerary-button>`	Hiển thị hành trình hiện tại
Itinerary picker	`<wink-itinerary-picker>`	Biểu mẫu hành trình đầy đủ
Shopping cart	`<wink-shopping-cart-button>`	Nút tóm tắt giỏ hàng

Xem Web Components để tham khảo đầy đủ các thuộc tính.