사이트 상단에 표시할 배너 만들기

[Discourse]

이 가이드는 간단한 닫을 수 있는 배너부터 고급 옵션까지, Discourse 사이트에서 배너를 생성하고 사용자 지정하는 다양한 방법을 설명합니다.

필요한 사용자 권한: 중재자(닫을 수 있는 배너), 관리자

배너는 사이트 방문자에게 중요한 정보를 전달하는 효과적인 방법입니다. 이 가이드에서는 Discourse 사이트에서 배너를 생성하고 사용자 지정하는 다양한 방법을 안내합니다.

환영 배너

환영 배너는 신규 및 기존 회원에게 친근한 메시지와 눈에 띄는 검색 바를 제공하여 방문자가 원하는 콘텐츠를 빠르게 찾을 수 있도록 돕습니다.

환영 배너를 활성화하고 사용자 지정하려면 관리자 영역으로 이동하여 사이드바에서 모양 > 환영 배너 링크를 선택하세요.

이 영역에서 다음 설정을 찾을 수 있습니다:

• 테마에서 활성화…: 활성 테마 중 어떤 테마에 환영 배너를 표시할지 지정할 수 있습니다.
• 배경 이미지: 환영 배너의 배경으로 사용할 이미지를 업로드합니다.
• 텍스트 색상: 색상 팔레트에 의해 제어되는 기본 텍스트 색상이 배경 이미지와 충돌하는 경우, 여기서 새 색상을 선택할 수 있습니다. 이 설정은 배경 이미지를 업로드한 경우에만 적용됩니다.
• 페이지 가시성: 환영 배너가 표시될 페이지를 결정합니다. 기본적으로 상단 메뉴 페이지(즉, 상단 메뉴 사이트 설정에서 선택된 페이지)에 표시되지만, 다음과 같이 변경할 수 있습니다:
  • 홈페이지만: 환영 배너가 사이트 홈페이지(즉, 상단 메뉴 사이트 설정에 나열된 첫 번째 페이지)에만 표시됩니다.
  • 발견 페이지: 상단 메뉴 페이지 모두에 환영 배너가 표시됩니다(사이트의 실제 상단 메뉴에 표시되지 않거나 설정에서 선택되지 않은 경우에도).
  • 모든 페이지: 환영 배너가 사이트의 모든 페이지에 표시됩니다. 이는 주제 페이지에서 시각적 혼란을 일으켜 회원들의 읽기와 참여를 방해할 수 있으므로 일반적으로 권장되지 않습니다.
• 위치: 환영 배너가 페이지의 어디에 표시될지 결정합니다. 기본적으로 주제 콘텐츠 위에 표시되지만, 사이트 헤더 아래도 선택할 수 있습니다. 그 차이는 다소 미묘하며, 아래 스크린샷에서 확인할 수 있습니다:

환영 배너의 텍스트를 사용자 지정하여 인사말을 변경하고 환영 배너에 설명 텍스트를 더 추가할 수도 있습니다.

• 신규 회원용 헤더: 신규 회원이 사이트에 처음 로그인할 때 표시되는 주요 인사말.
• 로그인된 회원용 헤더: 기존 회원에게 표시되는 주요 인사말.
• 익명 방문자용 헤더: 익명(즉, 로그인하지 않은) 회원에게 표시되는 주요 인사말.
• 로그인된 회원용 서브헤더: 기존 회원에게 헤더 아래에 표시되는 선택적인 부가 텍스트 줄.
• 익명 방문자용 서브헤더: 익명(즉, 로그인하지 않은) 회원에게 헤더 아래에 표시되는 선택적인 부가 텍스트 줄.
• 검색 자리 표시자: 환영 배너의 검색 필드에 표시되는 자리 표시자 텍스트.

닫을 수 있는 배너

닫을 수 있는 배너는 사용자가 닫을 수 있는 임시 공지입니다. 생성 방법은 다음과 같습니다:

1. 공개 카테고리 중 어디에서든 주제를 생성하거나 이동합니다. 주제 상단의 원본 게시물(OP)이 배너의 원천이 됩니다.
2. 주제 오른쪽 하단 또는 아래에 있는 렌치 아이콘을 클릭하여 관리자 옵션을 엽니다.
3. “주제 고정…”을 선택합니다.
4. 새 창에서 배너 주제로 만들기 를 선택합니다.

