التكامل على جانب العميل
الأداة حزمة واحدة صغيرة، @caputchin/widget، تسجّل العنصرين المخصّصين <caputchin-widget> و<caputchin-game>. هناك طريقتان لوضعها على صفحتك. اختر بحسب ما إذا كان لموقعك خطوة بناء.
وسم script (CDN)
لا خطوة بناء، صفحة HTML عادية أو مُعرَّضة على الخادم؟ حمّلها مباشرةً من CDN الخاص بـ jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/@caputchin/widget@3/dist/widget.js"></script>الـ @3 يثبّت الإصدار الأكبر الحالي، فتحصل على الإصلاحات والألعاب الجديدة دون كسر مفاجئ. أسقط ذلك السطر الواحد في <head> (أو قُبيل </body>)، والعناصر مسجَّلة للصفحة كلها.
npm (ESM)
لديك مُجمِّع (Vite، أو webpack، أو Next.js، وما إليها)؟ ثبّت الحزمة واستوردها مرة واحدة عند الإقلاع:
npm install @caputchin/widgetimport "@caputchin/widget";لا يكشف الاستيراد شيئًا لتناديه؛ يعمل لأثره الجانبي في تسجيل العناصر المخصّصة. ضعه عند نقطة دخول تطبيقك كي يعمل قبل أن يُعرَض أي <caputchin-widget>.
أيّهما؟
- لا خطوة بناء (HTML عادي، قالب مُعرَّض على الخادم): استخدم وسم script. إنه التكامل كله في سطر واحد.
- تطبيق مُجمَّع (React، وVue، والبقية): استخدم استيراد npm. يتأصدر مع ملف القفل خاصتك ويتجنّب طلبًا خارجيًّا يحجب العرض.
في كلتا الحالتين، العنصر وكل ما يليه (الرمز المحقون، فحص خادمك) متطابقان. الشيء الوحيد الذي يتغيّر هو طريقة وصول الحزمة.
انظر أيضًا
- أمثلة تكامل الواجهة للعنصر في كل إطار عمل.
- أضف الأداة إلى موقعك للشرح الكامل خطوة بخطوة.