لافتات الفئة

[Discourse]

	ملخص	يستخدم Category Banners تفاصيل التصنيفات الموجودة لإنشاء لافتات لصفحات التصنيفات الخاصة بك (بالنسبة للوسوم، راجع Discourse Tag Banners).
	معاينة	معاينة في منشئ مواضيع Discourse
	رابط المستودع	https://github.com/discourse/discourse-category-banners
	جديد في مواضيع Discourse؟	دليل المبتدئين لاستخدام مواضيع Discourse

تثبيت مكون هذا المظهر

بما أن هذا مكون مظهر رسمي (official) تُعتنى به فريق Discourse، فيمكن تقديم طلبات للدعم (Support)، وإبلاغ عن الأخطاء (bug)، وتحسينات تجربة المستخدم (ux)، وميزات جديدة (#feature) في الفئات المقابلة هنا على Meta، مع وسمها بوسم مكون المظهر المناسب. انقر على أحد الروابط أدناه لبدء واحد منها.

 الدعم  خطأ  تجربة المستخدم  ميزة

الميزات

يستخدم Category Banners تفاصيل التصنيفات الموجودة لإنشاء لافتات لصفحات التصنيفات الخاصة بك. يستخدم اسم التصنيف ووصفه ولونه لتوليد لافتة في أعلى صفحات التصنيف ذات الصلة (بالنسبة للوسوم، راجع Discourse Tag Banners).

يُعرّف وصف التصنيف بواسطة الفقرة الأولى في موضوع “تعريف التصنيف لـ…” الخاص بكل تصنيف. تُحدَّد ألوان خلفية/نص اللافتة من خلال إعدادات شارة التصنيف الخاصة بك.

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

الإعدادات

يأتي هذا المكون مع خيارات لتجاوز الافتراضيات:

الاسم	الوصف
show description	إظهار الوصف من منشئ “حول هذا التصنيف”
show mobile	إظهار اللافتات على الجوال
show subcategory	إظهار اللافتات للتصنيفات الفرعية
hide if no description	إخفاء اللافتات إذا لم يتم تعيين وصف التصنيف
show category logo	إظهار شعار التصنيف
align text	محاذاة النص
exceptions	لن تظهر اللافتة لهذه أسماء التصنيفات
categories	التصنيفات التي سيظهر لها لافتة
plugin outlet	يغير موضع اللافتة على الصفحة
show category icon	إظهار أيقونة التصنيف أو الرموز التعبيرية من إعدادات التصنيف *
override category icon color	عند استخدام أيقونات التصنيف، فإن تمكين هذا سيجعل الأيقونة تطابق لون نص اللافتة

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

ملاحظات التخصيص

إذا كنت ترغب في تخصيص هذه اللافتات باستخدام بعض CSS إضافي، يمكنك استهداف رؤوس تصنيفات محددة باستخدام هذا الهيكل (مثال: example-category هو اسم تصنيفك):

.category-title-header {
  &.category-banner-example-category {
        background: url(example.jpg);
  }
}

يضيف هذا المكون أيضًا الفئة category-header إلى وسم الجسم كهدف CSS إضافي.

مُستضاف لدينا؟ مكونات المظاهر متاحة للاستخدام في خططنا القياسية، والتجارية، والمؤسسية.

[Pad_Pors]

thanks for this wonderful theme , it helps users to note the category description much easier.

currently if there’s a link or a bold/italic word in the category description, in the banner it’ll appear as simple text (e.x. p style instead of a style). isn’t it better if the text style is preserved in the banner as well?

[jimmymckinney (Jimmy)]

Hi, I absolutely love this component! Thanks for your work!

I’m wondering, how can I style the background so that it automatically pulls the category background image and makes it the background of the banner. The backgrounds are already hidden anyways, so I want it to simply display as the background to the banner, rather than the page. I’ve tried this, but it didn’t work and I think I might be targeting the wrong variable:

return h('div.category-title-header' + " ." + category.slug, {
                    "attributes" : {
                        "style" : "background-color: #" + category.color + "; color: #" + category.text_color + "; background-image: url(\'" + 
                        category.background_url + "\');"
                    }
                }

Also, I’m wondering, how can I make the banner thinner for a fixed width design. When I attempted, it continued to be left-justified.

[jrgong]

I think it’s great that the category banners now render content in HTML.

Is there any way to display emojis there? In my case, I added three important links: Anfänger - Forum | Cannabisanbauen.net

I want to display the emojis next to each link as well. The original about topic is here: Über die Kategorie Anfänger - Anfänger - Forum | Cannabisanbauen.net

[awesomerobot (Kris)]

Not prefixing the category name is a recipe for disaster, so I’ve added category-banner- before the class name (e.g., category-banner-meta). If you were targeting the category name in your CSS you’ll just have to add category-banner- before it.

@jrgong

Is there any way to display emoji’s there?

I’m not sure, I don’t think our default category descriptions support them either, but I can look into it…

[Hang]

I want to use the uploaded background image from the category to put it in the background of the banner. I’ve edited the code and everything looks great. I wonder is there anything I can do to make the image load faster or together with the rest of the page? I want to avoid the flickering of the background for a second before the image appears.
Compressing image is certainly an option, but I wonder if there are others. Can I grab the thumbnail of the uploaded background image in the code? Thanks for all leads!

[Vanecx]

Hello, and thank you for this theme component!

I just tried installing it, following this tutorial (did exactly the same steps) to try this Category Banners component, but nothing happens. No banner in any of the categories. Is there anything that I might have done that doesn’t make it work? The only explanation I see is that the “bootstrap” warning blocks it?

[simon]

@Vanecx

No banner in any of the categories. Is there anything that I might have done that doesn’t make it work?

By default, the theme component does not display category banners if you have not set a category description for a category. This can be changed by unchecking the “Hide banners if category description not set” checkbox.

Category descriptions are set by editing the About category topic that Discourse automatically creates for every category. If you have either added category descriptions, or disabled the setting to hide banners for categories without descriptions, and you are still not seeing category banners, let us know. We’ll look into what is going on.

[Vanecx]

Thank you for your answer. I have checked and confirm that each category on the forum has a description. The “Hide banners…” option is now unchecked just to make sure but nothing changes.

As you can see on the images, everything looks normal in the settings :

No idea if it could have anything to do with the issue but just informing you it’s a Discourse installation on a Yunohost instance.

[downey (Michael Downey)]

Is there anyone other than me that thinks it would be nice to enable this same styling on Group listing pages (e.g. /g/foo) as well? The CSS, unfortunately, is not quite the same, and I guess it would require some additional handling of the various buttons to the right side of the group name, i.e., Request Message Delete

It could go a long way for a consistent look and feel, and make groups feel more like a “first class” citizen among the UI. (IMHO)

[jord8on (Jordan)]

أنا أحب هذه لافتات التصنيفات! شكرًا لك على إنشاء هذا المكون للقالب!

أود حقًا أن تظهر هذه اللافتة في الصفحة الرئيسية الرئيسية لمنتدياتنا حيث تعرض:

• مناقشات “الأحدث” أو
• مناقشات “الأعلى” أو
• “التصنيفات” أو
• “المتابعة” (إذا كنت تستخدم إضافة المتابعة )

هل توجد طريقة سهلة (نسبيًا) لإظهار لافتة عندما يختار المستخدم أيًا من هذه الخيارات، وفقًا لما تم اختياره؟

[Rhidian (Rhidian Bramley)]

@awesomerobot ، آمل أن تكون على ما يرام معي في مشاركة هذا هنا…

لقد قمت بإنشاء نسخة مشتقة من موضوع discourse-category-banners يُدعى

discourse-category-banner-boxes
https://github.com/naidihr/discourse-category-banner-boxes

يمكنك معاينته هنا

https://theme-creator.discourse.org/theme/Rhidian/discourse-category-banner-boxes

يقوم تقريبًا بنفس الشيء ولكن مع بعض التعديلات:

• يُعرض صندوق شريط التصنيف مدمجًا فوق العنوان الرئيسي بدلاً من عرضه بعرض كامل في الأعلى. وهذا يسمح بعرض موضوع شريط في الأعلى، على سبيل المثال discourse-versatile-banner.

• يُعرض صندوق شريط التصنيف بنفس أسلوب صناديق التصنيفات الفرعية الأصلية في discourse، وهي مكون أساسي في discourse. تُعد هذه الصناديق خيار عرض في إعدادات التصنيف في discourse إظهار قائمة التصنيفات الفرعية فوق المواضيع في هذا التصنيف. يعرض هذا الخيار اسم التصنيف الفرعي ووصفه كصف أو صندوق فوق قائمة المواضيع، باستخدام لون خلفية التصنيف كحد أيسر.

• إذا كان التصنيف تصنيفًا فرعيًا، فسيتم عرض اسم التصنيف كخريطة تنقل على النحو التالي - اسم التصنيف الأب: اسم التصنيف الفرعي

لقطة شاشة توضيحية لصندوق شريط الموضوع للتصنيف، فوق صناديق التصنيفات الفرعية الأصلية.

لقطة شاشة للتصنيف الفرعي، تُظهر مرجع الخريطة التنقلية للتصنيف الأب.

هذه هي محاولتي الأولى في تعديل موضوع. آمل أن يكون هذا مفيدًا؟

تحديث

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

Discourse Category Headers theme component

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. This theme component provides the foll…

[nathank (Nathan Kershaw)]

@awesomerobot

الاستثناءات: إذا لم ترغب في أن يكون للفئة لافتة، أضف اسمها هنا

هذا لا يعمل لدينا. جربت كلاً من رابط الفئة ومعرف الفئة، لكن اللافتة لا تزال ثابتة هناك. هل يعمل هذا لدى أي شخص آخر؟

[awesomerobot (Kris)]

لقد جربته للتو وهو يعمل لدي، حيث يبحث عن اسم الفئة حساس لحالة الأحرف name. عند التفكير في الأمر، لم يكن هذا أفضل طريقة لتنفيذه… ربما يمكنني تحسين ذلك.

[nathank (Nathan Kershaw)]

آه - هذا النوع مناسب لي! وقد ذكرت بالفعل ‘الاسم’ في الدليل أعلاه - لم أقرأ ذلك فحسب.

الاسم ليس بديهيًا جدًا لأننا لا نستخدمه حقًا لأي شيء آخر. لكنه يُعرض بكثرة. مجرد جعله أكثر وضوحًا في الإعدادات سيكون جيدًا على ما أعتقد.

[AntiMetaman]

بدلاً من إضافة استثناءات تحدد الفئات التي لن تعرض لافتة مُحمَّلة معينة، ألا يمكننا ببساطة تحديد الفئة التي يجب أن تعرض كل لافتة؟

[awesomerobot (Kris)]

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

إذا كنت ترغب في تطبيق لافتة لعدد قليل من الفئات، فقد تكون هناك خيار أفضل لمكون التصميم مصمم ليكون أقل عمومية وتغطية شاملة، مثل Versatile Banner أو تخصيص أحد الخيارات الموجودة في https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368

[Idan]

سيكون رائعًا لو أمكن رفع صورة لاستبدال النص.

[oca]

شكرًا لك على هذا المكوّن المفيد جدًا!

هل من الممكن إضافة ميزة صغيرة؟

• أضف فئة restricted إلى عنصر <span.discourse-category-banners> أو <div.category-title-header> عندما لا تكون الفئة عامة، تمامًا كما هو الحال مع شارة الفئة.

سيكون ذلك مفيدًا لتعديل الشريط باستخدام CSS إضافي لإظهار للمستخدم أن هذه الفئة خاصة.

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

لا أعرف حقًا كيفية تقديم طلبات السحب (PRs) بعد، لكن سأستخدم هذا كسبب جيد لتعلم ذلك إذا كنت مستعدًا لتعديلاتي.

[Drew-ART (Drew)]

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