이제 배너가 사이트 상단에 나타납니다. 사용자는 닫을 수 있는 배너를 보게 되며, 스태프는 원본 주제를 편집할 수 있는 링크도 볼 수 있습니다.

효과적인 닫을 수 있는 배너를 위한 팁:

• 텍스트를 명확하고 간결하게 유지하세요
• 최대 높이는 20vh입니다 (CSS로 수정 가능)
• 긴 텍스트의 경우, 사용자는 배너 내에서 스크롤할 수 있습니다
• 더 많은 정보를 위해 관련 공개 주제에 대한 링크를 추가하는 것을 고려하세요
• 배너로 사용되는 주제를 숨기고 싶다면, 주제 관리자 메뉴를 사용하여 목록에서 제외할 수 있습니다

영구 배너

항상 표시되고 사용자가 닫을 수 없는 배너를 생성하려면:

1. 사이트 설정에서 global_notice를 검색합니다.
2. 이 필드에 배너 텍스트나 HTML을 입력합니다.

영구 배너를 위한 팁:

• 이 유형의 배너는 긴급한 사이트 공지 사항에 일반적으로 사용되지만, 모든 영구 메시지에 사용할 수 있습니다
• 이 배너는 login_required 사이트의 익명 사용자를 포함하여 모든 사람에게 표시됩니다
• global notice 사이트 설정을 초기화하여 배너를 제거할 수 있습니다

고급 배너

테마 구성 요소를 사용하여 더 고급스러운 배너를 만들 수 있습니다. 이러한 테마 구성 요소는 코어 환영 배너 기능과 충돌할 수 있다는 점에 유의하세요.

환영 링크 배너

이 구성 요소를 사용하면 배너에 사용자 정의 텍스트와 1~4개의 링크를 추가할 수 있습니다. 다음을 포함한 다양한 사용자 지정 옵션을 제공합니다:

• 배너 표시 위치 선택(홈페이지, 주제 목록 또는 모든 페이지)
• Font Awesome 아이콘과 함께 링크 추가
• 사용자 신뢰 수준에 기반한 가시성 제한
• 배경 이미지 또는 색상 사용자 지정
• 텍스트 및 아이콘 색상 조정

다목적 배너

가장 인기 있고 잘 유지 관리되는 구성 요소 중 하나인 다목적 배너는 인터페이스를 통해 광범위한 사용자 지정 옵션을 제공합니다. 여기에는 다음이 포함됩니다:

• 배너 표시 제한
  • 로그인된 사용자 또는 익명 사용자
  • 모바일 또는 데스크톱 장치
  • 홈페이지, 주제 목록 또는 모든 페이지
• 닫을 수 있는, 확장 가능한 또는 영구 옵션
• 전체 브라우저 폭 설정
• 색상 관리
• HTML을 사용한 헤딩 및 열 사용자 지정

CSS를 사용한 배너 사용자 지정

CSS를 사용하여 모든 유형의 배너를 사용자 지정할 수 있습니다. CSS를 사용하여 Discourse 사이트를 사용자 지정하는 방법에 대한 자세한 내용은 Discourse 테마 사용 입문가 가이드를 참조하세요.

[leopedrini (Leonardo Zanoni Pedrini)]

@Discourse

사이드바의 외관 > 테마 및 컴포넌트 링크.

이 옵션을 찾을 수 없었습니다… 베타 버전의 새로운 기능인가요?

[leopedrini (Leonardo Zanoni Pedrini)]

@leopedrini

이 옵션을 찾을 수 없었습니다… 베타 버전에서 새로 추가된 기능인가요?

업데이트: 3.4.6에서 3.5.0으로 업데이트한 후 확인되었습니다:

[RBoy]

@Discourse

js.welcome_banner.search — 환영 배너의 검색 필드에 표시되는 자리표시 텍스트입니다.

빌드 3.6.0.beta1-dev(e44347414a)에 버그가 있습니다.

이 사이트 텍스트를 변경해도 검색창의 텍스트에는 아무런 영향이 없으며, 여전히 Search로 표시됩니다. Windows 10 x64 환경에서 Chrome으로 테스트했습니다.

[awesomerobot (Kris)]

여기에서 이 문제에 대한 수정 작업을 진행 중입니다: DEV: use welcome_banner.search placeholder in search banner - Pull Request #34523 - discourse/discourse - GitHub

[RBoy]

