카테고리 하이라이터

angus · 4월 17, 2020, 6:31오전

이 테마 컴포넌트는 Discourse에서 특정 카테고리(또는 여러 카테고리)를 강조 표시할 수 있게 해줍니다. 다음 기능을 사용할 수 있습니다:

특정 카테고리에 특별한 배경 스타일 적용
동일한 특별한 스타일을 적용한 카테고리 링크를 헤더에 추가

예를 들어 “Premium” 콘텐츠가 있는 카테고리에 사용할 수 있습니다.

카테고리 내비게이션 및 헤더 라벨

토픽 목록	사이트 메뉴
topic_list880×302 22.8 KB	site_menu674×312 26.6 KB

카테고리 페이지

설정

카테고리 하이라이터 테마 컴포넌트에는 "카테고리 강조"라는 주요 설정이 하나 있습니다. 이 설정은 카테고리 하이라이터 테마 컴포넌트 설정 패널에서 찾을 수 있습니다.

강조 표시하려는 각 카테고리는 이 설정에서 별도의 목록 항목을 가집니다. 각 항목의 형식은 다음과 같습니다:

category_slug~background~text_color~header_label~header_label_mobile~parent_slug~alternate_link

이 형식의 예시는 다음과 같습니다:

premium~linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%)~#88562e~:star:&nbsp&nbspPremium~:star:

~(“틸드”)로 구분되는 6가지 가능한 값이 있습니다. 각 값을 차례로 살펴보겠습니다.

카테고리 슬러그

강조 표시하려는 카테고리의 "슬러그"입니다. 카테고리 설정에서 이를 찾을 수 있습니다.

하위 카테고리를 강조 표시해야 하는 경우, “부모” 카테고리 슬러그를 사용하고 슬래시(/)로 구분하여 하위 카테고리 슬러그를 입력해야 합니다.

예를 들어, videos라는 슬러그를 가진 premium의 하위 카테고리를 강조 표시하고 싶다면 다음과 같이 사용합니다:

premium/videos

권한

강조 표시된 카테고리에 대한 read 권한이 있는 사용자만 강조 표시(헤더 라벨 포함)를 볼 수 있다는 점에 유의하세요. 카테고리 “보안” 설정에서 카테고리 권한을 변경할 수 있습니다.

배경

이 값은 카테고리 배지(badge)의 background CSS 속성에 부여됩니다. 이 속성이 지원하는 모든 항목을 사용할 수 있습니다.

background - CSS: Cascading Style Sheets | MDN

background CSS 단축 속성은 색상, 이미지, 기원 및 크기, 반복 방법 등 모든 배경 스타일 속성을 한 번에 설정합니다.

예를 들어 linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%).

텍스트 색상

이 값은 카테고리 배지의 color CSS 속성에 부여됩니다. 이는 텍스트의 색상에 영향을 미칩니다. 이 속성이 지원하는 모든 항목을 사용할 수 있습니다.

color - CSS: Cascading Style Sheets | MDN

color CSS 속성은 요소의 텍스트 및 텍스트 장식의 전경 색상 값을 설정하고 currentcolor 값을 설정합니다. currentcolor는 다른 속성의 간접 값으로 사용할 수 있으며, …와 같은 다른 색상 속성의 기본값입니다.

우리의 예시에서는 #88562e입니다.

헤더 라벨

이 값은 두 가지 목적을 수행합니다. 다음을 결정합니다:

강조 표시된 카테고리에 헤더 라벨이 부여되는지 여부;
해당 라벨의 내용.

헤더 라벨이 원하지 않다면 이 값을 전혀 포함하지 마세요.

이 값은 텍스트, HTML 엔티티 및 이모지를 지원합니다.

여기서 헤더 라벨 값은 :star:&nbsp&nbspPremium입니다. 이는:

별 이모지 쇼트코드: :star:
두 개의 줄바꿈 없는 공백 HTML 엔티티(각각 하나의 공백을 추가): &nbsp&nbsp
라벨 텍스트: Premium

