|||
| 摘要 | 为表情符号添加可选的变体或动画。
| 
| 预览 | 在 theme-creator.discourse.org 上预览|
| 存储库链接 | GitHub - 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:
屏幕截图
可用的表情符号特效
如何为表情符号添加特效
从表情符号自动完成弹出窗口
从表情符号选择器
通过手动输入特效后缀
特性
-
水平或垂直镜像的表情符号
-
动画表情符号（弹跳、旋转、脉冲等）
-
设置以选择哪些表情符号装饰可供用户使用
-
设置以选择在自动完成或表情符号选择器中插入装饰选择器。
-
允许管理员创建新的特效
设置
| 设置 | 描述 |
|---|---|
| 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 知识。
当特效添加到帖子中的表情符号时，表情符号将被一个带有 fluff 类的 <span> 标签包装：
<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 版本在 10 月 30 日之后，并且特别支持表情符号选择器，当前版本为 2024-11-26T23:00:00Z（感谢团队几天前添加了一个插件出口！) ↩︎
