{"topic":{"id":15352,"title":"新手报到问问站长动态表情和回应的时候能选所有的 emoji 是什么插件","slug":"topic","categoryId":2,"createdAt":"2026-01-04 08:40:39.394021","bumpedAt":"2026-01-04 09:52:49.635679","views":224,"postsCount":4,"highestPostNumber":4,"likeCount":2,"closed":false,"pinned":false,"pinnedGlobally":false,"pinnedAt":null,"pinnedUntil":null,"isBanner":false,"excerpt":"动态的很 nice 另外默认 discourse 不支持这个按钮问问站长如何实现的","deletedAt":null,"isAnonymous":false,"category":{"id":2,"name":"网站","slug":"website","color":"986a44"},"author":{"id":7979,"username":"tom_eric","name":"tom eric ","avatarUrl":"/uploads/image/f7/1e/f71e8af110f5076c30a2184a615f889fbef096f345c5ca68eedea45d83a8537a.avif"},"tags":[]},"posts":[{"id":69758,"postNumber":1,"raw":"![PixPin_2026-01-04_16-39-56|464x500](/uploads/image/d4/17/d417fa7c5ce9a2989cbf12ead56838982dbdad0cc422511e7c85ac82198357f2.avif)\n动态的很 nice 另外默认 discourse 不支持\n![PixPin_2026-01-04_16-40-16|191x197](/uploads/image/a8/b9/a8b9d7545afebdb229c06d06e823e331d8deb455d672dfb5acd588d2d4d02517.avif)\n这个按钮\n问问站长如何实现的","cooked":"

$\"PixPin_2026-01-04_16-39-56\"$
\n动态的很 nice 另外默认 discourse 不支持
\n $\"PixPin_2026-01-04_16-40-16\"$
\n这个按钮
\n问问站长如何实现的

\n","createdAt":"2026-01-04 08:40:39.492192","updatedAt":"2026-01-04 08:40:39.492192","replyToPostNumber":null,"replyCount":0,"likeCount":0,"wordCount":28,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":7979,"username":"tom_eric","name":"tom eric ","avatarUrl":"/uploads/image/f7/1e/f71e8af110f5076c30a2184a615f889fbef096f345c5ca68eedea45d83a8537a.avif","admin":false,"moderator":false,"signatureRaw":null,"signatureCooked":null}},{"id":69759,"postNumber":2,"raw":"动态 Emoji 实现方法：\n\nhttps://xjtu.app/t/topic/15054\n\n---\n\n[quote=\"tom eric , post:1, topic:15352, username:tom_eric\"]\n这个按钮\n问问站长如何实现的\n[/quote]\n\n这个是 Discourse 自带的，搜索设置项：\nDiscourse reactions allow any emoji","cooked":"

动态 Emoji 实现方法：

\n $\"IO\"$ \n IO — #1 in 你站正式進入全面動態 Emoji 時代，處於世界領先地位\n

tl;dr;
\nmodify Discourse container yaml's run block.

run:\n  - exec: echo \"Beginning of custom commands\"\n  - exec: sudo apt-get install zstd\n  - exec: wget https://xjtu.app/uploads/blob/c0/c5/c0c5750785d93fadc478709a83d016df5a760d5e243965b4168126e3beff81b0.zst -O /var/www/discourse/public/images/emoji/noto.tar.zst\n  - exec: tar xf /var/www/discourse/public/images/emoji/noto.tar.zst -C /var/www/discourse/public/images/emoji/\n  - exec: mv /var/www/discourse/public/images/emoji/noto-animated-emojis-discourse-names-72x72-avif/* /var/www/discourse/public/images/emoji/noto/\n  - exec: echo \"End of custom commands\"\n

經過管理員 2 晚上的努力，將 451 個 Goole Noto Animated Emojis 導入到你站，標誌著你站正式全面進入動態 Emoji 時代。

$\"animated-emoji-picker|video\"$

如何實現？

Discourse 的 emoji 文件都保存在 /var/www/discourse/public/images/emoji/twemoji/ 目錄下

Noto Animated Emojis 網站提供 Lottie/GIF/WebP 下載，但存在文件大小過大的問題。

例如 Pig 🐖 的 Webp 440 KiB, GIF 482 KiB（512x512），而常規靜態 Emoji（72x72）大小往往 $ \\lessapprox $ 1 KiB，所以需要轉碼減少文件大小。

ffmpeg -i pig.gif -c:v libsvtav1 -s 72x72 pig-svtav1.avif\n

可以獲得 11KiB 的 AVIF 格式動圖。但 ffmpeg AV1 相關的編碼器都不支持不夠明度，獲得的圖片背景變成了白色。
\n $\"pig-svtav1\"$

諮詢了高人（Claude），可以用 avifenc 這個工具保留 GIF 的透明背景。

ffmpeg -i gifs/pig.gif -s 72x72 -vf \"format=yuva444p\" -f yuv4mpegpipe -strict -1 - | avifenc --stdin --fps 33.33 -q 40 -c rav1e -s 0 /tmp/pig-yuva.avif\n

經過試驗，僅 rav1e/libaom 支持透明度（yuva444p），rav1e 速度較快。-s 0設置速度為最慢以獲得更好的壓縮效果，但不明顯：17K vs 16K。

在 q=40 的質量參數下，圖片大小為 16KiB（相较于 ffmpeg svtav1 的方式体积略大）
\n $\"pig-yuva\"$

以下為所有壓縮後的 Animated Emoji 合集（AVIF 後綴被重命名為了 PNG）
\nnoto-animated-emojis-discourse-names-72x72-avif.tar.zst|attachment (2.5 MB)

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\ttom eric:\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

\n
这个按钮
\n问问站长如何实现的
\n

\n\t\t\t\t\t\t

这个是 Discourse 自带的，搜索设置项：
\nDiscourse reactions allow any emoji

\n","createdAt":"2026-01-04 09:15:18.078199","updatedAt":"2026-01-04 09:15:36.457384","replyToPostNumber":null,"replyCount":1,"likeCount":1,"wordCount":49,"liked":false,"bookmarked":false,"polls":[],"reactions":[{"reaction":"🤗️","count":1,"users":[{"id":7979,"username":"tom_eric","name":"tom eric "}],"hasReacted":false},{"reaction":"❤️","count":1,"users":[{"id":7979,"username":"tom_eric","name":"tom eric "}],"hasReacted":false}],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":69760,"postNumber":3,"raw":"感谢指导站长这个逻辑直接替换了我准备打包成插件添加一个新的 list\n站长之前这么尝试过吗\n另外选择 gif 的话体积会大多少 discourse 目前只支持 png 和 gif","cooked":"

感谢指导站长这个逻辑直接替换了我准备打包成插件添加一个新的 list
\n站长之前这么尝试过吗
\n另外选择 gif 的话体积会大多少 discourse 目前只支持 png 和 gif

\n","createdAt":"2026-01-04 09:43:06.782287","updatedAt":"2026-01-04 09:43:06.782287","replyToPostNumber":2,"replyCount":1,"likeCount":0,"wordCount":62,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":7979,"username":"tom_eric","name":"tom eric ","avatarUrl":"/uploads/image/f7/1e/f71e8af110f5076c30a2184a615f889fbef096f345c5ca68eedea45d83a8537a.avif","admin":false,"moderator":false,"signatureRaw":null,"signatureCooked":null}},{"id":69761,"postNumber":4,"raw":"[quote=\"tom eric , post:3, topic:15352, username:tom_eric\"]\n站长之前这么尝试过吗\n[/quote]\n怎么简单怎么来，Discourse 插件太复杂了\n\n[quote=\"tom eric , post:3, topic:15352, username:tom_eric\"]\n选择 gif 的话体积会大多少 discourse 目前只支持 png 和 gif\n[/quote]\n上面的链接里面有写，动画表情图片都是 AVIF 格式的，文件实际格式和后缀/拓展名无关","cooked":"

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\ttom eric:\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

\n
站长之前这么尝试过吗
\n

\n\t\t\t\t\t\t

怎么简单怎么来，Discourse 插件太复杂了

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\ttom eric:\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

\n
选择 gif 的话体积会大多少 discourse 目前只支持 png 和 gif
\n

\n\t\t\t\t\t\t

上面的链接里面有写，动画表情图片都是 AVIF 格式的，文件实际格式和后缀/拓展名无关

\n","createdAt":"2026-01-04 09:52:49.635679","updatedAt":"2026-01-04 09:52:49.635679","replyToPostNumber":3,"replyCount":0,"likeCount":1,"wordCount":96,"liked":false,"bookmarked":false,"polls":[],"reactions":[{"reaction":"🥰️","count":1,"users":[{"id":7849,"username":"daydreamer","name":"菜菜鼠（给ddl爆了）"}],"hasReacted":false},{"reaction":"❤️","count":1,"users":[{"id":7849,"username":"daydreamer","name":"菜菜鼠（给ddl爆了）"}],"hasReacted":false}],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}}],"hasMore":false,"lastReadPostNumber":2,"hasUrlPostNumber":true}