Moetwemoji: Легкие анимированные эмодзи (AVIF) — оживите ваш форум

PixPin_2026-01-04_22-04-17

Всем привет! :waving_hand:

Я создал новый плагин, чтобы добавить больше энергии и динамичных выражений сообществам Discourse. Moetwemoji представляет набор анимированных эмодзи, которые делают взаимодействие более живым и веселым.

:rocket: Ключевые особенности

  • Супер-легковесность: Все эмодзи закодированы в формате AVIF.

  • Высокая производительность: Средний размер файла составляет всего около 10 КБ, что обеспечивает быструю загрузку вашего форума при сохранении отличного внешнего вида.

  • Гибкое развертывание: Я предлагаю две разные версии в зависимости от ваших потребностей (переопределение или дополнение).


:package: Выберите вашу версию

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

Вариант 1: Версия переопределения (полная замена)

Если вы хотите полностью заменить стандартный набор статических Twemoji на эти анимированные, используйте эту версию. Она переопределяет настройки системы по умолчанию, делая анимацию стандартным опытом.

Вариант 2: Версия пакета (дополнение)

Если вы предпочитаете оставить стандартные эмодзи и просто добавить эти как дополнительный «Пакет» в селектор эмодзи, используйте эту версию. Она добавляет новую вкладку в ваш селектор эмодзи, не затрагивая настройки по умолчанию.


19 лайков

Спасибо за публикацию :+1:

Я хотел протестировать, но это не работает, несмотря на добавление репозитория в файл app.yaml

Нужно указать какой-то параметр?

Спасибо

Хорошо, пожалуйста, попробуйте Ручную установку

Руководство по ручной установке (Версия с переопределением)

Это руководство объясняет, как вручную установить и применить плагин discourse-moetwemoji-twemoji-fakepng-override внутри работающего контейнера Discourse, а также разъясняет, почему полная пересборка не является строго необходимой для версии с переопределением.


1. Вход в контейнер Discourse

На вашем сервере перейдите в директорию Docker для Discourse (обычно /var/discourse) и войдите в работающий контейнер:

cd /var/discourse
./launcher enter app

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


2. Ручное клонирование плагина с переопределением

Перейдите в директорию плагинов и клонируйте репозиторий:

cd /var/www/discourse/plugins
git clone https://github.com/constansino/discourse-moetwemoji-twemoji-fakepng-override.git

Проверьте существование директории:

ls discourse-moetwemoji-twemoji-fakepng-override


3. Применение переопределения эмодзи

Вернитесь в корневую директорию Discourse:

su - discourse
cd /var/www/discourse

Проверьте текущий статус (необязательно, но рекомендуется):

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:status

Примените переопределение:

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:apply

Если команда завершится без ошибок, файлы PNG Twemoji будут заменены на Moetwemoji.


4. Важные примечания о пересборке (Сохранение изменений)

:red_exclamation_mark: Пересборка не требуется для работы переопределения

Эта версия с переопределением работает путем прямой замены файлов внутри работающего контейнера.
Следовательно:

  • :white_check_mark: Вам НЕ нужно запускать ./launcher rebuild app

  • :white_check_mark: Изменения вступают в силу сразу после выполнения задачи rake

:warning: Но изменения НЕ сохраняются

Поскольку это делается в файловой системе контейнера:

  • Любая будущая команда ./launcher rebuild app

  • Или пересоздание/обновление контейнера

удалит изменения, и переопределение эмодзи будет утеряно.

:backhand_index_pointing_right: Если вам нужна сохраняемость изменений при пересборках, вы должны установить плагин через хуки в файле app.yml и выполнить правильную пересборку.


5. Очистка кэша CDN и браузера (Очень важно)

После применения переопределения эмодзи могут оставаться неизменными из-за кэширования.

5.1 Очистка кэша CDN (например, Cloudflare)

