알림 배너

커스터마이징 테마 컴포넌트
1
:information_source: 요약 Notification Banners 테마 컴포넌트는 사이트에 메시지를 공유할 수 있는 사용자 정의 가능하고 유연한 방법을 제공합니다.
:eyeglasses: 미리보기 Theme Creator
:hammer_and_wrench: 저장소 https://github.com/gormus/discourse-notification-banners
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: Discourse 테마를 처음 사용하시나요? Discourse 테마 사용 입문가 가이드

이 테마 컴포넌트 설치

Notification Banners 테마 컴포넌트는 사이트에 메시지를 공유할 수 있는 사용자 정의 가능하고 유연한 방법을 제공합니다.

Demonstrating Notification Banners in all available regions; stacked and in carousel mode with various background colors
Demonstrating Notification Banners in all available regions; stacked and in carousel mode with various background colors1920×1667 208 KB

Settings of an individual notification banner
Settings of an individual notification banner2280×1960 446 KB

주요 기능은 다음과 같습니다:

  • 완전한 사용자 정의: 콘텐츠, 스타일, 동작 등을 포함하여 각 배너를 필요에 맞게 맞춤 설정할 수 있습니다.
  • 유연한 표시 옵션: 배너를 스택 방식으로 표시하거나 쉬운 탐색을 위해 회전 캐러셀로 표시할 수 있습니다.
  • 대상 지정 메시징: 배너를 특정 사용자 그룹에만 표시하여 개인화된 소통을 보장합니다.
  • 테마 지원: 배너가 라이트 또는 다크 테마에 자동으로 조정되거나, 사용자 정의 색상을 설정할 수 있습니다.
  • Markdown 지원: Markdown을 사용하여 배너 메시지를 쉽게 서식 지정할 수 있습니다.
  • Splide 기반 캐러셀: 캐러셀 기능은 Splide JavaScript 라이브러리로 구동되며, 각 배너에 대한 개별 설정이 가능합니다.
  • 스케줄링: 배너가 표시되어야 하는 시작일과 종료일을 지정할 수 있습니다.
  • 쉬운 표시 순서: 간단한 설정으로 배너가 표시되는 순서를 제어할 수 있습니다.

이 컴포넌트는 시각적으로 매력적이고 개인화되며 잘 정리된 알림으로 청중의 참여를 유도하는 것을 쉽게 만들어 줍니다.

설치

  1. 공식 지침을 따라 이 테마 컴포넌트를 테마에 추가하세요:
    https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#add-theme-components-to-a-theme-9

  2. theme authorized extensions 설정을 변경하여 css 및 js 파일 확장자를 포함하도록 하세요.

기능

각 알림 배너에는 다음 기능이 있을 수 있습니다:

  • 제목, 선택 사항, 메시지 위에 H2 헤딩으로 표시됩니다
  • 메시지, 500자 길이의 간단한 알림 메시지입니다. Markdown이 지원됩니다.
  • 대상, 알림의 대상으로 사용자 그룹을 선택합니다.
  • 카테고리; 배너를 표시할 카테고리를 선택합니다. 비워 두면 모든 카테고리에 표시됩니다.
  • 배경 색상, 다른 배너와 구별하기 위해 설정할 수 있습니다.
  • 플러그인 아울렛, 사이트 헤더 위 또는 아래에 알림을 설정하거나, top-notices 아울렛을 사용하여 네이티브 토픽 배너와 함께 표시할 수 있습니다.
  • 캐러셀로 표시, 선택 시 각 아울렛의 모든 배너가 캐러셀로 표시됩니다. 아울렛당 최소 2개의 배너가 선택되어야 합니다.
  • 닫을 수 있음, 선택 시 사용자가 배너를 닫을 수 있으며, 해당 사용자에게는 숨겨집니다.
  • 시작일 및 마지막 날짜, 정의된 경우 배너의 가시성이 해당 날짜를 따릅니다. 따라서 배너를 미리 설정할 수 있지만, 설정된 날짜와 시간에만 선택된 대상에게 표시됩니다. 또는 마찬가지로 마지막 날짜에 배너가 자동으로 제거되도록 설정할 수 있습니다.
  • 표시 순서, 어떤 배너가 위에, 어떤 배너가 아래에 표시되어야 하는지 정의합니다. v1.3.0부터 네이티브 재정렬 버튼을 사용합니다.

캐러셀

슬라이드쇼 또는 캐러셀 기능은 Splide 라이브러리가 제공하며, MIT 라이선스로 배포됩니다.

각 캐러셀은 Splide 옵션을 사용하여 테마 컴포넌트 페이지에서 구성할 수 있습니다.

배너 색상

기본적으로 배너는 banner-topic과 동일한 색상을 사용합니다:

.notification-banner {
    background: var(--tertiary-low);
    color: var(--primary);
}

그러나 배너 설정에서 배경 색상이 정의된 경우, 그 명도에 따라 검은색 또는 흰색이 자동으로前景 색상으로 선택됩니다.

