كيف يمكنني إضافة لافتات التصنيفات؟

الدعم
1

كيف يمكنني تحقيق شيء مثل ذلك؟

عند إضافة صور إلى الفئة الخاصة بي، تصبح جميعها مصغرة وغير جميلة.

هل هناك إضافة مخصصة أو شيء مشابه؟

2

اطّلع على Category Banners. إنها مكون موضوع يمكنك تثبيته على موقعك لإضافة لافتة إلى التصنيفات الخاصة بك. يوفّر قسم “تنسيق CSS الإضافي” في أسفل الموضوع تفاصيل حول كيفية تعيين صورة خلفية للافتة.

3

يبدو من المظهر أنها لافتة للفئة، أحتاج إلى واحدة تظهر القسم، لتوضيح نفسي بشكل أفضل…

هذا ما أريده

5

سيكون ذلك يتطلب بعض العمل المخصص. اطلع على دليل السمات إذا كنت ترغب في القيام بذلك بنفسك، أو أنشئ موضوعًا في فئة Marketplace إذا كنت ترغب في توظيف شخص للقيام بذلك نيابةً عنك.

6

هذا ما يستخدمونه لكنني لا أستطيع جعله يعمل

discourse-misc-html-css (2).zip (2.5 كيلوبايت)

7

هناك العديد من الروابط والعناصر التي يمكن تعديلها في كل من CSS وفي علامة التبويب Head، هل قمت بذلك؟

8

هذا هو CSS المخصص الذي تستخدمه FiveM اليوم، وهذا ما أرسلته لي فريق الإدارة، لكنني لا أعرف كيف أجعله يعمل.

discourse-misc-html-css (2).zip (2.5 KB)

9

لذا، لقد عملتُ على هذا لبعض الوقت، وقد نجح الأمر إلى حد ما

صورة

1586×1904 808 KB

والأمر يعمل بشكل رائع في الحقيقة

لكن في الأعلى، يتكرر بعض التصنيفات لسبب ما

1567×1821 748 KB

كيف يمكنني إصلاح هذا؟ وكيف أجعله لا يكرر التصنيفات؟

إليك إعداداتي
discourse-misc-html-css.zip (2.5 KB)

10

لذا الآن قمت بإصلاح الأمر لنفسي على الأقل

4d34f94999cfa96f6578d9b3d6d33707
4d34f94999cfa96f6578d9b3d6d337072284×1940 911 KB

أولاً، قم بتنزيل هذا الملف
discourse-misc-html-css (2).zip (2.5 KB)

إذا لم تكن متأكدًا من كيفية إضافة هذا الملف إلى موقعك، فراجع هذا الدليل أولاً

انتقل إلى Misc/HTML+CSS ثم إلى قسم CSS، حيث ستحتاج إلى تعديل بعض الإعدادات.

أولاً، انسخ هذا السطر:

        &.fivem > .category-list {
        &:before {
            content: 'FiveM';
        }
        
        background-image: url(https://i.imgur.com/1YZTip0.png);
    }

ثم غيّر الاسم الذي تريد أن يظهر على الشعار الخاص بك.

في مثالنا، سأستخدم اسم test1:

        &.test1 > .category-list {
        &:before {
            content: 'test1';
        }
        
        background-image: url(https://i.imgur.com/1YZTip0.png);
    }

وبذلك تنتهي من قسم CSS.

ثم انتقل إلى قسم .

انزل إلى الأسفل حتى تجد:

<script type='text/x-handlebars' data-template-name='components/categories-with-featured-topics'>

ابحث عن القسم المسمى:
<div class="category-thing fivem">

ثم انسخ الكود التالي:

<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
                  latestTopicOnly=latestTopicOnly
                  showTopics=true}}
</div>

وغيّره ليتناسب مع إعداداتك. في مثالنا، استخدمنا test1:

<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
              latestTopicOnly=latestTopicOnly
              showTopics=true}}
</div>

ثم انتقل إلى الأسفل حتى تجد:
<script type='text/x-handlebars' data-template-name='mobile/components/categories-with-featured-topics'>

ابحث عن:

<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
              latestTopicOnly=latestTopicOnly
              showTopics=true}}
</div>

وغيّره ليتناسب مع إعداداتك. في مثالنا، سنغيّر fivem إلى test1:

<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
                  latestTopicOnly=latestTopicOnly
                  showTopics=true}}
</div>

ثم انتقل أكثر إلى الأسفل وابحث عن القسم التالي:

registerUnbound('filter-core', (categories) => {
   return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^fivem/i) && !a.read_restricted);
});

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

لذا سأضيف test1 كمثال:

registerUnbound('filter-core', (categories) => {
   return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^test1/i) && !a.name.match(/^fivem/i) && !a.read_restricted);
});

ثم انتقل إلى الأسفل وابحث عن القسم المسمى:

registerUnbound('filter-fivem', (categories) => {
   return categories.filter(a => a.name.match(/^fivem/i));
});

هنا، تريد استبدال fivem بالاسم الذي تريده. في مثالنا، سأضيف test1:

registerUnbound('filter-test1', (categories) => {
   return categories.filter(a => a.name.match(/^test1/i));
});

وبذلك تنتهي.

الآن، ما تريد فعله هو تغيير رابط التصنيف (Category Slug). إليك مثالًا:
2bf89bcdcb2f897364bb984c82d4e343

سيذهب هذا التصنيف تحت شريط test1.

أما باقي التصنيفات فستذهب تحت شريط CFX.RE الأساسي في هذا المثال.

إليك على سبيل المثال الإعدادات التي أستخدمها حاليًا على موقعي:
discourse-misc-html-css.zip (2.5 KB)

إذا أردت التحقق من ذلك، فإليك الرابط:
https://forum.tgacommunity.com/

أيضًا، هل يمكنك وضع علامة على هذا الموضوع كحل مُتّفق عليه؟

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

11

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

ولكن كلا الطريقتين تعملان، والأمر متروك لك في كيفية القيام بذلك. وكلا الطريقتين تعطيان نفس النتيجة.