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 脚本在浏览器加载页面时会升级它们。