Стикеры Discourse

Don · 03.Октябрь.2023 11:19:44


	Сводка	Добавление стикеров
	Предпросмотр	Theme Creator
	Репозиторий	GitHub - VaperinaDEV/discourse-stickers: With this theme component you can add stickers. · GitHub
	Полезно?	> ./support --coffee
	Руководство по установке	Как установить тему или компонент темы
	Новичок в темах Discourse?	Начальное руководство по использованию тем Discourse

Установить этот компонент темы

Discourse Stickers v1.0

Привет

С помощью этого компонента темы вы можете добавлять стикеры в посты и сообщения в чате…

Как это работает?

Он добавляет кнопку в композер, которая открывает модальное окно стикеров.

Модальное окно стикеров

Когда вы нажимаете на стикер, он добавляется в композер.
Код изображения в формате Markdown помещается внутрь [wrap=sticker] img [/wrap], что означает, что изображения стикеров можно стилизовать отдельно от других изображений.

Стикеры всегда переносится на новую строку и содержат заголовок и размер. Размер сейчас фиксирован: 180x180px. У каждого стикера есть тень, которая делает изображение более похожим на настоящий стикер…
В композере и в постах метаинформация при наведении курсора скрыта с помощью CSS.

Как настроить?

Сначала вам нужно загрузить изображения, которые вы хотите использовать для стикеров. Просто загрузите эти изображения в пост темы.
Мы будем работать с этими изображениями, нам нужны URL изображения и URL в формате Markdown.

Пример:
Я загрузил изображение в пост. Я использую optimized версию URL изображения. Она находится здесь но вы можете использовать любой URL изображения.

URL загрузки в формате Markdown в скобках
Screenshot 2023-10-03 at 13.07.41

Настройки

Изображения стикеров
В настройке изображений стикеров вы можете настроить стикеры…

Заголовок (title): Это заголовок изображения и alt-текст. Он также попадет в заголовок кода Markdown.

Эмодзи (emoji): Оно будет отображаться в модальном окне стикеров в правом верхнем углу каждого стикера.

previewUrl: Это изображение, которое отображается в модальном окне стикеров.

markdownUrl: Это ранее загруженный URL изображения в формате Markdown.

Discourse Stickers v2.0

Привет

С помощью этого компонента темы вы можете добавлять стикеры в посты, ответы и сообщения в чате.

Версия 2.0 представляет переработанный менеджер стикеров с нативной загрузкой изображений, группами стикеров, видимостью на основе категорий и специальными элементами управления для чата.

Как это работает?

Компонент добавляет кнопку стикера в композер. Нажатие на нее открывает выбор стикеров.

Когда вы выбираете стикер, он вставляется непосредственно в композер.

Для обычных постов и ответов стикеры оборачиваются в:

[wrap=sticker]![Заголовок стикера|180x180](изображение)[/wrap]

Это позволяет стилизовать изображения стикеров отдельно от обычных изображений.

Опубликованные стикеры не являются кликабельными и не открывают лайтбокс Discourse.

Выбор стикеров

Выбор стикеров поддерживает группы, если у вас есть большая коллекция стикеров.

Если настроено несколько групп, в верхней части окна выбора отображается панель фильтрации.

Стикеры без группы автоматически помещаются в раздел Другое.

Если для текущего контекста нет доступных стикеров, в окне выбора отображается пустое состояние.

Как настроить?

Конфигурация стикеров была полностью переработана в v2.0.

Теперь вам больше не нужно сначала загружать изображения в тему или вручную копировать URL изображений.

Просто перейдите в настройки компонента и добавьте стикер. Поле Изображение позволяет вам загрузить стикер непосредственно.

Настройки стикера

Теперь каждый стикер может иметь следующие свойства:

Заголовок (Title)

Имя стикера. Это используется как всплывающая подсказка и alt-текст стикера.

Группа (Group)

Необязательно. Используйте группы для организации стикеров и фильтрации их в окне выбора.

Оставьте пустым, чтобы поместить стикер в раздел Другое.

Значок эмодзи (Emoji badge)

Необязательно. Отображает небольшой эмодзи в углу стикера.

Вы можете использовать настоящий эмодзи или шорткод Discourse, такой как :heart: или :smile:.

Изображение (Image)

Изображение стикера.

Загрузите изображение непосредственно, используя настройку. То же самое изображение используется как в окне выбора, так и для опубликованного стикера.

Категории (Categories)

Необязательно. Ограничьте стикер определенными категориями.

