디스코urs 스티커

Don · 10월 3, 2023, 11:19오전


	요약	스티커 추가
	미리보기	Theme Creator
	저장소	GitHub - VaperinaDEV/discourse-stickers: With this theme component you can add stickers. · GitHub
	도움이 되셨나요?	> ./support --coffee
	설치 가이드	테마 또는 테마 컴포넌트 설치 방법
	디스코urs 테마를 처음 사용하시나요?	디스코urs 테마 사용 입문가 가이드

이 테마 컴포넌트 설치

Discourse Stickers v1.0

안녕하세요

이 테마 컴포넌트를 사용하면 게시글과 채팅 메시지에 스티커를 추가할 수 있습니다…

동작 방식

컴포저에 버튼을 배치하여 스티커 모달을 엽니다.

스티커 모달

스티커를 클릭하면 컴포저에 추가됩니다.
이미지 마크다운 코드는 [wrap=sticker] img [/wrap] 안에 들어가므로, 스티커 이미지는 다른 이미지와 별도로 대상 지정이 가능합니다.

스티커는 항상 새 줄로 이동하며 제목과 크기를 포함합니다. 현재 크기는 180x180px로 고정되어 있습니다. 각 스티커에는 그림자가 있어 이미지가 더 스티커처럼 보입니다…
컴포저와 게시글에서 호버 시 메타 정보는 CSS로 숨겨집니다.

설정 방법

먼저 스티커로 사용할 이미지를 업로드해야 합니다. 주제 게시글에 해당 이미지를 간단히 업로드하세요.
이 이미지들을 사용하여 이미지 URL과 마크다운 URL이 필요합니다.

예시:
게시글에 이미지를 업로드했습니다. 이미지 URL의 optimized 버전을 사용했습니다. 이는 여기 에서 찾을 수 있지만, 이미지의 어떤 URL을 사용해도 됩니다.

괄호 안의 마크다운 업로드 URL
Screenshot 2023-10-03 at 13.07.41

설정

스티커 이미지
스티커 이미지 설정에서 스티커를 설정할 수 있습니다…

제목: 이는 이미지 제목과 alt입니다. 마크다운 코드 제목에도 들어가게 됩니다.

이모지: 스티커 모달에서 각 스티커의 오른쪽 위 모서리에 표시됩니다.

previewUrl: 스티커 모달에 표시되는 이미지입니다.

markdownUrl: 이전에 업로드된 이미지의 마크다운 URL입니다.

Discourse Stickers v2.0

안녕하세요

이 테마 컴포넌트를 사용하면 게시글, 답글, 채팅 메시지에 스티커를 추가할 수 있습니다.

버전 2.0에서는 네이티브 이미지 업로드, 스티커 그룹, 카테고리 기반 가시성, 채팅 전용 컨트롤을 갖춘 재설계된 스티커 관리자를 소개합니다.

작동 방식

이 컴포넌트는 컴포저에 스티커 버튼을 추가합니다. 클릭하면 스티커 선택기가 열립니다.

스티커를 선택하면 컴포저에 직접 삽입됩니다.

일반 게시글과 답글의 경우, 스티커는 다음으로 감싸집니다:

[wrap=sticker]![Sticker title|180x180](image)[/wrap]

이를 통해 스티커 이미지를 일반 이미지와 별도로 스타일링할 수 있습니다.

게시된 스티커는 클릭할 수 없으며 디스코urs 라이트박스가 열리지 않습니다.

스티커 선택기

스티커 선택기는 스티커 컬렉션이 큰 경우 그룹을 지원합니다.

여러 그룹이 구성되면 선택기 상단에 필터 바가 표시됩니다.

그룹이 없는 스티커는 자동으로 기타 아래에 배치됩니다.

현재 컨텍스트에서 사용할 수 있는 스티커가 없으면 선택기는 빈 상태를 표시합니다.

설정 방법

스티커 구성은 v2.0에서 완전히 재설계되었습니다.

이제 이미지를 먼저 주제에 업로드하거나 이미지 URL을 수동으로 복사할 필요가 없습니다.

컴포넌트 설정으로 이동하여 스티커를 추가하기만 하면 됩니다. 이미지 필드를 사용하면 스티커를 직접 업로드할 수 있습니다.

스티커 설정

이제 각 스티커에는 다음 속성이 있을 수 있습니다:

제목

스티커의 이름입니다. 이는 스티커의 도구チップ과 alt 텍스트로 사용됩니다.

그룹

선택 사항입니다. 그룹을 사용하여 스티커를 정리하고 선택기에서 필터링하세요.

비워 두면 스티커가 기타 아래에 배치됩니다.

이모지 배지

선택 사항입니다. 스티커의 모서리에 작은 이모지를 표시합니다.

실제 이모지 또는 :heart: 또는 :smile:과 같은 디스코urs 쇼트코드를 사용할 수 있습니다.

