Gatsby

Gatsby 在建置時產生靜態 HTML，並在客戶端重新啟用。CDN 腳本必須只在瀏覽器 API 中載入 — gatsby-browser.js 是正確的位置。

@wink/elements npm package 安裝並載入帶有 TypeScript 型別的 CDN 套件。

安裝

npm install @wink/elements

透過 gatsby-browser.js 載入

onClientEntry API 會在 Gatsby 執行環境於瀏覽器初始化時執行一次：

import { load } from '@wink/elements';

export function onClientEntry() {
  load({ clientId: process.env.GATSBY_WINK_CLIENT_ID });
}

環境變數

Gatsby 僅會將前綴為 GATSBY_ 的變數暴露給瀏覽器套件：

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

在頁面與元件中使用

import React from 'react';

export default function HotelsPage() {
  return (
    <main>
      <wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID" />
      <wink-lookup />
    </main>
  );
}

TypeScript

Gatsby 使用 React，因此請加入與 React 整合相同的 JSX 內建宣告：

// 請參考 /integrations/react 取得完整宣告檔案

gatsby-ssr.js — 無需更動

你不需要修改 gatsby-ssr.js。<wink-*> 標籤會在靜態輸出中呈現為純 HTML 元素，CDN 腳本會在瀏覽器載入頁面時升級它們。