환영 링크 배너

[Discourse]

	요약	Welcome Link Banner은 사용자 정의 텍스트와 1~4개의 링크를 추가할 수 있는 간단한 배너입니다.
	미리보기	Discourse Theme Creator에서 미리보기
	리포지토리 링크	https://github.com/discourse/discourse-welcome-link-banner
	Discourse 테마가 처음이신가요?	Discourse 테마 사용 입문가 가이드

이 테마 컴포넌트 설치

이는 Discourse 팀이 관리하는 official 테마 컴포넌트이므로, Support, Contribute > Bug, Contribute > UX, Contribute > Feature 요청은 Meta의 해당 카테고리에서 적절한 테마 컴포넌트 태그와 함께 제출할 수 있습니다. 아래 링크를 클릭하여 시작해 보세요.

 지원  버그  UX  기능

기능

설정

이 컴포넌트에는 다양한 설정이 포함되어 있습니다!

이름	설명
표시 위치	배너를 홈페이지, 토픽 목록 또는 모든 페이지에 표시하도록 선택
배너 링크	font awesome 아이콘과 텍스트를 사용하여 1~4개의 링크를 추가 (Discourse에 기본적으로 포함되어 있지 않은 아이콘을 svg_icons 설정에 추가해야 할 수도 있음)
최대 신뢰 수준	특정 신뢰 수준의 사용자만 배너를 표시
스태프에게 숨김
모바일에서 숨김
레이아웃	텍스트 왼쪽(기본값) 또는 텍스트 상단
플러그인 아웃렛	배너가 렌더링되는 위치를 변경할 수 있으며, 사이드바를 사용 중이라면 above-main-container를 시도해 보세요
익명 사용자에게 숨김	로그인하지 않은 사용자에게 배너를 숨김
닫기 가능	사용자가 x를 클릭하여 배너를 숨길 수 있도록 허용
배너 배경 이미지	배너 뒤에 표시할 이미지 선택
배너 배경 반복	배경 이미지 반복 동작 구성
배너 배경 크기	CSS를 사용하여 배경 이미지 크기를 조정 (자세한 정보)
배너 배경색	배경 이미지가 없나요? 단색을 사용하세요!
배너 박스 배경색
배너 텍스트 색상
배너 아이콘 색상
배너 링크 색상

번역	기본값
meta_banner.welcome	우리 커뮤니티에 오신 것을 환영합니다!
meta_banner.subtitle	대화에 참여하고, 친절함을 잊지 마세요.

저희가 호스팅을 제공하나요? 테마 컴포넌트는 Pro, Business 및 Enterprise 플랜에서 사용 가능합니다.

[awesomerobot (Kris)]

실험용 사이드바를 사용 중이시라면, plugin outlet 설정을 추가했습니다. 이 설정을 사용하면 환영 배너가 콘텐츠 위에는 표시되지만 사이드바 위에는 표시되지 않습니다. 해당 설정을 above-main-container로 변경하세요.

이 설정을 변경하면 Meta에서처럼 배너가 사이드바 오른쪽에 표시됩니다:

