Barre d'outils sous l'en-tête du site par catégorie

Dev
8

Voici un exemple pratique que j’ai créé pour vous :

Voici le HTML que j’ai mis dans l’onglet Après l’en-tête

<div id="category-general-banner" class="below-header-banner">
    <h2>🚀 Voici du contenu affiché uniquement dans la catégorie <strong>Général</strong></h2>
</div>

<div id="category-site-feedback-banner" class="below-header-banner">
    <h2>✨ Voici du contenu affiché uniquement dans la catégorie <strong>Commentaires sur le site</strong></h2>
</div>

Voici le SCSS que j’ai mis dans l’onglet CSS (Discourse utilise SCSS qui étend les fonctionnalités 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;
        }
    }
}

Voici le résultat. Chaque bannière apparaît uniquement dans sa catégorie respective.

image
image2497×1440 139 KB

J’espère que cela vous aidera davantage !

1 « J'aime »