الانتقال إلى المحتوى الرئيسي

نظرة عامة

لا يوفر Twenty حتى الآن ضمانًا للعرض من جهة الخادم على مستوى الحزمة. تحقق من نقاط الإدخال والمكونات المحددة التي تستخدمها مع بناء الخادم لتطبيقك وإجراء الإماهة في إطار العمل لديك.

حمّل CSS من خلال إطار العمل لديك

تتضمن المكتبة أوراق أنماط مُنشأة مسبقًا. استوردها من نقطة إدخال التطبيق أو التخطيط الذي يسمح إطار العمل لديك باستخدامه لتحميل CSS العامة. لا يمكن للخادم الذي يستورد JavaScript من دون محمّل CSS تحميل استيراد ورقة أنماط مباشرةً. تنتمي المكونات التي تستخدم واجهات برمجة تطبيقات المتصفح أو قياسات التخطيط أو التأثيرات إلى حدود العميل عندما يميّز إطار العمل لديك بين مكونات الخادم والعميل.

هيّئ السمة

تعرّف أوراق أنماط السمة رموزها ضمن .light و.dark. طبّق الفئة الأولية في المستند المُصيَّر على الخادم، ثم هيّئ ThemeProvider بالمخطط نفسه على العميل:
يؤدي ذلك إلى إتاحة لوحة الألوان قبل الإماهة. حدّد المخطط الأولي استنادًا إلى المعلومات المتاحة لكلا عمليتي التصيير، مثل تفضيل محفوظ يتم تمريره من الخادم.

أبقِ قياسات المتصفح على العميل

يحلّ ThemeProvider القيم باستخدام الأنماط المحسوبة في المتصفح. أثناء التصيير على الخادم، أو من دون دعم الأنماط المحسوبة، قد تبقى قيم السمة مراجع لمتغيرات CSS. لا تفترض أن الرمز الرقمي المُعاد أثناء التصيير على الخادم هو بالفعل رقم JavaScript. استخدم مراجع متغيرات CSS للأنماط وأجّل الحسابات التي تحتاج إلى أبعاد محلولة إلى أن يحمّل العميل السمة. اختبر الإماهة باستخدام المكونات وأوراق الأنماط والمخطط الأولي نفسها التي تنشرها. إن مُصيّر المكونات الأمامية عبارة عن بيئة معزولة منفصلة ذات قيود DOM خاصة بها؛ ولا يعني نجاح التصيير في المتصفح وجود دعم للبيئة المعزولة.