لقد راجعت منشورًا سابقًا كتبته كريز وقمت بتكييفه مباشرةً ليكون شيئًا يمكنك استخدامه كقاعدة. تم تغطية الكثير مما ورد هنا من قبله في موضوعه الأصلي.
https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949
سيتم إضافة جميع الأكواد إلى قسم <head> (head_tag.html) في سُمكك (Theme).
سيقوم هذا القسم الأول بالتحقق مما إذا كانت الصفحة التي تتصفحها هي “الصفحة الرئيسية”.
سنقوم بعد ذلك بالحصول على تصنيفات الموقع باستخدام طريقة Category.list() على فئة التصنيف.
ثم سنقارن هذه التصنيفات بالتصنيفات التي تريد إبرازها. ستكون هذه التصنيفات موجودة في مصفوفة definedFeaturedCategories المحددة في الكود أدناه. سيتم تعيين تلك التي تسمح بها للمكون المراد تمريره إلى قالب للتصيير.
<script type="text/discourse-plugin" version="0.8">
const Category = require("discourse/models/category").default;
// سنستخدم نموذج Category لاسترجاع تصنيفات الموقع
api.registerConnectorClass('above-main-container', 'featured-categories', {
// above-main-container هو منفذ الإضافة (plugin outlet)،
// featured-topics هو اسم المكون المخصص الخاص بك
setupComponent(args, component) {
api.onPageChange((url, title) => {
console.log(url,title)
if ((url === "/") || (url === "/latest") ) {
// عند تغيير الصفحة، تحقق مما إذا كان الرابط يطابق
// إذا لم تكن صفحتك الرئيسية هي /latest، غيّر هذا إلى /categories
$('html').addClass('custom-featured-categories');
// أضف فئة إلى وسم HTML لتسهيل استهدافها عبر CSS
let definedFeaturedCategories = ["uncategorized","blog","two"]
// مصفوفة التصنيفات التي تريد إبرازها
// تأكد من وضع عناوين التصنيفات بحروف صغيرة
let featuredCategories = [];
categories = Category.list();
for (let cat of categories) {
if (definedFeaturedCategories.includes(cat.name.toLowerCase())) {
// تقوم فقط بإدراج التصنيفات التي تريد إبرازها في المصفوفة المراد تصييرها
featuredCategories.push(cat)
}
}
component.set('featuredCategories', featuredCategories)
} else {
// إذا لم تطابق الصفحة الروابط المذكورة أعلاه، افعل هذا:
$('html').removeClass('custom-featured-categories');
// أزل الفئة المخصصة الخاصة بنا
component.set('categories',[])
// اضبط التصنيفات على مصفوفة فارغة لتعطيل التصيير
}
});
}
});
</script>
يقوم هذا القسم التالي بحقن القالب الخاص بالمكون الذي تم إنشاؤه أعلاه في منفذ الإضافة above-main-container. سيقوم باستدعاء categories-wrapper المخصص الذي تم إنشاؤه في الخطوة الثالثة وتحديد categories لتكون featuredCategories التي تم إنشاؤها أعلاه.
<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/featured-categories">
<div class="custom-featured-categories-wrapper">
{{categories-wrapper categories=featuredCategories}}
<!-- استخدم قالب categories-wrapper الذي تم إنشاؤه أدناه -->
<!-- حدد التصنيفات لتكون featuredCategories التي تم إنشاؤها في السكربت أعلاه -->
</div>
</script>
يُنشئ القسم الثالث قالب categories-wrapper المخصص بلغة Handlebars لتصيير التصنيفات المميزة. تم تكييفه مباشرةً من قالب categories-only.hbs الخاص بـ Discourse المستخدم في صفحة التصنيفات في Discourse.
<script type="text/x-handlebars" data-template-name="components/categories-wrapper">
<!-- هذا ينشئ قالب مكون يُسمى 'categories wrapper' -->
<!-- تم تكييف جميع أكواد هذا القالب من قالب صفحة التصنيفات الخاص بـ Discourse نفسه
https://github.com/discourse/discourse/blob/acd1693dac1bff6ff50250d942134bc48a27ff14/app/assets/javascripts/discourse/templates/components/categories-only.hbs -->
<div class="top-categories-wrapper">
{{#each categories as |c|}}
<div class="top-category-column-one">
{{category-title-link category=c}}
{{#if c.escription}}
<div class="category-description">
{{dir-span c.description}}
</div>
{{/if}}
{{#if c.isGrandParent}}
<table class="category-list subcategories-with-subcategories">
<tbody>
{{#each c.subcategories as |subcategory|}}
<tr
data-category-id={{subcategory.id}}
data-notification-level={{subcategory.notificationLevelString
}}
class="{{if
subcategory.description_excerpt
"has-description"
"no-description"
}}
{{if subcategory.uploaded_logo.url "has-logo" "no-logo"}}"
>
<td
class="category"
style={{border-color subcategory.color}}
>
{{category-title-link tagName="h4" category=subcategory}}
{{#if subcategory.description_excerpt}}
<div
class="category-description subcategory-description"
>
{{{dir-span subcategory.description_excerpt}}}
</div>
{{/if}}
{{#if subcategory.subcategories}}
<div class="subcategories">
{{#each subcategory.subcategories as |subsubcategory|
}}
{{#unless subsubcategory.isMuted}}
<span class="subcategory">
{{category-title-before category=subsubcategory
}}
{{category-link subsubcategory hideParent="true"
}}
</span>
{{/unless}}
{{/each}}
</div>
{{else if subcategory.description_excerpt}}
<div
class="category-description subcategory-description"
>
{{{dir-span subcategory.description_excerpt}}}
</div>
{{/if}}
</td>
</tr>
{{/each}}
</tbody>
</table>
{{else if c.subcategories}}
<div class="subcategories">
{{#each c.subcategories as |subcategory|}}
{{#unless subcategory.isMuted}}
<span class="subcategory">
{{category-title-before category=subcategory}}
{{category-link subcategory hideParent="true"}}
{{category-unread category=subcategory}}
</span>
{{/unless}}
{{/each}}
</div>
{{/if}}
</div>
<div class="top-category-column-two">
<span class="topics-header">
Topics
</span>
<span class="topics-count">
{{c.topic_count}}
</span>
{{category-unread category=c tagName="div" class="unread-new"}}
</div>
{{/each}}
</div>
</script>
هذا يجب أن يساعدك في البدء بالقيام بما طلبته في منشورك الأصلي (OP).
بالنسبة لتنسيق لون كل مربع تصنيف وفقًا لألوانه المخصصة المحددة، في القسم الثالث، يمكنك ترميز الأنماط يدويًا باستخدام # + c.color للوصول إلى كود لون التصنيف.
بصرف النظر عن ذلك، يمكن إجراء التنسيق في ملف common.scss.
