مُبرز التصنيفات

[angus (Angus McLeod)]

يتيح لك مكون هذا السمة تمييز فئة (أو فئات) في نظام Discourse الخاص بك. يمكنك:

1. منح فئات محددة نمط خلفية خاص
2. إضافة رابط للفئة إلى الرأس بنفس النمط الخاص

مثال على حالة الاستخدام هو فئة تحتوي على محتوى “مميز”.

كيفية التثبيت

الحصول على الكود

---

تنقل الفئات وتسمية الرأس

قائمة المواضيع	قائمة الموقع

صفحة الفئات

الإعدادات

يحتوي مكون سمة تمييز الفئات على إعداد رئيسي واحد وهو “تمييز الفئات”. ستجد هذا الإعداد في لوحة إعدادات مكون سمة تمييز الفئات.

كل فئة تريد تمييزها لها عنصر قائمة خاص بها في هذا الإعداد. تنسيق كل عنصر هو:

category_slug~background~text_color~header_label~header_label_mobile~parent_slug~alternate_link

مثال على هذا التنسيق هو:

premium~linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%)~#88562e~:star:&nbsp&nbspPremium~:star:

هناك ست قيم محتملة، كل منها مفصولة بـ ~ (رمز “التموج” أو tilde). دعنا نستعرض كل قيمة على حدة.

اسم الفئة (Slug)

هذه هي “الاسم المختصر” (slug) للفئة التي تريد تمييزها. يمكنك العثور عليه في إعدادات الفئة.

إذا كنت بحاجة إلى تمييز فئة فرعية، فيجب عليك استخدام اسم الفئة “الأصلية” (Parent)، ثم اسم الفئة الفرعية مفصولًا بـ /.

على سبيل المثال، إذا كانت هناك فئة فرعية مميزة باسم videos أردت تمييزها، سأستخدم:

premium/videos

الأذونات

لاحظ أن المستخدمين الذين لديهم أذونات قراءة للفئة المميّزة فقط هم من سيرون التمييز، بما في ذلك تسمية الرأس. يمكنك تغيير أذونات الفئة في إعدادات “الأمان” الخاصة بالفئة.

الخلفية

هذه قيمة سيتم منحها لخاصية background في CSS الخاصة بشارة الفئة. يمكنك استخدام أي إدخال هنا يدعمه هذا الخاصية.

background - CSS: Cascading Style Sheets | MDN

تقوم خاصية background المختصرة في CSS بتعيين جميع خصائص نمط الخلفية دفعة واحدة، مثل اللون، الصورة، الأصل والحجم، أو طريقة التكرار.

على سبيل المثال linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%).

لون النص

هذه قيمة سيتم منحها لخاصية color في CSS الخاصة بشارة الفئة. هذا يؤثر على لون النص. يمكنك استخدام أي إدخال هنا يدعمه هذا الخاصية.

color - CSS: Cascading Style Sheets | MDN

تقوم خاصية color في CSS بتعيين قيمة لون المقدمة لنص العنصر وزخارف النص، وتعيين قيمة currentcolor. يمكن استخدام currentcolor كقيمة غير مباشرة في خصائص أخرى وهي القيمة الافتراضية لخصائص اللون الأخرى، مثل…

في حالتنا هذه، هذه القيمة هي #88562e.

تسمية الرأس

تخدم هذه القيمة غرضين. فهي تحدد:

1. ما إذا كانت الفئة المميّزة ستحصل على تسمية في الرأس؛ و
2. محتوى هذه التسمية.

إذا لم تكن ترغب في وجود تسمية في الرأس، فلا تقم بتضمين هذه القيمة على الإطلاق.

تدعم هذه القيمة النصوص، الكيانات HTML، والإيموجي.

قيمة تسمية الرأس هنا هي: :star:&nbsp&nbspPremium. هذا يعني:

1. الكود المختصر لإيموجي النجمة: :star:
2. كيانين HTML للمسافة غير القابلة للكسر (كل منهما يضيف مسافة بيضاء): &nbsp&nbsp
3. نص التسمية الخاص بنا: Premium

يمكنك العثور على القائمة الكاملة لـ كودات الإيموجي المختصرة هنا، وعلى القائمة الكاملة لـ كيانات HTML هنا.

تسمية الرأس للجوال

تخدم هذه القيمة أيضًا غرضين. فهي تحدد:

1. ما إذا كانت الفئة المميّزة ستحصل على تسمية رأس للجوال؛ و
2. محتوى تسمية رأس الجوال.

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

الفئة الأصلية

يمكنك إنشاء قائمة منسدلة في الرأس عن طريق تعيين “الفئة الأصلية” (parent) لعنصر ما. أدخل اسم الفئة كالعنصر السادس، وسيصبح العنصر ذو الصلة عنصرًا في قائمة فرعية لتلك الفئة في الرأس. كما هو الحال مع العنصر الأول، تأكد من استخدام اسم الفئة هنا، والذي يمكنك استرداده من نافذة إعدادات الفئة.

