ما مدى صعوبة جعل واجهة مستخدم Discourse تشبه Flarum؟

[bts (Brendan Schlagel)]

شكرًا لك @erlend_sh، ملاحظة ممتازة! لم أكن قد رأيت هذا الموضوع بعد. نعم، قضينا بعض الوقت في العام الماضي على هذا بالضبط، نحاول الحصول على شيء قريب من رؤوس Flarum. هذا هو الشكل الذي يبدو عليه على موقعنا:

وهنا جوهر كود HTML / CSS الذي توصلنا إليه لهذا—

CSS:
(كل هذا في “common” — بالإضافة إلى ذلك، هناك أيضًا بعض التعديلات البسيطة على الهوامش / الحشوات لسطح المكتب مقابل الهاتف المحمول لم أدرجها أدناه.)

/* GENERAL */

body {
    overflow-x: hidden;
}

.custom-cat-header {
	display: block;
	margin-left: -9999px!important;
	padding-left: 9999px!important;
	margin-right: -9999px!important;
	padding-right: 9999px!important;
	text-align: center;
	margin-top: -18px;
}

.custom-cat-header p {
    color: #dddddd;
}

.custom-cat-header h1 {
    display: inline-block;
    margin-top: 20px;
    color: #dddddd;
    background-color: #222222;
    border-radius: 5px;
    width: inherit;
}

/* ALL CATEGORIES */
.custom-cat-header-all-categories {display: none;}
body.navigation-categories .custom-cat-header-all-categories, body.navigation-topics .custom-cat-header-all-categories {
    display: block; 
    background-color: #b1880b;
}
.custom-cat-header-all-categories h1 {color: #d4a411;}

/* PLAYING TECHNIQUE */
.custom-cat-header-playing-technique {display: none;}
body.category-playing-technique .custom-cat-header-playing-technique {
    display: block; 
    background-color: #9c2116;
}
.custom-cat-header-playing-technique h1 {color: #d62e1f;}
body.category-playing-technique .custom-cat-header-all-categories {display: none;}

/* repeat for all other categories! */

HTML (في قسم “بعد الرأس”):

<!-- ALL CATEGORIES -->
<div class="custom-cat-header custom-cat-header-all-categories">
    <a href="https://forum.troygrady.com/"><h1>All Categories</h1></a>
    <p>Welcome to the Cracking the Code Forum!</p>
</div>

<!-- PLAYING TECHNIQUE -->
<div class="custom-cat-header custom-cat-header-playing-technique">
    <a href="https://forum.troygrady.com/c/playing-technique"><h1>Playing Technique</h1></a>
    <p>Pickslanting, chunking, fretting, motion mechanics — ask your technical questions here.</p>
</div>

<!-- repeat for all other categories! -->

هذا جميل بصريًا جدًا… لكنه أيضًا مخصص للغاية / غير تقليدي مع الكثير من التعديلات اليدوية المتكررة. من السهل بما يكفي لفئاتنا التي يبلغ عددها حوالي عشرة، لكن لمزيد من المرونة، يمكنني أن أرى أن هذا سيكون رائعًا كإضافة بسيطة تقوم بـ:

• جلب إدراج أوصاف الفئة تلقائيًا
• معالجة حسابات الألوان تلقائيًا (ألواننا مشابهة لألوان الفئات، لكننا قمنا يدويًا بجعل لون خلفية الرأس أغمق قليلاً ولون نص “الحبة” h1 أفتح قليلاً لتحسين التباين / القراءة).

ليس لدي خبرة في إنشاء الإضافات. لكن حاليًا، يبدو أن مكون السمة الذي يجمع بين ما توصلنا إليه أنا و @lll هو الخطوة التالية الجيدة!