놀랍네요, 감사합니다 - 문제 해결됐어요!

[tknospdr (David Muszynski)]

환영 배너의 배경 이미지와 관련하여 문제가 있습니다.
해당 사이트에서는 객체 저장을 위해 Cloudflare R2 S3 버킷을 사용 중입니다.
관리자 영역에서 배경 이미지를 업로드하면 올바르게 표시되며, 전체 크기로 보려면 클릭하면 작동합니다. 또한 마우스 오른쪽 버튼으로 클릭하여 새 탭에서 이미지를 표시하면 공용 버킷 URL을 사용하여 정상 작동합니다:
https://eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

그러나 CSS에 주입되는 URL은 다음과 같습니다:
https://exotics-unlimited.7100e60b936991e069a3230dc05d4976.r2.cloudflarestorage.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

로컬 저장을 사용하는 다른 사이트에서는 배너 배경 이미지가 정상적으로 작동합니다.

이것은 코드 버그인가요, 아니면 제가 무언가를 잘못하고 있는 건가요?

좀 더 파고들어서 보니 배경 이미지를 제어하는 CSS가 이것인 것 같습니다:

인스펙터에서 URL을 수동으로 교체하면 작동합니다.
다음과 같이 오버라이드를 시도해 보았습니다:

.custom-search-banner-wrap .welcome-banner__wrap {
  background-image: "eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg";
}

하지만 작동하지 않습니다. 여전히 버그인 것 같습니다.

[yuriy (Yuriy Kurant)]

@tknospdr, 정확히 어떤 문제를 겪고 계신지 잘 이해가 되지 않습니다.

귀하의 사이트 https://eu.technospider.com 를 확인해 보았는데, 배경 이미지가 예상대로 렌더링되고 있습니다:

[tknospdr (David Muszynski)]

드디어 CSS 오버라이드가 제대로 작동하는 것 같습니다. 문제는 오버라이드가 필요 없어야 한다는 점입니다.

Cloudflare S3로 호스팅하는 경우 배너 코드가 잘못된 에셋을 사용하는 것 같습니다.

[yuriy (Yuriy Kurant)]

정확히 어떤 오버라이드를 말씀하시나요?

우리는 CSS에서 URL 경로명 /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg만 적용하도록 할 수 있습니다:

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

오버라이드 없이도 이 규칙이 잘 작동할 것 같습니다.

[tknospdr (David Muszynski)]

@yuriy

정확히 어떤 오버라이드인가요?

제 오버라이드 전체는 다음과 같습니다:

.welcome-banner {
  background-image: url(//eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg);
}
.--with-bg-img .welcome-banner__wrap {
  border-radius: 20px;
}
.welcome-banner__title {
  font-size: var(--font-up-4);
  max-width: 900px;
}
.welcome-banner__subheader {
  font-size: 17px;
  padding-bottom: 20px;
}

우리는 CSS에서 URL 경로명 /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg만 적용하도록 할 수 있습니다:

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

이 규칙은 오버라이드 없이도 작동할 것이라고 생각합니다.

UI에서는 이미지를 업로드하는 것만 할 수 있으므로, 제 CSS 오버라이드 선언을 제거하려면 코드 변경이 필요하다고 생각합니다.
구현하려는 수정 사항이 있다면 테스트해 보겠습니다.

[Frenky]

안녕하세요,

최신 Discourse 업데이트 이후 Advanced Search Banner 테마 구성 요소가 더 이상 지원되지 않으며, 유지보수도 중단된 것으로 보입니다. 대신 공식 Welcome Banner 확장 기능이 제공되고 있습니다.

문제는 새로운 구성 요소에서 현재 배경 이미지를 하나만 선택할 수 있다는 점입니다. 이전의 Advanced Search Banner 구성 요소에서는 라이트 모드와 다크 모드에 각각 다른 배경 이미지를 설정할 수 있었는데, 이는 다양한 레이아웃과 테마에 이상적이었습니다.

커뮤니티에 질문드립니다:

• Welcome Banner에서 이 기능을 재현할 수 있는 방법이 있을까요?

• 라이트 모드와 다크 모드에 다른 배경 이미지를 사용하도록 확장 기능이나 우회 방법을 이미 구현하신 분이 계신가요?

• 개발자들이 이를 추후에 구현할 계획이 있을까요?

안내, 팁, 아이디어를 주시면 감사하겠습니다!

미리 감사드립니다!