이미지

스티커 이미지입니다.

설정을 사용하여 이미지를 직접 업로드하세요. 동일한 이미지가 선택기와 게시된 스티커 모두에 사용됩니다.

카테고리

선택 사항입니다. 스티커를 특정 카테고리로 제한합니다.

카테고리가 선택되면, 해당 카테고리 중 하나가 선택되었을 때에만 일반 게시글/답글 컴포저에서 스티커가 표시됩니다.

모든 카테고리에서 스티커를 사용 가능하게 하려면 비워 두세요.

이 설정은 채팅에 영향을 주지 않습니다.

직접 메시지에서는 숨김

활성화하면 스티커가 개인/직접 메시지 채팅에서 사용할 수 없게 됩니다.

채팅 채널

선택 사항입니다. 스티커를 특정 공개 채팅 채널로 제한합니다.

쉼표로 구분하여 채널 ID를 입력하세요.

예를 들어, 채널 URL이 다음과 같은 경우:

/chat/c/channel-name/123

다음과 같이 사용하세요:

123

모든 공개/카테고리 채팅 채널에서 스티커를 사용 가능하게 하려면 비워 두세요.

v1.x에서 업그레이드

이미 이전 버전의 컴포넌트를 사용 중이라면, 스티커 컬렉션을 다시 만들 필요가 없습니다.

v2.0에는 이전 sticker_images 구성을 새 형식으로 자동으로 변환하는 설정 마이그레이션이 포함되어 있습니다.

마이그레이션은 다음을 보존합니다:

스티커 제목
이모지 배지
기존에 업로드된 스티커 이미지

기존에 업로드된 이미지는 원래 디스코urs 업로드로 다시 해석되어 새 이미지 필드에 입력됩니다.

기존 previewUrl 및 markdownUrl 설정은 더 이상 필요하지 않습니다.

컴포넌트를 업데이트하기만 하면 기존 스티커가 자동으로 마이그레이션되어야 합니다.

Canapin · 10월 3, 2023, 11:52오전

Don님, 안녕하세요

잘하셨네요! 잠깐 살펴봤어요

스티커 관리는 좀 번거롭네요 – 특히 미리보기 부분이요 – 이를 위한 전용 레이아웃이나 기능이 없기 때문이죠 (아바타나 커스텀 이모지처럼 말이에요). 하지만 더 많은 작업이 필요할 거라는 건 이해해요.

GIF가 정지되면 드롭 섀도우 필터가 비활성화되고, 여기 중간 이미지(라이트박스를 트리거하는 직사각형 JPG)에는 사각형 배경으로 나타나지 않아요:

chrome_k71dGHbeLH

필터 효과는 정말 멋진데, 선택적 설정으로 두는 걸 추천해요

스티커 선택기는 다음과 같은 양쪽 정렬(justified)을 사용하나요:

XXX
 X

하지만 오른쪽 정렬을 더 선호할 것 같아요:

XXX
X

물론 제 개인적인 의견이지만요

Don · 10월 3, 2023, 2:10오후

피드백 감사합니다 @Canapin

이 부분을 위해 새로운 설정을 추가했습니다…
Screenshot 2023-10-03 at 16.04.17

이것도 완료했습니다… 훨씬 좋습니다

Don · 10월 3, 2023, 4:54오후

업데이트: DEV: Adding DTooltip to sticker picker modal images · VaperinaDEV/discourse-stickers@b6c30eb · GitHub

mattdm · 10월 28, 2023, 3:53오후

이것을 특정 카테고리로 제한할 수 있을까요? (그리고, 각 카테고리에 다른 스티커를 사용할 수도 있을까요?)

hoangphuctran93 · 10월 28, 2023, 4:37오후

관리자가 스티커 그룹을 생성할 수 있고, 사용자가 좋아하는 주제별로 그룹을 지정하여 스티커 선택을 맞춤화할 수 있다면 좋겠습니다. 또한, 사용자가 게시물에서 특정 아이콘을 사용할 때 설치된 아이콘을 기반으로 추천하는 기능도 생각해 볼 수 있지만, 이는 구현이 어려운 기능이라고 생각합니다.

deltaR · 11월 9, 2023, 2:12오후

텍스트 줄 안에 스티커를 표시하려면 어떻게 해야 하는지 여쭤봐도 될까요? (이 저장소를 포크했습니다)

Don · 11월 9, 2023, 4:31오후

안녕하세요

네, 이 줄의 앞뒤에서 \n을 제거해야 합니다.

github.com/deltaR-3k/discourse-stickers

javascripts/discourse/components/modal/sticker.js

