مرحباً بالجميع — أحاول إنشاء لافتة فئة مثل لقطة الشاشة أدناه:
الهدف
نفس تخطيط النموذج: لافتة كبيرة مع صورة خلفية خاصة بالفئة وعنوان/وصف متراكب.
تحميل سلس (بدون وميض/تغيير حجم)، متجاوب بالكامل.
يجب أن تكون الخلفية صورة فريدة لكل فئة (ليست نمط CSS عام).
ما جربته
جافاسكريبت مخصص لحقن الصورة والنص. يعمل، لكن الصورة تُحمّل أولاً ثم يتغير حجمها، مما يتسبب في انتقالات متقطعة/تغيير في التخطيط.
مكون لافتة الفئة جعلني أقترب، لكنني لم أتمكن من مطابقة هذا التخطيط المحدد ومتطلبات الصورة لكل فئة.
السؤال
ما هو النهج الموصى به في Discourse لتحقيق ذلك؟
هل هناك أمثلة أو أنماط CSS/HTML لحجز المساحة (مثل غلاف بنسبة عرض إلى ارتفاع ثابتة/object-fit) وتجنب CLS؟
نصائح لاستخدام التحميلات لكل فئة أو إعدادات السمة لتعيين صورة الخلفية بشكل نظيف.
شكراً!
إعجاب واحد (1)
عرض توضيحي سيء للغاية (ولا أستخدم بطاقات المواضيع) ولكني أعتقد أنه يمكنك القيام بذلك بسهولة باستخدام صورة خلفية الفئة المضمنة:
إذا قمت للتو بإضافة خلفية فئة في إعدادات الفئة
هذا يضع الصورة على وسم الجسم. ربما قم بتعديل CSS بعد ذلك إلى شيء يناسب ذوقك (مثالي هو 400 بكسل):
`+ بعض التعديلات على محاذاة النص، يجب أن تحصل على تقريب لما تريده أعتقد؟ العيب الرئيسي هو أنه بعرض كامل حقًا لذا سترى أنه يبرز على الشاشات الأوسع.
إنه ليس مثاليًا، ولكنه سريع
إعجاب واحد (1)
Lilly
14 أغسطس 2025، 12:36ص
3
Steve_John:
نصائح لاستخدام التحميلات حسب الفئة أو إعدادات السمة لتعيين صورة الخلفية بشكل نظيف.
أعتقد أن أقرب مكون سمة رأيته لما تبحث عنه هو هذا:
This theme component provides a number of enhancements for the Discourse category header.
The ‘standard’ Discourse category header is displayed at the top of each category page, above the navigation links and list of topics. It is normally only visible if a category logo image has been uploaded in the category settings. The header displays the logo and a short description of the category, taken from the first paragraph of the ‘About the… category’ topic.
يمكنك إلقاء نظرة على هذا للحصول على بعض الأفكار، ولكن يبدو أنك قد تحتاج إلى بناء مكون مخصص. يمكنك النشر في Marketplace
نعم، من المحتمل أن يكون مكون السمة هذا خيارًا أفضل، لم أره من قبل TIL