사용 가능한 CSS 클래스

.notification-banners--above-site-header,
.notification-banners--below-site-header,
.notification-banners--top-notices {

  .notification-banner {

    &__wrapper {
    }

    &__close {
    }

    &__header {
    }

    &__content {
    }
  }

  &.splide {
    .notification-banner {
    }
  }
}

.notification-banners--top-notices {
  .notification-banner {

    &__content {
    }
  }
}

v1.3.0에는 일부 대상에 영향을 미치는 깨짐 변경 사항이 있습니다

프로덕션 사이트를 업데이트하기 전에 변경 사항을 테스트하고 사용자 정의를 확인하는 것을 잊지 마세요.

30개의 좋아요
How can I make the home page similar to this one?
Add timer to banner topics
Prominent theme selector in header
Which plugin is this?
2024: The Year in Review
Update `theme authorized extensions` on discourse.theme-creator.io?
Can no longer create global banners from restricted categories
Granular group-based permissions for anonymous and logged in users
Discourse Persistent banner
2

Wow! This looks amazing - and super flexible.

Have you considered being able to restrict it to a category / categories?

9개의 좋아요
3

Thank you!

Actually I considered to include what I previously did with my Filtered Topic Lists theme-component; see the “Show on” section.

I was concerned it may make it more complicated, that’s why I didn’t include that option. Instead I opted in to use the user-groups as the audience for the banners.

But I’d be happy to include it if there would be a need for it.

5개의 좋아요
4

Very nice @gormus, thanks for sharing this component with the community. :discourse: :clap:

3개의 좋아요
5

Thanks @Lilly it’s my pleasure : )

3개의 좋아요
6

when i click the X button to close this banner popup, is there any mode to make it show again? I have selected in banner background repeat: repeat; repeat-x; repeat-y but it doesn’t work?

2개의 좋아요
7

Great! I’ll give it a real world whirl and see if it is actually needed or not before pestering you about it.

4개의 좋아요
8

Currently not. I didn’t consider any user would like to restore a dismissed notification.
Do you think there should be an option for it?

Could you clarify what you mean?

2개의 좋아요
9

I see what you mean, thank you!

3개의 좋아요
10

I’d be interested in this feature also (available to specific Category(s) that is). Thank you for considering.

4개의 좋아요
11

Categories are now supported as target audience. Single, or multiple categories can be selected per banner.

Please let me know what you think : )

5개의 좋아요
12

Currently my discourse page is running ver 3.4.0.beta3-dev and has an error that does not display the page when installing the banner. You can check again and have early updates for the community. Thank you for your sharing.

2개의 좋아요
13

Hi @hoangphuctran93,

Thanks for reporting the issue, I was able to confirm it via a clean install of Notification Banners on a Discourse 3.4.0.beta3-dev (d3f09f8f61)

I just pushed a fix, please update the instance on your site, hard refresh the page if necessary.

2개의 좋아요
14

thank you, they worked well, looking forward to your new ideas and updates. i have some suggestions as follows.

  1. Expand the input box
  2. allow quick selection of images besides designing with html.
  3. Add a data field to name the banner instead of using it with the title, this helps to categorize and manage when multiple banners are applied.

This is the result of the application on our discourse page.

The image is a screenshot of a web browser with a Vietnamese language interface displaying a group of advertisements and images on a Vietnamese website. (Captioned by AI)
The image is a screenshot of a web browser with a Vietnamese language interface displaying a group of advertisements and images on a Vietnamese website. (Captioned by AI)1242×2500 223 KB

1개의 좋아요
15

I’m having trouble with this part - the link is broken here. How can I authorize those extensions on my site?

Thanks!

16

You need to replace meta.discourse.org with the URL of your forum. You cannot access the admin area here.
https://meta.discourse.org/admin/site_settings/category/files?filter=theme%20authorized%20extensions

Or you can navigate to your site settings and search for theme authorized extensions

5개의 좋아요
17

Ah yes, thank you :slight_smile:

18

Another question here - when you say scheduling, is there a way to have the banner appear the same time every week? We have weekly recurring office hours that I would like this banner to display during those times, so anyone on the site can see office hours is currently happening and join if they want to

1개의 좋아요
19

You can enable a banner to start showing at a defined date and time, and removed at another.

So you can only have one schedule for starting and ending date and time.

What you are asking requires a more elaborate scheduling feature which Notification Banners doesn’t provide.

However you may still achieve what you need by creating copies of the same banner using different starting and ending dates.

I’d strongly recommend you to test this scenario before going live on production though.

And remember, regardless which time zone you are in, the datetime values must be entered in UTC, and must match the format seen in field descriptions.

4개의 좋아요
20

Thanks for the input!

Was hoping for a more automated solution here, as we have 3 different office hour sessions a week, every week, so would be quite a bit of manual work to make duplicate banners for all of these sessions.

I looked at the Automations plugin as another option, but the banner automation also only allows for “point in time”. and not “recurring” actions.

2개의 좋아요