이모지 쇼트코드 전체 목록과 HTML 엔티티 전체 목록을 여기서 찾을 수 있습니다.

모바일 헤더 라벨

이 값도 두 가지 목적을 수행합니다. 다음을 결정합니다:

강조 표시된 카테고리에 모바일 헤더 라벨이 부여되는지 여부;
모바일 헤더 라벨의 내용.

사용법과 형식은 헤더 라벨과 동일합니다. 여기서 유의할 점은 모바일에서는 공간이 더 적으므로, 공간을 절약하기 위해 이모지나 짧은 단어만 사용하는 것이 현명할 수 있다는 것입니다.

부모 카테고리

항목의 "부모"를 설정하여 헤더에 드롭다운을 만들 수 있습니다. 여섯 번째 항목으로 카테고리 슬러그를 입력하면 해당 항목은 헤더에서 해당 카테고리의 하위 메뉴 항목이 됩니다. 첫 번째 항목과 마찬가지로, 카테고리 설정 모달에서 가져올 수 있는 카테고리 슬러그를 사용해야 합니다.

대체 링크

기본적으로 각 카테고리 항목은 해당 카테고리로 링크됩니다. 설정 블록의 여섯 번째 항목으로 URL을 추가하여 링크를 변경할 수 있습니다.

jrgong · 4월 17, 2020, 7:20오전

이렇게 단순하면서도 큰 효과가 있네요. 유료 고객 카테고리에 해당하는 게시물을 강조하기 위해 포럼의 특정 부분을 CSS로 스타일링할 계획을 꽤나 오래 갖고 있었습니다. 덕분에 이제 모든 것이 훨씬 쉬워졌네요. 수고 많으셨고, 정말 훌륭합니다!

카테고리 선택기에서 모든 카테고리가 활성화되어 있을 때, 카테고리 목록에서 특정 주제를 강조하는 기능에 대해 생각해보신 적 있으신가요? 예를 들어 주제 제목 앞에 별표를 추가하는 방식처럼요.

angus · 4월 17, 2020, 7:45오전

하이라이트는 배지가 표시되는 모든 위치에서 작동하므로, 목록에도 이미 포함되어 있습니다

토픽 목록	사이트 메뉴
topic_list880×302 22.8 KB	site_menu674×312 26.6 KB

카테고리 페이지

자세한 내용은 https://try.thepavilion.io 에서 확인하세요

outofthebox · 4월 17, 2020, 7:54오후

@Angus, 당신은 정말 놀라운 개발자이며, 함께 작업하는 것은 큰 기쁨입니다. 당신의 창의성, 탁월함, 그리고 꼼꼼함에 감사드립니다. 당신은 디스코르스 커뮤니티에 큰 선물입니다.

jordan.vidrine · 4월 17, 2020, 8:01오후

정말 멋진 컴포넌트네요, 잘 만들었네요

codinghorror · 4월 20, 2020, 5:53오전

오오, 이거 진짜… 프리미엄 느낌이에요

Anatolia · 4월 29, 2020, 7:44오후

처음에는 사이드바가 있는 줄 알았습니다. 이런 스타일의 사이드바가 있으면 좋을 것 같습니다.

Paracelsus · 5월 22, 2020, 8:08오전

훌륭한 컴포넌트네요, 정말 좋습니다.

@angus 하이라이트된 배경에 border-radius를 적용하는 방법을 알고 싶습니다. 미리 감사드립니다.

angus · 5월 23, 2020, 1:16오전

카테고지 배지가 나타나는 맥락이 다양하기 때문에 이 작업은 다소 복잡합니다. 이 작업을 좀 더 쉽게 할 수 있도록 클래스를 추가할 수도 있지만, 당장은 다음과 같이 처리할 수 있습니다:

### Header button
.highlight-category-button {
    border-radius: 4px;
}

