按类别划分的工具栏位于网站标题下方

开发
8

这里有一个我为您准备的实用示例：

这是我放在 After Header 选项卡中的 HTML

<div id="category-general-banner" class="below-header-banner">
    <h2>🚀 Here's some content only displayed on the <strong>General</strong> category</h2>
</div>

<div id="category-site-feedback-banner" class="below-header-banner">
    <h2>✨ Here's some content only displayed on the <strong>Site Feedback</strong> category</h2>
</div>

这是我放在 CSS 选项卡中的 SCSS（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

希望这对您有进一步的帮助！

1 个赞