main


      
          @tracked stickerImages = JSON.parse(settings.sticker_images);
          @service site;
          @service capabilities;
          
          @action
          pick() {
            let stickerImage = document.querySelectorAll(".sticker-pack span.sticker-holder img.sticker:hover");
            stickerImage.forEach((sticker) => {
              sticker.classList.add("picked");
              sticker.addEventListener("animationend", () => {
                let markupComposer = `![${sticker.alt}|60x52](${sticker.getAttribute("markdownUrl")})`;
                let markupChatComposer = `![${sticker.alt}|60x52](${sticker.getAttribute("markdownUrl")})`;
                if (this.args.model?.customPickHandler) {
                  this.args.model.customPickHandler(markupChatComposer);
                } else {
                  getOwner(this).lookup("service:app-events").trigger("composer:insert-text", markupComposer);
                }
                this.args.closeModal();
              });
            });
          }

@mattdm 안녕하세요 답변이 늦어서 죄송합니다. 네, 카테고리별로 컴포저에서 버튼을 표시하는 것은 가능할 것 같습니다. 확인해 봐야겠습니다.

컴포넌트를 설정하는 것 자체가 이미 조금 복잡합니다. 이 부분은 확신이 서지 않습니다.

안녕하세요 네, 이건 또 다른 차원의 문제입니다. 현재 이 빌드로는 가능한지 확신이 서지 않습니다.

deltaR · 11월 9, 2023, 5:03오후

답장 주셔서 감사합니다!
하지만 변경한 후 스티커가 표시되지 않아요. 이런 식으로요.

Don · 11월 9, 2023, 5:13오후

아, 실수했네요. 죄송합니다. [wrap=sticker]와 [/wrap] 태그도 제거해야 할 것 같습니다. 그러면 이미지가 인라인으로 표시되므로 누락되지 않을 가능성이 높습니다.

[wrap=sticker]는 스티커 이미지에 스타일링을 추가하는 용도로만 사용됩니다.

github.com/deltaR-3k/discourse-stickers

common/common.scss

