Barra de herramientas bajo el encabezado del sitio por categoría

Desarrollador
8

Aquí tienes un ejemplo práctico que he preparado para ti:

Aquí está el HTML que puse en la pestaña After Header

<div id="category-general-banner" class="below-header-banner">
    <h2>🚀 Aquí hay contenido que solo se muestra en la categoría <strong>General</strong></h2>
</div>

<div id="category-site-feedback-banner" class="below-header-banner">
    <h2>✨ Aquí hay contenido que solo se muestra en la categoría <strong>Site Feedback</strong></h2>
</div>

Aquí está el SCSS que puse en la pestaña CSS (Discourse usa SCSS, que amplía las características de 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;
        }
    }
}

Aquí está el resultado. Cada banner aparece solo en su categoría respectiva.

image
image2497×1440 139 KB

¡Espero que eso ayude más!

1 me gusta