رابط بديل

بشكل افتراضي، يربط كل عنصر فئة بالفئة التي يتعلق بها. يمكنك تغيير الرابط عن طريق إضافة عنوان URL كالعنصر السادس في كتلة الإعداد.

[jrgong]

So simple, yet so impactful. I have had the plan for a while to CSS certain parts of the forum to highlight posts from the paid customer categories. That makes everything much easier now. Thx for the work, this is amazing!

Have you thought about highlighting topics in the topic list when all categories are active in the category picker? For example add the star before the topic title?

[angus (Angus McLeod)]

The highlight works in all places the badge appears, so it’s there in the list already

Topic List	Site Menu

Categories page

See further https://try.thepavilion.io

[outofthebox (Carson)]

@Angus, you’re an amazing developer and it is a tremendous pleasure to collaborate with you. Thank you for your creativity, excellence, and thoroughness. You are a gift to the Discourse community.

[jordan.vidrine]

This is a pretty cool component, nice work

[codinghorror (Jeff Atwood)]

ooo that feels so… preeemium

[Anatolia]

@angus

I thought there is a sidebar at first glance. A sidebar with this style could be nice.

[Paracelsus]

Great component, really nice.

@angus I would like to know how to put a border-radius on the highlighted background, thanks in advance.

[angus (Angus McLeod)]

@Paracelsus

I would like to know how to put a border-radius on the highlighted background, thanks in advance.

Due to the variety of contexts the category badge appears in this is a little complex. I might add a class to make this a bit easier, but for now you can do this:

### Header button
.highlight-category-button {
    border-radius: 4px;
}

### Badges
.badge-wrapper[class*=" updates "],
.extra-info-wrapper .categories-wrapper .badge-wrapper[class*=" updates "],
.category-title-link-component[class*=" updates "] .category-text-title,
.select-kit.combo-box.category-drop .category-row[class*=" updates "] .badge-wrapper {
    &:before {
        border-radius: 4px;
    }
}

“updates” is the category slug in the example

Example: https://try.thepavilion.io/

[fzngagan (Faizaan Gagan)]

يدعم المكون الآن قائمة منسدلة للفئات.

إذا استخدمت اسم الرابط (slug) للفئة الأصلية كالعنصر السادس في الإعدادات، فستظهر قائمة منسدلة تحتوي على الفئات الفرعية كعناصر فيها.

ملاحظة: سيتعين عليك تمرير العنصر الخامس، أي (ترويسة الهاتف المحمول)، كقيمة فارغة إذا لم ترغب في استخدامه.

شكرًا لدعمك لهذا @outofthebox.

[outofthebox (Carson)]

عمل رائع @fzngagan!! فريق Pavilion مذهل.

[satonotdead]

هل من الممكن تمييز ليس فقط الـ slug، بل أيضًا .select-kit .select-kit-row.is-highlighted؟

أعتقد أن ذلك سيكون أفضل لعيوننا.

أتفق مع التعليقات: عملك رائع. كنت أبحث في موقع Pavilion وأختبر الكثير من الأمور.

آمل أن نعمل قريبًا على بعض الأفكار التي لدينا لمجتمعنا

[MarcP]

أولاً، شكرًا لك على هذا المكون الرائع.

@angus

قائمة المواضيع

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

العرض على الجوال أفضل من العرض على سطح المكتب:

[jrgong]

هل ما زال هذا يعمل مع أحدث الاختبارات التي تم اجتيازها؟ إذا كان الأمر كذلك، فهل لا تزال لديك الوثائق مؤرشفة في مكان ما؟ @angus

[angus (Angus McLeod)]

لقد ألصقت التوثيق في المنشور أعلاه. أخبرني إذا لم يكن يعمل.

[jrgong]

رائع! خاصة جزء التدرج كان حاسمًا لتحقيق هدفي! شكراً جزيلاً!

[jrgong]

هل لا يزال أي شخص يستخدم هذا المكون الإضافي وربما وجد حلاً للمشكلة التالية؟
في الإصدار 2.9.0.beta9 و beta10، يتسبب المكون الإضافي في اختفاء الفئة النظامية “meta” من حقل القائمة المنسدلة للفئة وكذلك قائمة المواضيع.

سجل المنتدى فارغ، الشيء الوحيد في سجل وحدة التحكم هو:

[THEME 190 'Category Highlighter'] لمنع الأخطاء في الاختبارات، أضف مفتاح `pluginId` إلى استدعاء `modifyClass` الخاص بك. سيضمن هذا تطبيق التعديل مرة واحدة فقط. 3 plugin-api.js:19