قائمة الفئات مع اللافتات

يضيف هذا المكون لافتات اختيارية إلى أنماط صفحة التصنيفات الافتراضية فقط التصنيفات والتصنيفات مع الموضوعات المميزة:

يمكنك إضافة لافتات في إعدادات المكون عن طريق تحديد التصنيف أسفل اللافتة مباشرة، ولون اللافتة ونص العنوان. توجد أيضًا خيار لإخفاء الحدود الملونة الافتراضية:

لإضافة أنماط، يمكنك تحديد الفئة العامة، وكذلك لافتات محددة حسب معرف التصنيف:

.category list .category-list-banner {
  &.category-5 { [تنسيق لافتة محددة] }
  &:after { [تنسيق العناوين]}
}

على سبيل المثال، يمكنك ترميز التصنيفات بالألوان:

أو إضافة صور خلفية:

:warning: يضيف هذا المكون عناصر التخطيط فقط إلى صفحة التصنيفات. لذا لا يمكنك الرجوع إلى هذه العناوين في أي مكان آخر في موقعك. تحذير آخر: لا يوجد نمط صفحة افتراضي فقط التصنيفات على الأجهزة المحمولة. سيظهر دائمًا الموضوعات المميزة أيضًا.

:+1: الإسناد: استُوحى المكون من مظهر مجتمع Cfx.re ومن الحل الأصلي الذي قدمه @godgutten لتحقيق هذا المظهر كما تم مشاركته في كيف يمكنني إضافة لافتات التصنيفات؟

28 إعجابًا

شكرًا نولو! رائع جدًا! لقد حسّن مكونك مجتمعنا

إعجاب واحد (1)

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

يبدو هذا سلوكًا متوقعًا.. خانة اللون تقبل أي قيمة يمكن استخدامها كـ background-color في CSS. لذا، عند تقديم قيمة سداسية (hex)، سيبقى اللون نفسه في الأوضاع والسمات المختلفة.

إذا كنت لا تريد حقًا لون خلفية، فيجب أن تحدد none أو transparent.

إذا كنت تريد لون خلفية يتغير مع الأوضاع، فستحتاج إلى تحديده باستخدام خاصية CSS مخصصة: يمكنك استخدام واحدة من الخصائص المحددة مسبقًا في Discourse مثل var(--secondary-high). أو يمكنك تعريف خصائصك الخاصة، كما هو موضح في

3 إعجابات

شكرًا لك يا نولو، لقد ساعدتني!

إعجابَين (2)

مرحباً، يسعدني أن أرى ما تمكنت من إنشائه. ولكن هل من الممكن أن تعطيني بعض الفضل أيضاً، وألا تسرقني وتستخدم بعض أعمالي…

سعيد أنك تحب المكون! لست متأكدًا لماذا تتهموني بسرقتك باستخدام عملك..؟

كان هذا المكون مستوحى من هذا الموضوع:

لقد أشرت إلى صاحب الموضوع لحله، ولكن بعد ذلك أصبحت مهتمًا بكيفية حل هذا دون ترميز القوالب بشكل ثابت وتفكيك القيم من قائمة إعدادات داخل scss. لذا فإن كود المكون يدور بشكل أساسي حول هذا الحل:
https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557/52?u=nolo

ولكن على أي حال: إذا كنت تشعر أنني استخدمت بعضًا من عملك وفاتني تقديم الإعتمادات، فيرجى إخباري وسأقوم بتحديث المنشور الأول :ok_hand:

إعجاب واحد (1)

نعم من فضلك، أحببت الحصول على نوع من الإسناد على الأقل. ولكن الأمر متروك لك. بخلاف ذلك، يبدو الأمر جيدًا وسأوصي بمكون السمة هذا في منشوري لأنه يسهل الأمر على المستخدمين الجدد.

إعجابَين (2)

@ Nolo
هل هناك طريقة في TC، أو باستخدام CSS في السمة لمحاذاة نص العنوان إلى اليسار، تمامًا مثل مثالك الثاني).

وهل هناك طريقة (إذا لم يتم استخدام صورة بانر) لتغيير حجم الرأس ليصبح بسماكة سطر نصي فقط.
وإذا كان الأمر كذلك، هل يمكنك تغيير حجم النص بحيث لا يكون كبيرًا جدًا؟