f28fb4b9c


      
          .d-wrap[data-wrap="sticker"] {
            @include user-select(none);
            img {
              width: 75px !important;
              height: 65px !important;
              aspect-ratio: 75 / 65 !important;
              @if $stickers_shadow == "true" {
                filter: drop-shadow(2px 2px 2px rgba(var(--always-black-rgb), 0.8));
              }
            }
            .button-wrapper {
              display: none;
            }
            a.lightbox {
              .discourse-touch & {
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                transition: filter 200ms;
                &:active {
                  filter: brightness(0.8);
                }

This file has been truncated. show original

deltaR · 11월 9, 2023, 5:23오후

아, 인라인 표시에서는 [wrap=sticker]를 사용할 수 없나요?
동작하네요, 감사합니다!

ps: markdownUrl이 너무 길어 공간을 많이 차지하므로, Composer에서 이를 숨기는 것이 가능한지 궁금합니다.

Don · 8월 14, 2026, 2:31오후

Discourse 스티커 v2.0

이번 릴리스는 해당 컴포넌트의 상당한 현대화를 포함합니다. 여러 내부 개선 사항 외에도, 더 큰 스티커 컬렉션을 훨씬 쉽게 관리할 수 있도록 스티커 구성이 재설계되었습니다.

완전히 재설계된 스티커 설정

v2.0의 가장 큰 변화는 스티커 구성 자체입니다.

구버전에서는 스티커를 다음과 같은 값을 포함하는 JSON 설정으로 저장했습니다:

title
emoji
previewUrl
markdownUrl

v2.0에서는 이것이 Discourse의 네이티브 objects 설정 유형으로 대체되었습니다.

각 스티커는 이제 자체 필드를 가진 적절한 구성 가능한 객체입니다:

제목 - 스티커 이름 / 툴팁 텍스트
그룹 - 스티커를 그룹으로 분류하여 정리 (선택 사항)
이모지 배지 - 구석에 작은 이모지를 표시 (선택 사항)
이미지 - 설정을 통해 스티커를 직접 업로드
카테고리 - 특정 카테고리로 스티커를 제한 (선택 사항)
직접 메시지 숨기기 - 스티커가 DM에서 사용 가능한지 여부 제어
채팅 채널 - 특정 공개 채팅 채널로 스티커를 제한 (선택 사항)

이를 통해 스티커 구성을 이해하고 유지보수하기가 훨씬 쉬워졌으며, 특히 큰 컬렉션에서 그 효과가 큽니다.

스티커 그룹 및 필터링

이제 스티커를 그룹에 할당할 수 있습니다.

여러 그룹이 사용 가능한 경우, 스티커 선택기에 자동으로 상단에 필터 바가 표시됩니다.

다음 사이에서 전환할 수 있습니다:

전체
개별 그룹
그룹이 없는 스티커를 위한 기타

필터는 현재 사용자에게 사용 가능한 스티커를 기반으로 동적으로 생성됩니다.

카테고리별 스티커

이제 스티커를 특정 Discourse 카테고리에 선택적으로 할당할 수 있습니다.

스티커에 카테고리가 설정된 경우, 해당 카테고리 중 하나가 선택된 경우에만 일반 게시글/답글 작성기에 표시됩니다.

카테고리가 설정되지 않은 경우, 스티커는 모든 곳에서 사용 가능합니다.

채팅 스티커에 대한 더 많은 제어

v2.0은 Discourse 채팅에서 스티커 사용 가능 범위에 대한 더 많은 제어를 추가합니다.

이제 다음을 수행할 수 있습니다:

개별 스티커를 직접 메시지에서 숨기기;
스티커를 특정 공개 채팅 채널로 제한;
채널 설정을 비워 두면 모든 공개/카테고리 채팅 채널에서 스티커를 사용 가능하게 함.

이를 통해 관리자는 커뮤니티의 다른 부분에 대해 서로 다른 스티커 세트를 유지할 수 있습니다.

게시된 스티커는 더 이상 클릭할 수 없음

게시된 스티커는 이제 비인터랙티브 이미지로 취급됩니다.

클릭할 때 더 이상 Discourse 라이트박스를 열지 않습니다.

이는 다음 모두에 적용됩니다:

일반 게시글의 스티커;
채팅에 게시된 스티커.

이 목표는 스티커가 일반적인 업로드된 이미지보다 실제 스티커/반응 콘텐츠처럼 작동하도록 만드는 것입니다.

개선된 빈 상태

현재 컨텍스트에서 사용 가능한 스티커가 없는 경우, 선택기는 단순히 빈 선택기를 표시하는 대신 적절한 빈 상태를 표시합니다.

예를 들어, 카테고리 또는 채팅 제한으로 인해 어떤 스티커도 사용 불가능한 경우 이 상황이 발생할 수 있습니다.

기존 스티커 구성이 마이그레이션됩니다

v2.0의 가장 중요한 부분 중 하나는 기존 설치 환경에서 스티커 컬렉션을 다시 생성할 필요가 없다는 점입니다.

컴포넌트가 업데이트될 때旧的 sticker_images JSON 설정이 자동으로 새로운 objects 형식으로 마이그레이션됩니다.

기존 스티커 제목과 이모지 값은 보존됩니다.

가장 중요한 것은, 기존에 업로드된 스티커 이미지도 자동으로 마이그레이션된다는 점입니다.

따라서 이미 수십 개의 스티커가 구성되어 있다면, v2.0으로 업데이트할 때 모든 것을 다시 업로드할 필요가 없습니다.

旧的 markdownUrl 속성은 더 이상 필요하지 않으며, 새로운 Image 필드가 실제 Discourse 업로드를 나타내기 때문에 이관되지 않습니다.

github.com/VaperinaDEV/discourse-stickers

FEATURE: Modernize Discourse Stickers (#5)

main ← v2.0

merged 02:27PM - 14 Aug 26 UTC

VaperinaDEV

+424 -126

Modernizes the component and significantly expands sticker management. ### Wh…at's included - Migrate `sticker_images` from the legacy JSON setting to Discourse's native `objects` setting. - Add native image uploads for stickers. - Add optional sticker groups with filtering in the picker. - Add category-based sticker visibility. - Add Chat-specific visibility controls for direct messages and channels. - Modernize the sticker modal to Glimmer. - Improve sticker selection by passing the selected sticker directly to the action. - Prevent published stickers from opening the lightbox. - Add a proper empty state when no stickers are available. - Add localization for the new UI and settings. - Add a settings migration that preserves existing sticker titles, emojis, and uploaded images when upgrading from the previous version. ### Migration Existing `sticker_images` configurations are automatically migrated when the component is updated. Legacy sticker image URLs are resolved back to their existing Discourse uploads, so existing stickers do not need to be uploaded again. The legacy `markdownUrl` property is no longer used because the new `image` property directly represents the sticker upload.

OP도 업데이트했습니다.

글		댓글	조회수
Telegram-like stickers? Feature	8	2058	1월 25, 2024
Discourse Chat Plugin official , chat , included-in-core	43	35077	7월 29, 2026
Image comparison slider Theme component	31	4200	6월 6, 2026
Emoji Fluff Theme component	39	2043	11월 28, 2025
MD Composer extras Theme component	70	10303	7월 8, 2025

디스코urs 스티커

Discourse Stickers v2.0

작동 방식

스티커 선택기

설정 방법

스티커 설정

v1.x에서 업그레이드

Discourse 스티커 v2.0

완전히 재설계된 스티커 설정

스티커 그룹 및 필터링

카테고리별 스티커

채팅 스티커에 대한 더 많은 제어

게시된 스티커는 더 이상 클릭할 수 없음

개선된 빈 상태

기존 스티커 구성이 마이그레이션됩니다

Related topics