以下は、あなたのために作成した実践的な例です。
これはヘッダーの下タブに入力したHTMLです。
<div id="category-general-banner" class="below-header-banner">
<h2>🚀 一般カテゴリにのみ表示されるコンテンツはこちら</strong></h2>
</div>
<div id="category-site-feedback-banner" class="below-header-banner">
<h2>✨ サイトフィードバックカテゴリにのみ表示されるコンテンツはこちら</strong></h2>
</div>
これはCSSタブに入力したSCSSです(DiscourseはCSSを拡張するSCSSを使用します)。
$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;
}
}
}
結果は以下の通りです。各バナーはそれぞれのカテゴリにのみ表示されます。
さらなるお役に立てれば幸いです!
