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

[Discourse]

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

필요한 사용자 권한: Moderator(닫을 수 있는 배너), Administrator

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

환영 배너 (Welcome banner)

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

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

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

• Enabled on themes…: 활성화된 테마 중 어떤 테마에 환영 배너를 표시할지 지정할 수 있습니다.
• Background image: 환영 배너의 배경으로 사용할 이미지를 업로드합니다.
• Text color: 컬러 팔레트에 의해 제어되는 기본 텍스트 색상이 배경 이미지와 충돌하는 경우, 여기서 새 색상을 선택할 수 있습니다. 이 설정은 배경 이미지를 업로드한 경우에만 적용됩니다.
• Page visibility: 환영 배너가 표시될 페이지를 결정합니다. 기본적으로 Top menu pages(즉, Top menu 사이트 설정에서 선택된 페이지)에 표시되지만, 다음으로 변경할 수 있습니다:
  • Homepage only: 환영 배너가 사이트 홈페이지(즉, Top menu 사이트 설정에 나열된 첫 번째 페이지)에만 표시됩니다.
  • Discovery pages: 실제 사이트 상단 메뉴에 표시되지 않더라도(즉, 설정에서 선택되지 않더라도) 모든 Top menu 페이지에 환영 배너가 표시됩니다.
  • All pages: 사이트의 모든 페이지에 환영 배너가 표시됩니다. 이는 주제 페이지에서 시각적 혼란을 유발하여 회원들의 읽기와 참여를 방해할 수 있으므로 일반적으로 권장되지 않습니다.
• Location: 페이지에서 환영 배너가 표시될 위치를 결정합니다. 기본적으로 Above topic content에 표시되지만 Below site header도 선택할 수 있습니다. 차이는 다소 미묘하며, 아래 스크린샷에 나와 있습니다:

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

• Header for new members: 신규 회원이 사이트에 처음 로그인할 때 표시되는 주요 인사말입니다.
• Header for logged-in members: 기존 회원에게 표시되는 주요 인사말입니다.
• Header for anonymous visitors: 익명(즉, 로그인하지 않은) 방문자에게 표시되는 주요 인사말입니다.
• Subheader for logged-in members: 기존 회원에게 헤더 아래에 표시되는 선택적인 보조 텍스트 줄입니다.
• Subheader for anonymous visitors: 익명(즉, 로그인하지 않은) 방문자에게 헤더 아래에 표시되는 선택적인 보조 텍스트 줄입니다.
• Search placeholder: 환영 배너의 검색 필드에 표시되는 플레이스홀더 텍스트입니다.

닫을 수 있는 배너 (Dismissible banner)

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

1. 공개 카테고리의 주제(Topic)를 생성하거나 이동합니다. 주제 상단의 원본 게시글(OP)이 배너의 소스가 됩니다.
2. 주제 오른쪽 또는 하단의 렌치 아이콘을 클릭하여 관리자 옵션을 엽니다.
3. “Pin Topic…”를 선택합니다.
4. 새 창에서 Make Banner Topic을 선택합니다.

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

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

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

영구 배너 (Permanent banner)

항상 표시되며 사용자가 닫을 수 없는 배너를 만들려면:

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

영구 배너를 위한 팁:

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

고급 배너 (Advanced banners)

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

Welcome Link Banner

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

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

Versatile Banner

가장 인기 있고 잘 유지 관리되는 구성 요소 중 하나인 Versatile Banner는 인터페이스를 통해 광범위한 사용자 정의 옵션을 제공합니다:

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

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

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

[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에서 이 기능을 재현할 수 있는 방법이 있을까요?

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

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

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

미리 감사드립니다!