 |
Краткое описание | Добавляет необязательные вариации или анимации к эмодзи. |
 |
Предпросмотр | Предпросмотр на theme-creator.discourse.org |
 |
Ссылка на репозиторий | https://github.com/arkshine/discourse-emoji-fluff |
 |
Новичок в темах Discourse? | Руководство для начинающих по использованию тем Discourse |
Установить этот компонент темы
Этот компонент требует, чтобы версия Discourse была актуальной на 2024-11-26T23:00:00Z. [1]
Описание
Emoji Fluff позволяет пользователям размещать в своих сообщениях зеркально отраженные или анимированные эмодзи.
Он позволяет создавать эффектные композиции с эмодзи, такие как:
Вы можете выбрать эти украшения из всплывающего окна автодополнения эмодзи, из селектора эмодзи или путем добавления ключевых слов непосредственно после шорткода эмодзи:
Примеры: :bike:f-slide, :smile:f-bounce
Горизонтальное и вертикальное отражение можно комбинировать с другими украшениями.
Примеры:
:horse:f-slide,flip::spider:f-float,flip_v:
Скриншоты
Доступные эффекты Emoji Fluff
Как добавить эффект к эмодзи
Через всплывающее окно автодополнения эмодзи
Через селектор эмодзи
Вручную добавив суффикс эффекта
Возможности
-
Горизонтальное или вертикальное отражение эмодзи
-
Анимированные эмодзи (прыжок, вращение, пульсация и т.д.)
-
Настройка выбора доступных пользователям украшений эмодзи
-
Настройка выбора места вставки селектора украшений: в автодополнение или в селектор эмодзи.
-
Разрешение администраторам создавать новые эффекты (fluffs)
Настройки
| Настройка | Описание |
|---|---|
| enabled | Включить или отключить функциональность компонента. Значение по умолчанию: trueОтключение предотвратит применение украшений эмодзи. Это полезно, если вы хотите приостановить работу компонента или планируете его удалить, но не хотите видеть код украшений, например Для получения дополнительной информации ознакомьтесь с разделом Откат украшений эмодзи в теме. |
| allow decorations | Список разрешенных украшений. Значение по умолчанию: flip|flip_v|spin|pulse|bounce|wobble|float|slide|fade|negative|hue|gray |
| allow selector in | Где должен быть доступен селектор эффектов. Значение по умолчанию: bothnone – отключить селекторы.both – включить селектор в автодополнении и в селекторе эмодзи.autocomplete – включить селектор только в автодополнении.emoji-picker – включить селектор только в селекторе эмодзи. |
spin:
Кроме того, строки темы компонента можно перевести через настройки.
Откат украшений эмодзи
Если вы отключите компонент, эти суффиксы останутся, и эмодзи будут выглядеть так: 
f-spin:
Из-за ограничений компонентов темы и особенностей дизайна мы добавляем простые суффиксы к эмодзи для придания им декоративных эффектов. Префикс эффекта f- помогает идентифицировать эти украшения, что упрощает их удаление с помощью скрипта, представленного ниже.
Вы можете загрузить и выполнить задачу rake для окончательного удаления суффиксов эффектов из сообщений.
wget -P lib/tasks/ https://raw.githubusercontent.com/Arkshine/discourse-emoji-fluff/refs/heads/main/tasks/fluff.rake
rake fluff:delete_all
Задача rake по умолчанию не создает ревизии постов. Вы можете добавить false в качестве аргумента, чтобы изменить это поведение: rake fluff:delete_all[false]
Прочитайте Administrative Bulk Operations для получения инструкций по входу в контейнер для выполнения задачи rake.
Всегда делайте резервную копию перед выполнением этой задачи. Нет гарантии, что она не удалит нежелательные строки. Используйте на свой страх и риск, и просмотрите код, если сомневаетесь.
Создание собственных эффектов
Создание эффектов требует знания CSS.
Когда эффект добавляется к эмодзи внутри поста, эмодзи оборачивается в тег <span> с классом fluff:
<span class="fluff fluff--bounce">
<img src="https://your.discourse.com/images/emoji/twitter/kangaroo.png?v=12" title=":kangaroo:" class="emoji" alt=":kangaroo:" loading="lazy" width="20" height="20" style="aspect-ratio: 20 / 20;">
</span>
Добавьте пользовательский CSS в вашу тему или новый компонент темы, чтобы добавить новые эффекты.
Вот два примера новых эффектов:
Наклон эмодзи на 90°
.fluff--tilt img {
transform: rotate(90deg);
}
Эффект 3D-вращения
.fluff--spin3d img {
animation: f-spin3d 2s infinite linear;
}
@keyframes f-spin3d {
0% {
transform: perspective(50em) rotateY(0deg);
filter: brightness(1);
}
50% {
transform: perspective(50em) rotateY(90deg);
filter: brightness(0.85);
}
51% {
transform: perspective(50em) rotateY(91deg);
filter: brightness(1.15);
}
100% {
transform: perspective(50em) rotateY(180deg);
filter: brightness(1);
}
}
Затем вам нужно добавить суффикс эффекта в раздел Разрешенные украшения Emoji Fluff:
Вот и всё; ваши новые эффекты теперь должны быть доступны пользователям. Приятного использования!
Благодарности
- @Canapin: Первоначальная идея, общая помощь в подготовке и тестировании этой TC.
Если быть точным, TC требует версию Discourse не ранее 30 октября, а именно поддержку выбора эмодзи, актуальную на 2024-11-26T23:00:00Z (благодарим команду за добавление плагин-аулета несколько дней назад!) ↩︎
