نظام ألوان فريد لفئة

مطور
1

تحياتي.

أقوم بنقل منتدى قديم إلى Discourse وكان للموقع الأصلي سمة فريدة (بما في ذلك شعار رأس فريد) لإحدى فئاته.

حلي الحالي هو مكون سمة يبدو كالتالي:

CSS:

body.category-target-category{
/// استبدل #hexcodes بقيم الألوان التي تختارها
  --primary: #primaryhexcode;
  --secondary: #secondaryhexcode;
  --tertiary: #tertiaryhexcode;
/// استمر في أي/جميع قيم الألوان المطلوبة
}

HTML/JS:

<script type="text/discourse-plugin" version="0.2.0">
    api.onPageChange(() => {
        var logo = document.getElementById("site-logo");
        var categories = document.getElementsByClassName("category-target-category");
        if(categories.length > 0)
        {
           logo.src = "category-specific-logo-url";
        }
        else
        {
            logo.src = "standard-logo-url";
        }
    });
</script>

حاليًا، يتعين عليّ المرور عبر كل قيمة لون محتملة مذكورة في color_definitions.scss لتجاوزها. أعتقد أن القيم لهذا الملف يتم إنتاجها من foundation/color_transformations.scss، والذي يقوم بإنشائها من القيم الموجودة في foundation/colors.scss. أعرف أنه يمكنك تجاوز قيم سمة الألوان الجذرية إما عبر قائمة المسؤول أو في ملف about.json لمكون السمة، ولكن أعتقد أن هذه التغييرات تحدث على مستوى الموقع بالكامل.

هل هناك طريقة أكثر كفاءة لتخصيص فئة معينة بخلاف سرد جميع المتغيرات التي يزيد عددها عن 100 في color_definitions.scss؟ على سبيل المثال، هل يمكن تعديل ملف foundation/colors.scss عبر مكون سمة؟

شكراً لمساعدتك!

2

مرحبًا @Rhababo :wave: مرحبًا بك في ميتا :slight_smile:

إذا لم تكن قد عملت سابقًا مع قوالب Discourse وتطويرها، أنصحك بالبدء بالموارد هنا:

أيضًا، على سبيل المثال، يمكنك تغيير شعار الموقع ولون الرأس وحتى ألوان الأيقونات لفئة معينة باستخدام كود CSS يشبه هذا:

.category-<category-slug> .d-header {
    background: rgba(#ce0303, 0.90);
    .d-header-icons .d-icon  {
        color: #cccccc;
    }
    .header-sidebar-toggle button .d-icon {
        color: #cccccc;
        &:hover {
            color: #999999;
        }
    }
}    
    
.category-<category-slug> .d-header #site-logo.logo-small {
	content:url($small-logo);
}

.category-<category-slug> .d-header #site-logo.logo-big {
	content:url($big-logo);
}

إذا قمت ببساطة بإنشاء قالب جديد، يمكنك إضافة الكود ورفع الشعارات كملفات مرفقة. \u003ccategory-slug\u003e هو اسم الفئة بحروف صغيرة يظهر في حقل عنوان URL في المتصفح (افصل بين الفئات الرئيسية والفرعية بعلامة “-” شرطات، كما في parentcategory-subcategory.

توجد أيضًا مكونات تخصيص Customization > Theme component مختلفة مثل هذا التي يمكنك البحث عنها:

3

شكراً لك يا ليلي على مساعدتك ومواردك!

أنا أقدر حقًا تعليمات CSS للشعار. إنها أكثر أناقة بكثير من برنامجي النصي الأخرق.

سيحل حلك بالتأكيد مشكلتي. على الرغم من أن تحديد كل عنصر وترميز اللون له مباشرة بدا أمرًا مملاً. أتساءل عما إذا كانت هناك طريقة للاستفادة من الآلية التي يستخدمها ديسكورس لإنشاء لوحة الألوان الخاصة به من الألوان الأساسية الـ 12 تقريبًا الموجودة في colors.scss. أعتقد أن القيام بذلك قد يتطلب مكونًا إضافيًا بدلاً من مكون سمة، وهذا تحدٍ ليوم آخر.

شكرًا!