게시물 알림 표시 제어

커스터마이징 테마 컴포넌트
,
1
:information_source: 요약 게시글 공지사항의 유형과 경과 시간에 따라 표시 방식과 스타일을 사용자 지정
:hammer_and_wrench: 저장소 GitHub - moin-Jana/post-notice-visibility-control: Customize visibility and style of post notices by type and age · GitHub
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: Discourse 테마를 처음 사용하시나요? Discourse 테마 사용 입문 가이드

이 테마 컴포넌트 설치

이 컴포넌트는 새 게시글과 오래된 게시글에서 각 유형의 게시글 공지사항(신규 사용자, 복귀 사용자, 공식)이 어떻게 표시되는지 제어할 수 있습니다. 강조 표시, 표시, 숨김 중 하나를 선택할 수 있으며, 각 유형별로 사용자 지정 강조 색상을 독립적으로 설정할 수 있습니다.

아래 스크린샷은 서로 다른 유형이 새 게시글(왼쪽)과 오래된 게시글(오른쪽)에서 어떻게 보일 수 있는지를 보여주는 예시입니다:

왼쪽에는 빨간색 배경의 공식 공지, 녹색 배경의 신규 사용자 공지, 회색 배경의 복귀 사용자 공지가 보입니다. 오른쪽에는 공식 공지가 여전히 빨간색 배경을 유지하고, 신규 사용자 공지는 배경이 없으며, 복귀 사용자 공지는 표시되지 않습니다
왼쪽에는 빨간색 배경의 공식 공지, 녹색 배경의 신규 사용자 공지, 회색 배경의 복귀 사용자 공지가 보입니다. 오른쪽에는 공식 공지가 여전히 빨간색 배경을 유지하고, 신규 사용자 공지는 배경이 없으며, 복귀 사용자 공지는 표시되지 않습니다1372×746 39.7 KB

설정 예시 1 
"custom_new": "highlighted"
"custom_old": "highlighted"
"custom_highlight_color": "var(--danger-low-mid)"

"new_user_new": "highlighted"
"new_user_old": "visible"
"new_user_highlight_color": "var(--success-low)"

"returning_user_new": "highlighted"
"returning_user_old": "hidden"
"returning_user_highlight_color": "var(--primary-200)"

왼쪽에는 금색 배경의 공식 공지, 배경이 없는 신규 사용자 공지, 배경이 없는 복귀 사용자 공지가 보입니다. 오른쪽에는 공식 공지에 배경이 없으며, 신규 사용자 공지와 복귀 사용자 공지는 표시되지 않습니다
왼쪽에는 금색 배경의 공식 공지, 배경이 없는 신규 사용자 공지, 배경이 없는 복귀 사용자 공지가 보입니다. 오른쪽에는 공식 공지에 배경이 없으며, 신규 사용자 공지와 복귀 사용자 공지는 표시되지 않습니다1372×746 42 KB

설정 예시 2 
"custom_new": "highlighted"
"custom_old": "visible"
"custom_highlight_color": "var(--gold)"

"new_user_new": "visible"
"new_user_old": "hidden"
"new_user_highlight_color": "var(--tertiary-low)"

"returning_user_new": "visible"
"returning_user_old": "hidden"
"returning_user_highlight_color": "var(--tertiary-low)"

각 공지 유형과 경과 시간 조합에 대해 공지를 강조 표시, 표시(강조 없음), 또는 숨김으로 설정할 수 있습니다. "강조 표시"를 선택하면 선택적으로 사용자 지정 배경색을 정의할 수 있습니다.

var(--quaternary-low)와 같은 색상 변수 사용을 권장합니다. 이러한 변수는 활성 색상 팔레트의 색상을 참조하므로, 사용자가 다른 팔레트(예: 라이트 모드와 다크 모드)로 전환할 때 자동으로 적응합니다. 이는 하드코딩된 색상보다 더 유연한 옵션입니다. 대부분의 색상 팔레트는 몇 가지 기본 색상만 표시하지만, Discourse는 이를 활용할 수 있는 색상의 뉘앙스(shades)를 생성합니다. styleguide enabled 사이트 설정을 통해 활성화할 수 있는 스타일 가이드를 사용하면 사용 가능한 많은 색상 변수를 탐색할 수 있습니다. 대안으로, 브라우저에서 사이트를 검사할 수 있습니다 - 개발자 도구를 열고 Styles 탭으로 이동한 후 아래로 스크롤하여 사용 가능한 모든 색상 변수를 확인할 수 있습니다.

#EE8888과 같은 16진수 값, rgb(255, 200, 200)과 같은 RGB 값, 또는 red와 같은 명명된 색상도 사용할 수 있습니다.

색상이 제공되지 않으면 컴포넌트는 var(--tertiary-low)로 폴백됩니다. 컴포넌트의 기본 설정은 표준 Discourse 동작을 재현하므로, 설정하지 않는 한 단순히 활성화하는 것만으로는 아무것도 변경되지 않습니다.

게시글 공지사항이 “오래된” 것으로 간주되는 일수는 old post notice days 사이트 설정으로 정의됩니다. 이는 세 가지 유형의 공지사항 모두에 적용됩니다.
:warning: 중요: 경과 시간은 게시글이 생성된 시점을 기준으로 합니다 - 공지가 추가된 시점이 아닙니다.
값을 일시적으로 0으로 설정하여 공지사항이 “오래된” 상태로 표시될 때 어떻게 보일지 쉽게 미리 볼 수 있습니다.

12개의 좋아요
Removing Welcome and Returning User notes from posts after a set time
Official notices on older posts
2

최신 버전의 Discourse에서는 오래된 게시글 알림이 더 이상 렌더링되지 않으므로, 이를 CSS로 스타일링할 수 없습니다. 이로 인해 모든 _old 설정이 더 이상 효과를 발휘하지 못합니다.

3

최신 Discourse 업데이트로 인해, 컴포넌트가 기존에 새 공지사항과 오래된 공지사항에 서로 다른 스타일을 적용하기 위해 사용하던 old 클래스가 제거되었습니다. 이제 신규 및 복귀 사용자를 위한 게시물 공지사항은 old post notice days 설정에 따라 자동으로 제거되며, 공식 공지사항은 영구적으로 표시되고 강조됩니다.

이로 인해 이 컴포넌트는 대부분 더 이상 필요하지 않게 되었습니다. 남아 있는 유일한 사용자 정의 옵션은 게시물 공지사항의 일반 색상 설정과 관련된 것입니다. 아래에 표시된 바와 같이 CSS를 통해 쉽게 조정할 수 있습니다:

.post-notice.custom {
    background-color: var(--danger-low-mid);
}
.post-notice.new-user {
    background-color: var(--success-low);
}
.post-notice.returning-user {
    background-color: var(--primary-200);
}

특정 공지 유형에 대한 배경 하이라이트를 제거하려면 단순히 background-color: unset;를 사용하면 됩니다.

2개의 좋아요