Discourse قابل للتخصيص بشكل مذهل!
الهدف من هذا الموضوع هو إظهار كيفية الاستفادة من جميع الخيارات الرائعة المتاحة لك كمطوّر قوالب. تعرف… حتى لا تضطر إلى إعادة اختراع العجلة 
متغيرات؟ أي متغيرات؟
تغطي المتغيرات مجموعة كبيرة من الأشياء، بدءًا من أحجام الخطوط إلى الألوان إلى قيم z-index. يمكنك استخدام وتجاوز الغالبية العظمى من المتغيرات في محرر القوالب الخاص بك.
الألوان
هناك العديد من الألوان المتاحة للاستخدام أو التجاوز في قالبك. يمكنك رؤية مجموعة الألوان الأساسية في واجهة الإدارة، تحت تخصيص > ألوان. إليك لقطة شاشة لمخطط الألوان الافتراضي:
هذه الألوان متاحة كخصائص CSS مخصصة يمكنك استخدامها وتجاوزها عبر هذه الصيغة:
var(--primary)
var(--secondary)
var(--tertiary)
var(--quaternary)
var(--header_background)
var(--header_primary)
var(--highlight)
var(--danger)
var(--success)
var(--love)
استخدام متغيرات الألوان في SCSS (مثل
$primary،$secondaryوما إلى ذلك) لم يعد مدعومًا. يستخدم نواة Discourse خصائص CSS المخصصة منذ أغسطس 2020، ونوصي جميع القوالب الحالية بتبديل متغيرات SCSS إلى خصائص CSS المخصصة. للتلاعب المعقد بالألوان، راجع هذا الدليل.
إذن كيف يمكنني استخدامها؟
ابدأ بإنشاء قالب جديد أو إذا كنت تستخدم قالبًا مبنيًا على git، فأنشئ مكوّن قالب جديد وأضفه إلى قالبك.
لنفترض أنني أريد تعيين خلفية <body> لتطابق لون highlight في مخطط الألوان الحالي. حسنًا، يمكنني القيام بذلك على النحو التالي:
body {
background: var(--highlight);
}
سيتم سحب اللون تلقائيًا من مخطط الألوان الحالي، على النحو التالي:
(لا يُنصح باستخدام لون الخلفية هذا 
)
الآن، لنفترض أن مخطط الألوان الحالي غير مضبوط على “مخطط فاتح” للقالب الحالي. بدلاً من ذلك، لنفترض أنه مضبوط على المخطط “الداكن” الافتراضي، فسيُنتج نفس الشيفرة نتيجة مختلفة لأن المتغير مختلف.
يمكنك رؤية كيف تتبع خلفية <body> متغير highlight الحالي مهما كان في مخطط الألوان الحالي.
هذا يغطي متغيرات الألوان الأساسية. يستخدم Discourse أيضًا ألوان مشتقة يمكن استخدامها أو تجاوزها. يمكنك رؤية القائمة الكاملة للألوان من مخطط الألوان الحالي في مفتش المتصفح الخاص بك، إليك لقطة شاشة للقالب الافتراضي:
لاحظ أنه يمكنك فحص هذه الألوان على أي مثيل من Discourse، دون الحاجة إلى المصادقة. على مثيل Discourse الخاص بك، يمكنك (و_يجب_) أيضًا استخدام إضافة styleguide، والتي أصبحت الآن مدمجة في النواة. فعّلها وتوجّه إلى /styleguide، وسترى جميع عناصر واجهة Discourse، بما في ذلك الألوان:
(هذا هو مخطط ألوان Grey Ember أعلاه.)
حسنًا، لننتقل إلى مواضيع أكثر تقدمًا:
متغيرات متقدمة
انظر إلى هذا الملف في مستودع Discourse:
هذا هو المكان الذي تُعرّف فيه معظم المتغيرات. تمامًا مثل الألوان، هذه المتغيرات متاحة سحريًا للاستخدام في أوراق أنماط القوالب.
سأحاول تفكيك محتوى الملف أدناه:
العرض
$small-width: 800px !default;
$medium-width: 995px !default;
$large-width: 1110px !default;
هذه مفيدة جدًا إذا كنت تريد أن يطابق قالبك سلوك Discourse الأصلي، خاصة في استعلامات الوسائط، على سبيل المثال، انظر إلى الأجزاء ذات الصلة من scss المُجمّع مسبقًا لـ .user-info:
.user-info {
&.medium {
flex: 0 0 32%;
margin: 0 2% 4vh 0;
@media screen and (max-width: $small-width) {
flex: 0 0 48%;
margin-right: 0;
}
}
}
لاحظ كيف يُغذّى استعلام الوسائط بمتغير لتحديد نقطة قطع للشاشات الصغيرة وتطبيق أنماط مختلفة.
الخطوط
--base-font-size: 0.938em; // eq. to 15px
--base-font-size-larger: 1.063em; // eq. to 17px
--base-font-size-largest: 1.118em; // eq. to 19px
// Font-size definitions, multiplier ^ (step / interval)
--font-up-6: 2.296em;
--font-up-5: 2em;
--font-up-4: 1.7511em;
--font-up-3: 1.5157em;
--font-up-2: 1.3195em;
--font-up-1: 1.1487em; // 2^(1/5)
--font-0: 1em;
--font-down-1: 0.8706em; // 2^(-1/5)
--font-down-2: 0.7579em; // Smallest size we use based on the 1em base
--font-down-3: 0.6599em;
--font-down-4: 0.5745em;
--font-down-5: 0.5em;
--font-down-6: 0.4355em;
هذا أيضًا مباشر إلى حد ما، لدى Discourse نظام رائع لتغيير حجم الخطوط، لذا يجب عليك الاستفادة منه.
الوحدات المستخدمة هي em وبالتالي ستكون نسبية إلى --base-font-size الذي يُستخدم على عنصر <html>.
لذا:
.btn {
font-size: var(--font-up-6);
}
يتم تجميعه إلى:
(–base-font-size _ --font-up-6) أو (14px _ 2.296) = 32.14px
أو هذا:
ارتفاعات الأسطر
--line-height-small: 1;
--line-height-medium: 1.2; // Headings or large text
--line-height-large: 1.4; // Normal or small text
يمكن استخدام هذه المتغيرات تمامًا مثل المثال السابق. لاحظ أنها قيم بلا وحدات. إليك ما يعنيه ذلك:
قيم Z-index
$z-layers: (
"max": 9999,
"fullscreen": 1700,
"modal": (
"tooltip": 1600,
"popover": 1500,
"dropdown": 1400,
"content": 1300,
"overlay": 1200,
),
"mobile-composer": 1100,
"header": 1000,
"tooltip": 600,
"composer": (
"popover": 500,
"content": 400,
),
"dropdown": 300,
"usercard": 200,
"timeline": 100,
"base": 1,
);
يمكن استخدام هذه كما ناقشنا هنا:
div {
z-index: z("header");
}
“أو عند التعشيق، على هذا النحو:”
div {
z-index: z("modal", "dropdown");
}
“يمكنك أيضًا القيام بحسابات أساسية كما تتوقع:”
div {
z-index: z("base") + 1;
}
كتل الشيفرة أعلاه هي جزء من الاقتباس لكنني نقلتها للخارج من أجل التنسيق
الآن إليك مثال:
ضع مربعًا فوق الترويسة:
.zbox {
position: fixed;
top: 0;
left: 0;
height: 200px;
width: 200px;
background: red;
z-index: z("header") + 1;
}
ضع مربعًا تحت الترويسة:
.zbox {
position: fixed;
top: 0;
left: 0;
height: 200px;
width: 200px;
background: red;
z-index: z("header") - 1;
}
ظلال الصناديق
$box-shadow: (
"modal": 0 8px 60px rgba(0, 0, 0, 0.6),
"composer": 0 -1px 40px rgba(0, 0, 0, 0.12),
"menu-panel": 0 6px 14px rgba(0, 0, 0, 0.15),
"card": 0 4px 14px rgba(0, 0, 0, 0.15),
"dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.2),
"header": 0 2px 4px -1px rgba(0, 0, 0, 0.25),
"kbd": (
0 2px 0 rgba(0, 0, 0, 0.2),
0 0 0 1px dark-light-choose(#fff, #000) inset,
),
"focus": 0 0 6px 0 $tertiary,
"focus-danger": 0 0 6px 0 $danger,
);
كما يمكنك أن ترى إلى حد ما، فقد تم إنجاز معظم العمل نيابةً عنك عندما يتعلق الأمر بالمتغيرات، ولا تحتاج في معظم الحالات إلا إلى الاستفادة مما هو موجود بالفعل.
يبدو استخدام ظلال الصناديق على هذا النحو:
.d-header {
box-shadow: shadow("focus");
}
يجب أن يجعل هذا الترويسة تستخدم ظل الصندوق الخاص بالتركيز. وإذا فحصنا للتأكيد:
هذا المنشور هو ويكي، لذا عدّله حسب الحاجة 
هذا المستند خاضع للتحكم بالإصدار - اقترح التغييرات على github.