跳到內容
Wink

Ghost

Ghost 內建的 Code Injection 功能讓您可以將腳本加入到出版物的全域 <head> 和 </body> 中。所有 Ghost 計劃都支援代碼注入，使您能輕鬆在任何頁面或文章中嵌入 Wink 元件。

在整個網站載入 Wink 腳本

Section titled “在整個網站載入 Wink 腳本”
  1. 在 Ghost 管理面板中，前往 Settings → Code Injection。
  2. 在 Site Header 欄位中，加入樣式表： 
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css">
  3. 在 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>
  4. 點擊 Save。

在文章或頁面中加入元件

Section titled “在文章或頁面中加入元件”

Ghost 編輯器支援 HTML 卡片，讓您可以在內容中任意插入原始 HTML。

  1. 在 Ghost 編輯器中打開文章或頁面。
  2. 輸入 / 開啟卡片選擇器，選擇 HTML。
  3. 貼上元件 HTML，例如： 
    <wink-content-loader
      layout="HOTEL"
      id="YOUR_LAYOUT_ID"
    ></wink-content-loader>
  4. 點擊卡片外部以預覽，然後發佈。

單頁代碼注入

Section titled “單頁代碼注入”

若元件只需出現在單一頁面，Ghost 也支援單頁代碼注入：

  1. 打開文章或頁面設定（編輯器中的齒輪圖示）。
  2. 滾動至 Code Injection。
  3. 在 Footer 欄位中加入元件標籤（全域的 app-loader 只需放在網站全域頁腳）。
  4. 儲存。

可用元件

Section titled “可用元件”
元件HTML 標籤用途
內容載入器<wink-content-loader>顯示飯店卡片、格子、地圖
查詢<wink-lookup>目的地搜尋欄
搜尋按鈕<wink-search-button>開啟行程選擇器
帳戶按鈕<wink-account-button>登入 / 使用者選單
行程按鈕<wink-itinerary-button>顯示目前行程
行程選擇器<wink-itinerary-picker>完整行程表單
購物車<wink-shopping-cart-button>購物車摘要按鈕

請參閱 Web Components 以取得完整屬性參考。

延伸閱讀

Section titled “延伸閱讀”