إعجابَين (2)

نعم بالتأكيد، يمكنك تنسيق اللافتات باستخدام هذه الفئات:

إذا كنت تريد تجاوز الإعلانات الحالية على الفئة العامة، فستحتاج إلى استخدام خاصية !important. على سبيل المثال، للأنماط التي ذكرتها:

.category-list .category-list-banner {
    justify-content: flex-start !important;
    min-height: unset !important;
    &:after {
        font-size: var(--font-up-3) !important;
    }
}

هذا لأن الأنماط معلنة بالفعل على اللافتات المحددة. أعتقد أنه يمكنني تحسين ذلك في المكون، ولكن في الوقت الحالي ستحتاج إلى تجاوزها باستخدام important.

3 إعجابات

شكراً جزيلاً على هذه المكونة!! أنا أقوم بتطوير منتدى سياسي، والقدرة على تطبيق هذا النوع من الفصل أمر بالغ الأهمية.
في حين أنها تمثل بالفعل تحسنًا كبيرًا لمنتدى الخاص بي، إلا أنها ستحدث فرقًا كبيرًا إذا كان يمكن الإشارة إلى الرؤوس عبر عنوان URL، لأن ذلك سيسمح بإنشاء أزرار في أعلى المنتدى يمكن للمستخدم من خلالها التنقل بسهولة في نفس الصفحة. ستكون هذه وظيفة مرنة للغاية إذا أصبح المنتدى (نأمل) أكبر بكثير. هل هذا ممكن حاليًا؟

إعجاب واحد (1)

شكراً على الاقتراح @lisandro_iaffar. على الرغم من أن هذه المكونات توفر حلاً خفيف الوزن لا يغير قوالب HTML. إذا كنت ترغب في الإشارة إلى الأقسام، فستحتاج إلى استخدام نهج كما هو مقدم بواسطة GitHub - discourse/discourse-minimal-category-boxes.

إعجابَين (2)

شكراً لك على إجابتك وعلى تقديم التوجيه :slight_smile:
وشكراً لك مرة أخرى على هذه المكونات، لقد حسنت تصميم المنتدى الخاص بي كثيراً :smiley:

إعجابَين (2)

أنا متحمس لتجربة هذا حيث أنني أنشأت عددًا كبيرًا جدًا من الفئات وسيكون تنظيمها في مجموعات مفيدًا جدًا.\n\nسأعرف عندما أجرب هذا أيضًا، يمكن أن يكون هذا أيضًا طريقة لترك الفئات القديمة الأقل استخدامًا خارج الصفحة الرئيسية، أليس كذلك؟ ستظل متاحة عبر الشريط الجانبي الجديد.

إعجاب واحد (1)

نعم، بالتأكيد :+1: في الواقع، أنا دائمًا ما أقوم بتحديد الفئات على عناصر مختلفة من الصفحة (الشريط الجانبي، الرأس، شريط التنقل، صفحة الفئة، ..) إنه مثل هيكل الموقع على الويب. من المهم أن يكون منظمًا جيدًا، ولكنه لا يحتاج إلى تحديد طريقة عرض واجهة المستخدم الخاصة بك.

مرحباً @manuel أود أن أعرف ما إذا كانت هذه المكونات الرائعة لا تزال تعمل بعد تحديثات الكلام، لقد قمت بتثبيتها ولا تعمل معي، شكراً مقدماً

كيف تضيف صور خلفية؟

أهلاً بك :wave:
يمكنك إضافة CSS في السمات الخاصة بك أو في مكون سمة منفصل:

على سبيل المثال، بافتراض أنك تريد إضافة صورة إلى الفئة ذات المعرف 4، ستقوم بشيء كهذا:

.category-list .category-list-banner {
    &.category-4 {
        background-image: url(https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg);
        background-size: cover;
    }
}

هذا مجرد مثال. لمزيد من المعلومات، يمكنك الاطلاع على خصائص CSS background.

روابط مفيدة أيضاً :+1: :

إعجابَين (2)

تم تقسيم مشاركة إلى موضوع جديد: إضافة معلومات إضافية إلى مربع الفئة