### Badges
.badge-wrapper[class*=" updates "],
.extra-info-wrapper .categories-wrapper .badge-wrapper[class*=" updates "],
.category-title-link-component[class*=" updates "] .category-text-title,
.select-kit.combo-box.category-drop .category-row[class*=" updates "] .badge-wrapper {
    &:before {
        border-radius: 4px;
    }
}

예시에서 "updates"는 카테고리 슬러그입니다.

예시: https://try.thepavilion.io/

fzngagan · 10월 28, 2020, 8:20오전

컴포넌트가 이제 카테고리 드롭다운을 지원합니다.

설정에서 6번째 항목으로 상위 카테고리 슬러그를 사용하면, 드롭다운 항목으로 하위 카테고리가 표시되는 드롭다운이 나타납니다.

참고: 사용하지 않으려면 5번째 항목(모바일 헤더 라벨)을 비워 두어야 합니다.

스폰서로 참여해 주셔서 감사합니다 @outofthebox .

outofthebox · 10월 29, 2020, 4:38오후

훌륭한 작업이었어요 @fzngagan!! 파빌리온 팀은 정말 대단합니다.

satonotdead · 9월 11, 2021, 5:59오후

슬러그뿐 아니라 .select-kit .select-kit-row.is-highlighted도 강조할 수 있을까요?

생각보다 눈이 편할 것 같습니다.

댓글에 동의합니다. 정말 멋진 작업입니다. Pavilion 사이트를 살펴보고 있는 중이고, 다양한 기능을 테스트하고 있습니다.

곧 우리 커뮤니티를 위해 준비한 아이디어로 함께 작업할 수 있기를 바랍니다.

MarcP · 9월 17, 2021, 7:48오후

우선 이 훌륭한 컴포넌트를 만들어 주셔서 감사합니다.

토픽 목록 뷰에서 토픽 제목과 카테고리 배지 사이에 여백이 조금 더 있으면 더 보기 좋을 것 같습니다. 이 부분은 컴포넌트 내에서 구현할 수 있을까요? 박스 크기가 기본 박스 뷰보다 약간 더 큰 것 같아서, 완벽주의자들에게는 좀 눈이 아플 정도로 불편해 보입니다, 하하.

모바일 뷰가 데스크톱 뷰보다 더 좋습니다:

jrgong · 9월 21, 2022, 2:19오후

이것이 최신 tests-passed와 함께 여전히 작동하나요? 그렇다면 문서가 어딘가에 아카이브되어 있나요? @angus

angus · 9월 22, 2022, 6:13오전

위 OP에 문서를 붙여넣었습니다. 작동하지 않으면 알려주세요.

jrgong · 9월 22, 2022, 10:39오전

멋져요! 특히 그라데이션 부분이 제 목표를 달성하는 데 결정적이었어요! 정말 감사합니다!

jrgong · 10월 15, 2022, 12:53오후

이 TC를 여전히 사용하고 계신 분이 계신가요? 그리고 다음 문제에 대한 해결책을 찾으셨나요?
2.9.0.beta9와 beta10에서 TC로 인해 시스템 카테고리 메타가 카테고리 드롭다운 필드와 토픽 목록에서 사라지는 문제가 발생합니다.

포럼 로그는 비어 있으며, 콘솔 로그에는 다음 내용만 표시됩니다:

[THEME 190 'Category Highlighter'] To prevent errors in tests, add a `pluginId` key to your `modifyClass` call. This will ensure the modification is only applied once. 3 plugin-api.js:19

글		댓글	조회수
Tips on how to highlight topics from a category? Product Support	2	345	4월 26, 2024
Colorful Categories Theme component official , colorful-categories	12	4447	10월 19, 2023
Introduce a "highlight topic" feature Feature	14	884	7월 4, 2024
Nav Button Highlighter component - now working Theme component	8	377	11월 20, 2025
Category Description Product Support	2	1400	12월 11, 2022