Стикеры Discourse

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


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

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

Discourse Stickers v1.0

Привет

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

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

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

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

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

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

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

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

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

URL-адрес загрузки в формате Markdown в скобках

Настройки

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

Заголовок: Это заголовок и альтернативный текст изображения. Он также будет добавлен в заголовок кода Markdown.

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

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

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

Discourse Stickers v2.0

Привет

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заголовок

Название стикера. Это используется как всплывающая подсказка и альтернативный текст стикера.

Группа

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

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

Значок эмодзи

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

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

Изображение

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

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

Категории

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

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

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

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

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

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

Каналы чата

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

Введите идентификаторы каналов, разделенные запятыми.

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

/chat/c/channel-name/123

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

123

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

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

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

Версия 2.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	1982	25.01.2024
Discourse Chat Plugin official , chat , included-in-core	43	34162	29.07.2026
Image comparison slider Theme component	31	3861	06.06.2026
Emoji Fluff Theme component	39	1699	28.11.2025
MD Composer extras Theme component	70	9858	08.07.2025

Стикеры Discourse

Discourse Stickers v2.0

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

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

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

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

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

Стикеры Discourse v2.0

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

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

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

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

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

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

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

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