Gatsby

يقوم Gatsby بإنشاء HTML ثابت أثناء وقت البناء ويعيد تهيئته على العميل. يجب تحميل سكربتات CDN فقط في واجهات برمجة التطبيقات الخاصة بالمتصفح — gatsby-browser.js هو المكان المناسب.

@wink/elements npm package قم بتثبيت وتحميل حزمة CDN مع أنواع TypeScript.

التثبيت

npm install @wink/elements

التحميل عبر gatsby-browser.js

تعمل واجهة برمجة التطبيقات onClientEntry مرة واحدة بمجرد تهيئة وقت تشغيل 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، لذا أضف نفس إعلانات JSX الجوهرية كما في تكامل React:

// انظر /integrations/react لملف الإعلان الكامل

gatsby-ssr.js — لا حاجة لتغييرات

لا تحتاج إلى تعديل gatsby-ssr.js. تُعرض علامات <wink-*> كعناصر HTML عادية في المخرجات الثابتة، ويقوم سكربت CDN بترقيتها عند تحميل الصفحة في المتصفح.