Если категории выбраны, стикер будет отображаться только в композере обычных постов/ответов, когда выбрана одна из этих категорий.

Оставьте пустым, чтобы сделать стикер доступным во всех категориях.

Эта настройка не влияет на чат.

Скрыть из личных сообщений

Если включено, стикер не будет доступен в личных/прямых сообщениях в чате.

Каналы чата (Chat channels)

Необязательно. Ограничьте стикер определенными публичными каналами чата.

Введите идентификаторы каналов через запятую.

Например, если URL канала:

/chat/c/channel-name/123

используйте:

123

Оставьте пустым, чтобы сделать стикер доступным во всех публичных/категорийных каналах чата.

Обновление с v1.x

Если вы уже используете более старую версию компонента, вам не нужно пересоздавать вашу коллекцию стикеров.

v2.0 включает миграцию настроек, которая автоматически преобразует старую конфигурацию sticker_images в новый формат.

Миграция сохраняет:

заголовки стикеров
значки эмодзи
ранее загруженные изображения стикеров

Ранее загруженные изображения снова сопоставляются с их исходными загрузками в Discourse и заполняют новое поле Изображение.

Старые настройки previewUrl и markdownUrl больше не требуются.

Просто обновите компонент, и ваши существующие стикеры должны быть перенесены автоматически.

Стикеры Discourse Theme component

Стикеры Discourse v2.0 Этот релиз представляет собой довольно значительную модернизацию компонента. Помимо ряда внутренних улучшений, конфигурация стикеров была переработана, чтобы значительно упростить управление большими коллекциями стикеров. [Screenshot 2026-08-14 at 16.28.56] [Screenshot 2026-08-14 at 16.29.18] [Screenshot 2026-08-14 at 16.29.25] [Screenshot 2026-08-14 at 16.29.07] Полностью переработанные настройки стикеров Самое крупное изменение в версии 2.0 касае…

Canapin · 03.Октябрь.2023 11:52:47

Привет, Дон

Отличная работа! Я быстро посмотрел

Управление стикерами немного утомительно — особенно часть с предпросмотром — так как для этого нет специального макета или функции (как, например, для аватаров и пользовательских эмодзи), но я понимаю, что это потребовало бы гораздо больше работы.

Фильтр тени отключается, когда GIF-анимация остановлена, и не отображается как квадратный фон на среднем изображении здесь (прямоугольный JPG, который открывает лайтбокс):

chrome_k71dGHbeLH

Эффект фильтра действительно классный, но я бы сделал его опциональной настройкой

Выборщик стикеров использует выравнивание по центру, например:

XXX
 X

Но, думаю, мне больше понравилось бы выравнивание по правому краю:

XXX
X

Конечно, это чисто личное мнение

Don · 03.Октябрь.2023 14:10:33

Спасибо за обратную связь, @Canapin

Я добавил новую настройку для этого…
Screenshot 2023-10-03 at 16.04.17

Это тоже сделано… Гораздо лучше

Don · 03.Октябрь.2023 16:54:57

Обновление: DEV: Adding DTooltip to sticker picker modal images · VaperinaDEV/discourse-stickers@b6c30eb · GitHub

mattdm · 28.Октябрь.2023 15:53:09

Возможно ли ограничить это определенными категориями? (И, кстати, иметь разные стикеры для каждой категории?)

hoangphuctran93 · 28.Октябрь.2023 16:37:33

Если вы сможете разрешить администраторам создавать группы стикеров, а пользователям — настраивать выбор стикеров в соответствии с каждой группой их любимых тем.

Кроме того, можно рекомендовать иконки на основе установленных, когда пользователь использует иконку в статье, но, думаю, это сложная функция.

deltaR · 09.Ноябрь.2023 14:12:03

Могу я спросить, что нужно сделать, чтобы стикер отображался в строке текста, а не на новой строке? (Я сделал форк этого репозитория)

Don · 09.Ноябрь.2023 16:31:36

Привет

Да, вам нужно убрать \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 · 09.Ноябрь.2023 17:03:36

Спасибо за ответ!
Но после изменения стикер не отображается, вот так

Don · 09.Ноябрь.2023 17:13:57

