카테고리별 사이트 헤더 아래 툴바

개발
8

제가 직접 만들어본 실용적인 예시입니다:

After Header 탭에 넣은 HTML입니다:

<div id="category-general-banner" class="below-header-banner">
    <h2>🚀 여기는 <strong>General</strong> 카테고리에서만 표시되는 콘텐츠입니다</h2>
</div>

<div id="category-site-feedback-banner" class="below-header-banner">
    <h2>✨ 여기는 <strong>Site Feedback</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;
        }
    }
}

결과입니다. 각 배너는 해당 카테고리에서만 표시됩니다.

image
image2497×1440 139 KB

도움이 되셨으면 좋겠습니다!