Если вы используете CDN, например Cloudflare:

  • Очистите кэш для:

    • /images/emoji/*

    • или выполните полную очистку кэша, если это необходимо

В противном случае могут продолжать отдаваться старые файлы PNG Twemoji.

5.2 Очистка кэша браузера

На стороне клиента:

  • Выполните жесткую перезагрузку страницы (Ctrl + F5 / Cmd + Shift + R)

  • Или очистите кэш браузера

  • Или протестируйте в режиме инкогнито/приватном окне

Пока не будут очищены как кэш CDN, так и кэш браузера, изменения эмодзи могут быть не видны.


6. Резюме

  • Этот плагин с переопределением можно установить и применить без пересборки

  • Ручная установка полезна для:

    • Тестирования

    • Временного использования

    • Отладки

  • Недостатком является отсутствие сохраняемости изменений

  • Всегда очищайте кэш CDN + кэш браузера после применения переопределений эмодзи


Вы выполнили задачу, как описано в README?

В этом README описаны два способа установки:

  1. Первый способ требует пересборки.
  2. Второй способ — вручную зайти в контейнер и скачать файл с GitHub.

Разницы между этими способами нет; первый просто более надёжен. Если при пересборке первым способом загрузка не удаётся, попробуйте второй способ, который предполагает прямую установку внутри контейнера. Это связано с тем, что он фактически скачивает и заменяет существующие изображения эмодзи.

Я заметил, что в Readme описаны два метода установки, но также упоминается:

cd /var/discourse
./launcher enter app

su - discourse
cd /var/www/discourse

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:status
RAILS_ENV=production bundle exec rake moetwemoji_twemoji:apply

что не указано в первом посте здесь, на Meta. Как и информация о кэшировании. Вот почему я подумал, что кто-то может это упустить.


Кстати, обе ваши ссылки в первом посте ведут на поиск Google. Есть ли причина, по которой вы не указали ссылку напрямую на GitHub?

1 лайк

Почему проект называется «moetwemoji», а папка с эмодзи — «twemoji», если анимированные эмодзи являются официальными анимированными эмодзи Google Noto?

Однако это упомянуто в этом файле, где указание авторства неполное. В файле сказано, что он находится в стадии разработки, но я бы ожидал, что указание авторства будет полным до распространения компонента вашей темы :face_with_tongue:

5 лайков

Извините, мой пост, возможно, был недостаточно полным. Я внесу в него исправления позже. Спасибо за вашу правку.

2 лайка

Спасибо, что обратили на это внимание — вы абсолютно правы.

Название носит исторический характер и связано со структурой эмодзи по умолчанию в Discourse, однако сами анимированные ассеты взяты из Google Noto Emoji, а не из Twemoji. Я согласен, что это сбивает с толку, и нужно внести ясность.

В данный момент я:

  • Обновляю информацию об авторских правах, чтобы полностью соответствовать лицензии Noto Emoji
  • Уточняю источник ассетов в README
  • Пересматриваю именование и структуру папок, чтобы снизить путаницу

Спасибо за проверку и за то, что заметили это.

2 лайка

Я буду ждать, так как, несмотря на все манипуляции, это не работает. Однако мой Discourse находится на автономном сервере под управлением Ubuntu Server. Не знаю, нужно ли мне выполнить дополнительные действия, связанные с кэшированием?

просто попробуйте
https://“yourdomain”/images/emoji/twemoji/hugs.png?v=15

и

https://“yourdomain”/images/emoji/twemoji/hugs.png?v=15&cache=0

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

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

Я действительно установил его, но ничего не вижу. Возможно, стоит использовать другие эмодзи в настройках Discourse или что-то ещё, я не знаю [1]


  1. к тому же, лично я считаю, что движущиеся элементы — это эхо 90-х :squinting_face_with_tongue: Так что у меня не очень много мотивации копаться в этом глубже. ↩︎

Извините, так как вы сказали, что не видите причин устанавливать это, я предположил, что вы этого не сделали.

Вы запускали задачу rake, описанную в файле README репозитория плагина? Я думаю, именно это размещает анимированные эмодзи там, где вы пытались получить к ним доступ по ссылкам.

1 лайк

Моя вина. Я был на телефоне и ленился писать.

Нет, я этого не делал.

Редактирование.

Я никогда не читал readme, потому что OP предложил только (бесполезную) ссылку на поиск в Google. Теперь я предпринял дополнительные шаги в оригинальном репозитории, чтобы найти информацию, которая должна была или могла бы быть в OP.

1 лайк

Я вижу анимированные эмодзи по ссылке «https://»ваш_домен»/images/emoji/twemoji/hugs.png?v=15», но когда я пытаюсь выбрать эмодзи, например, в чате, это не работает :thinking:

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

Почти все администраторы будут периодически выполнять пересборку, поэтому наиболее важным аспектом является сохранность данных, и метод app.yml в данном случае оптимален.

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

3 лайка

Итак, я использую постоянный метод:

  1. Добавил команду git clone в свой файл app.yml
  2. Зашёл в контейнер и выполнил две команды rake
  3. Проверил, что ссылка «https://«your_domain»/images/emoji/twemoji/hugs.png?v=15» работает на моём сайте
  4. Очистил кэш, установил защиту Cloudflare в режим разработчика и так далее.
  5. Но при просмотре эмодзи они всё ещё указывают на исходный путь, например: images/emoji/unicode/upside_down_face.png?v=15

Какие ещё шаги я упускаю? Как заменить эмодзи по умолчанию на эти?