Ой, извините, я думаю, вам стоит также удалить [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 · 09.Ноябрь.2023 17:23:16

Понятно, для встроенного отображения нельзя использовать [wrap=sticker]?
Работает, спасибо!

PS: Мне интересно, можно ли скрыть markdownUrl в редакторе, так как это будет длинная ссылка, занимающая слишком много места?

Don · 14.Август.2026 14:31:04

Стикеры Discourse v2.0

Этот релиз представляет собой довольно значительную модернизацию компонента. Помимо ряда внутренних улучшений, конфигурация стикеров была переработана, чтобы значительно упростить управление большими коллекциями стикеров.

Полностью переработанные настройки стикеров

Самое крупное изменение в версии 2.0 касается самой конфигурации стикеров.

В старой версии стикеры хранились в виде JSON-настройки, содержащей такие значения, как:

title
emoji
previewUrl
markdownUrl

В версии 2.0 это было заменено на встроенный тип настройки objects в Discourse.

Теперь каждый стикер является полноценным настраиваемым объектом со своими собственными полями:

Название — имя стикера / текст подсказки
Группа — возможность группировать стикеры по категориям
Эмодзи-значок — возможность отображать небольшой эмодзи в углу
Изображение — загрузка стикера непосредственно через настройку
Категории — возможность ограничить использование стикеров определенными категориями
Скрыть в личных сообщениях — управление доступностью стикера в личных сообщениях (DM)
Каналы чата — возможность ограничить использование стикеров определенными публичными каналами чата

Это делает конфигурацию стикеров гораздо более понятной и удобной для поддержки, особенно для больших коллекций.

Группы стикеров и фильтрация

Теперь вы можете назначать стикеры Группе.

Когда доступно несколько групп, в выборщике стикеров автоматически отображается панель фильтрации вверху.

Вы можете переключаться между:

Все
отдельными группами
Другие для стикеров без группы

Фильтр генерируется динамически на основе стикеров, доступных пользователю в данный момент.

Стикеры для конкретных категорий

Теперь стикеры можно необязательно назначать конкретным категориям Discourse.

Если для стикера настроены категории, он будет отображаться в обычном редакторе постов/ответов только при выборе одной из этих категорий.

Если категории не настроены, стикер остается доступным везде.

Больше контроля над стикерами в чате

Версия 2.0 добавляет больше возможностей для управления доступностью стикеров в чате Discourse.

Теперь вы можете:

скрывать отдельные стикеры в личных сообщениях;
ограничивать использование стикеров определенными публичными каналами чата;
оставить поле канала пустым, чтобы сделать стикер доступным во всех публичных/категорийных каналах чата.

Это позволяет администраторам поддерживать разные наборы стикеров для разных частей своего сообщества.

Опубликованные стикеры больше не кликабельны

Опубликованные стикеры теперь рассматриваются как неинтерактивные изображения.

При клике на них больше не открывается лайтбокс Discourse.

Это применимо как к:

стикерам в обычных постах;
стикерам, отправленным в чате.

Цель состоит в том, чтобы стикеры вели себя больше как контент стикеров/реакций, а не как обычные загруженные изображения.

Улучшенное состояние пустоты

Если для текущего контекста нет доступных стикеров, выборщик теперь отображает корректное состояние пустоты вместо простого показа пустого выборщика.

Например, это может произойти, когда ограничения по категориям или чату не позволяют использовать ни один стикер.

Существующие конфигурации стикеров мигрируются

Одной из самых важных частей версии 2.0 является то, что существующим установкам не нужно заново создавать свою коллекцию стикеров.

Старая JSON-настройка sticker_images автоматически мигрируется в новый формат objects при обновлении компонента.

Существующие названия стикеров и значения эмодзи сохраняются.

Что особенно важно, существующие загруженные изображения стикеров также мигрируются автоматически.

Так что, если у вас уже настроены десятки стикеров, обновление до версии 2.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.

Тема		Ответов	Просм.
Telegram-like stickers? Feature	8	1997	25.01.2024
Discourse Chat Plugin official , chat , included-in-core	43	34574	29.07.2026
Image comparison slider Theme component	31	4016	06.06.2026
Emoji Fluff Theme component	39	1817	28.11.2025
MD Composer extras Theme component	70	10030	08.07.2025

Стикеры Discourse

Discourse Stickers v2.0

Как это работает?

Выбор стикеров

Как настроить?

Настройки стикера

Обновление с v1.x

Стикеры Discourse v2.0

Полностью переработанные настройки стикеров

Группы стикеров и фильтрация

Стикеры для конкретных категорий

Больше контроля над стикерами в чате

Опубликованные стикеры больше не кликабельны

Улучшенное состояние пустоты

Существующие конфигурации стикеров мигрируются

Связанные темы