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

الدعم
1

How woud i achieve something like that?

https://gyazo.com/973b2e2525e43beeb9000b67bbae803e

When i add pictures to my Category they are all shrunk and ugly.

is there a custom plugin or something?

إعجابَين (2)
2

Have a look at Category Banners. It is a theme component that you can install on your site to add a banner to your categories. The “Additional CSS styling” section at the bottom of the topic gives details about how to set a background image for the banner.

3 إعجابات
3

From the looks of it it seems like thats a banner for the category, i need one that shows the section, to explain myself better…

https://forum.fivem.net/categories

thats what i want

5

This will require some custom work. Have a look at the theme guide if you want to do it yourself or create a topic in the marketplace category if you want to hire someone to do it for you.

إعجابَين (2)
6

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

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

7

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

إعجاب واحد (1)
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/

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

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

4 إعجابات
11

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

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

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