Barra de ferramentas sob o cabeçalho do site por categoria

Dev
8

Aqui está um exemplo prático que criei para você:

Aqui está o HTML que coloquei na aba After Header

<div id="category-general-banner" class="below-header-banner">
    <h2>🚀 Aqui está algum conteúdo exibido apenas na categoria <strong>Geral</strong></h2>
</div>

<div id="category-site-feedback-banner" class="below-header-banner">
    <h2>✨ Aqui está algum conteúdo exibido apenas na categoria <strong>Feedback do Site</strong></h2>
</div>

Aqui está o SCSS que coloquei na aba CSS (Discourse usa SCSS, que estende os recursos do 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;
        }
    }
}

Aqui está o resultado. Cada banner aparece apenas em sua respectiva categoria.

image
image2497×1440 139 KB

Espero que isso ajude ainda mais!

1 curtida