DEV: add outlet setting to accommodate sidebar (#7)

[jaileleu]

질문: 사용자가(나 ^^) 배너를 닫은 경우, 어떻게 다시 표시할 수 있나요?
Ctrl+F5를 눌러도 다시 나타나지 않는데, 저는 테스트 목적으로 잠시 닫았을 뿐입니다.

[Arkshine]

데스크톱에서는 여기에서 discourse_dismissedWelcomeLinkBanner라는 localStorage 항목을 삭제할 수 있습니다.

F12를 눌러 브라우저 콘솔을 열고 → Application 탭으로 이동 → 왼쪽 패널에서 Local Storage를 클릭한 다음 해당 웹사이트를 선택 → discourse_dismissedWelcomeLinkBanner 키를 찾아 삭제하세요.

이것으로 끝! 페이지를 새로고침하면 배너가 다시 표시되어야 합니다.

[martyn_thomas]

신뢰 수준이 아닌, 사용자가 특정 그룹에 속해 있거나 속해 있지 않은 경우에 따라 배너를 표시할 수 있는 방법이 있을까요?

[Lilly (Lillian)]

안녕하세요 @martyn_thomas 이 테마 컴포넌트를 설치하면 CSS를 사용하여 원하는 결과를 얻을 수 있어야 합니다.

현재 사용자의 그룹에 대한 CSS 클래스

요약 CSS Classes for Current User’s Groups는 사용자가 속한 그룹을 <body> 태그에 CSS 클래스로 추가합니다. 미리보기 theme-creator.discourse.org에서 미리보기 리포지토리 링크 https://github.com/discourse/discourse-groups-css-classes-in-body 디스코urs 테마를 처음 사용하시나요? 디스코urs 테마 사용 입문가 가이드 이 테마 컴포넌트 설치 설치 전: [image] 설치 후: [image] Discourse는 기본적으로 현재 사용자의 기본 그룹만 CSS 클래스로 추가합니다. 이 컴포넌트는 이를 변경하여, 현재 사용자가 속한 모든 그룹(신뢰 수준(trust-level)과 같은 내장 그룹 포함)을 클래스로 추가합니다. 이 컴포넌트…

[Aizada_M]

@Lilly

@martyn_thomas 안녕하세요 이 테마 컴포넌트를 설치하면 CSS를 사용하여 원하는 결과를 얻을 수 있어야 합니다

discourse2 Summary CSS Classes for Current User’s Groups는 사용자가 속한 그룹을 태그에 CSS 클래스로 추가합니다. eyeglasses 미리보기 Preview on theme-creator.discourse.org hammer_and_wrench 저장소 링크 GitHub - discourse/discourse-groups-css-classes-in-body · GitHub open_book Discourse 테마에 처음이신가요? Discourse 테마 사용 가이드 이 테마 컴포넌트 설치하기 설치 전: [image] 설치 후: [image] Discourse는 현재 사용자의…

제 질문이 바보 같을 수 있지만, 저는 프로그래머가 아닙니다. CSS Classes for Current User's Groups 컴포넌트를 설치했습니다. 서로 다른 세 그룹에 대해 세 가지 배너 옵션을 표시하려면 Welcome Link Banner 컴포넌트를 세 번 설치해야 하나요? 그렇다면 다음과 같은 효과를 위해 CSS를 어떻게 스타일링해야 할까요?
A 그룹에는 banner-A, B 그룹에는 banner-B, C 그룹에는 banner-C가 표시되도록요. 예시를 보여줄 수 있을까요?
미리 답변해 주셔서 감사합니다

[Lilly (Lillian)]

컴포넌트는 하나만 설치하세요. 사용 방법은 아래 링크에서 확인하세요.

GitHub - discourse/discourse-groups-css-classes-in-body

body.group-(group name here) .welcome-link-banner-wrapper {
    display: none;
}

"(group name here)"를 배너를 숨기고 싶은 그룹 이름으로 교체하세요.

[Aizada_M]

감사합니다. 특정 그룹에 대해 배너를 숨기고 싶을 때는 이 방법이 작동하지만, 다른 그룹마다 서로 다른 콘텐츠의 배너를 표시하는 방법은 모르겠어요.

[Lilly (Lillian)]

다른 배너를 원하신다면, 환영 링크 배너 컴포넌트(CSS 그룹 컴포넌트가 아닌)의 복본을 하나 이상 추가로 필요하게 됩니다. 또한, 숨기는 대신 표시하도록 CSS를 다르게 설정하는 것도 고려해 보실 수 있습니다.

[Aizada_M]

@Lilly

숨기는 대신 표시하기 위한 다른 CSS입니다.

그 점은 이해하지만, 그런 CSS를 어떻게 구현해야 할지 모르겠습니다. 대략적인 CSS 예시가 필요합니다.

[Lilly (Lillian)]

먼저 모든 사용자에게 숨긴 다음, 특정 그룹에 대해 display: block을 사용하는 것이 좋습니다. 원하시는 결과는 여러 가지 방법으로 달성할 수 있습니다. 예를 들어, 모두에게 숨긴 후 일부에게 표시하는 방식이나, 일부에게만 숨기는 방식 등이 있습니다.

[Aizada_M]

몇 가지 설명을 드리겠습니다.

@Lilly

다른 배너를 원하신다면, 웰컴 링크 배너 컴포넌트의 복제본이 하나 이상 필요합니다.

컴포넌트의 복제본이 여러 개 있는 경우, 클래스 이름을 어떻게 작성해야 할까요? 예를 들어,

body.group-name1 .welcome-link-banner-wrapper 1{
display: none;
}
body.group- name1 .welcome-link-banner-wrapper 2 {
display: none
}
body.group-name2 .welcome-link-banner-wrapper 1{
display: block;
}
body.group-name2 .welcome-link-banner-wrapper 2{
display: none
}
body.group-name3 .welcome-link-banner-wrapper 2{
display: block
}

이런 식으로 작성하면 될까요?
각 컴포넌트 인스턴스에 대해 .welcome-link-banner-wrapper가 어떻게 불릴지 파악이 되지 않습니다.

[Lilly (Lillian)]

각 사용처별로 배너 컴포넌트를 포크해야 할 수도 있습니다. 이러한 범위를 벗어난 사용 사례의 경우, 기본적인 CSS와 테마 컴포넌트 개발을 배우는 것이 가장 좋습니다.

[nujabes]

이 배너는 단순하고 깔끔해서 사용하고 싶습니다. 웰컴 배너가 아니라 회사 앱을 홍보하는 용도로 사용하는 것이 괜찮을까요?

링크를 App Store에서 다운로드할 수 있는 URL로 설정하려고 하는데, 이 부분도 문제가 될까요?

“Welcome to our community!” 부분은 수정할 수 있을까요?

[Moin]

네, 모든 텍스트를 커스터마이즈하고 아이콘을 선택하며 원하는 링크를 자유롭게 추가할 수 있습니다.
또한 테마 크리에이터에서 테마를 직접 체험해 볼 수도 있습니다.

[nujabes]

@Moin

감사합니다!