Панель инструментов под заголовком сайта для каждой категории

Разработка
8

Вот практический пример, который я подготовил для вас:

Вот HTML-код, который я разместил на вкладке After Header:

<div id="category-general-banner" class="below-header-banner">
    <h2>🚀 Вот контент, отображаемый только в категории <strong>General</strong></h2>
</div>

<div id="category-site-feedback-banner" class="below-header-banner">
    <h2>✨ Вот контент, отображаемый только в категории <strong>Site Feedback</strong></h2>
</div>

Вот SCSS-код, который я разместил на вкладке CSS (Discourse использует SCSS, расширяющий возможности CSS):

$category_classes: "general", "site-feedback";

.below-header-banner {
    display: none;
}

@each $cat in $category_classes {
    body.category-#{$cat} {
        #category-#{$cat}-banner.below-header-banner {
            display: block;
        }
    }
}

Вот результат. Каждый баннер отображается только в своей категории.

image
image2497×1440 139 KB

Надеюсь, это поможет!