Gatsby

Gatsby tạo ra HTML tĩnh khi build và tái kích hoạt trên client. Các script CDN phải được tải chỉ trong các API trình duyệt — gatsby-browser.js là nơi thích hợp.

@wink/elements npm package Cài đặt và tải gói CDN kèm kiểu TypeScript.

Cài đặt

npm install @wink/elements

Tải qua gatsby-browser.js

API onClientEntry chạy một lần ngay khi runtime của Gatsby khởi tạo trong trình duyệt:

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

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

Biến môi trường

Gatsby chỉ cho phép các biến có tiền tố GATSBY_ được truy cập trong gói trình duyệt:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Sử dụng trong trang và thành phần

import React from 'react';

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

TypeScript

Gatsby sử dụng React, vì vậy thêm các khai báo JSX intrinsic giống như tích hợp React:

// Xem /integrations/react để biết file khai báo đầy đủ

gatsby-ssr.js — không cần thay đổi

Bạn không cần chỉnh sửa gatsby-ssr.js. Các thẻ <wink-*> sẽ được render như các phần tử HTML thuần túy trong output tĩnh, và script CDN sẽ nâng cấp chúng khi trình duyệt tải trang.