Hier ist ein praktisches Beispiel, das ich für Sie erstellt habe:
Hier ist das HTML, das ich in den Tab After Header eingefügt habe
<div id="category-general-banner" class="below-header-banner">
<h2>🚀 Hier sind einige Inhalte, die nur in der Kategorie <strong>Allgemein</strong> angezeigt werden</h2>
</div>
<div id="category-site-feedback-banner" class="below-header-banner">
<h2>✨ Hier sind einige Inhalte, die nur in der Kategorie <strong>Website-Feedback</strong> angezeigt werden</h2>
</div>
Hier ist das SCSS, das ich in den Tab CSS eingefügt habe (Discourse verwendet SCSS, das CSS-Funktionen erweitert):
$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;
}
}
}
Hier ist das Ergebnis. Jedes Banner erscheint nur in seiner jeweiligen Kategorie.
Ich hoffe, das hilft weiter!