检测到论坛CSS可能没有正确加载,如出现排版混乱请刷新重试。

We detected that the CSS might not be loaded correctly. If the website displays abnormally, Please refresh and try again.

DaleZ 似乎是改了flarum关于emoji处理的代码,默认是引用twemoji的。但是上边这个repo还没合并更改,我们先在服务器本地做的更改。
不过后来看了一下,目前用的是nginx的sub_filter,这个属于是对后端生成的页面进行patch,这个好处是上游如果更新了相关的代码,不需要重新合并更改。

    焊锡锡 直接修改链接源确实一劳永逸👍
    现在既解决了表情加载不出来的问题,又变得好看多了,实在太喜欢有眼珠的脸了

      DaleZ 另外就是楼主这个标题的M也是用的emoji,然后这个库里还没有,似乎是引用了系统自带的emoji……希望能够合并最新增加的emoji进来

        焊锡锡

        Ⓜ️💲

        没有问题. 事实上标题不受这个影响.
        就是不用 SVG 会导致大表情模糊,本来想建议用 SVG 的,但是那 Bug……

        SVG 部分因为没有可以从字体里批量提取的工具,所以所有的东西都是我人工花了两个星期提取的,重命名错误会导致对应的 Emoji 缺少并被 Twemoji 占位,并且因为人表情实在太多(一千多),所以我不得不通过自动化脚本来生成其它5种肤色(否则正式版根本不会这么快推出),还会导致一些奇怪的地方被改色,最终形成上图中的错误,这些还需要我去查找并修复。不过,看到成品我已经觉得很值得了。

          DaleZ 其实还不是改源码,我刚才把我的回答更新了一下。🤣
          昨天晚上太困了就没记清是怎么改的,个人觉得比改源代码更好

            焊锡锡 同感。这样也省得后期不断跟进更新了。但是那个 Github 仓库到底是什么呢


            我会不断更新库的,实际上1.0.1已经推出了😂(这种更新通常只是错误内容修改,比如本次更新只修改了 SVG 格式中部分肤色错误。)
            但是最近不会增加 Unicode 14 的内容,这要等 MS 推22H2才行,我暂时不想升级。
            如果增加了 Unicode 14 的 Emoji,我会第一时间通知的。版本号将为1.1.0。

            焊锡锡 昨天晚上太困了就没记清是怎么改的

            顺带一提
            教训:不要晚上改任何config/code(我昨晚把nginx搞炸一次 论坛搞炸两次 referrerPolicy还打成了refererPolicy)
            我紫菜

            (顺便吐槽一下 Uptimerobot压根没捕获到我把论坛弄炸的记录 4min刷新时间确实长了

              綾瀬桃桃 也就是说您昨晚也参与了更改?


              Referer 真的容易弄错,一会是 Referer,一会又是 Referrer……

                DaleZ

                别说了

                綾瀬桃桃 我昨晚把nginx搞炸一次 论坛搞炸两次 referrerPolicy还打成了refererPolicy

                我当时看着压根没变的emoji最后没办法直接往核管群里一丢睡大觉去了(

                  綾瀬桃桃 看来这东西要 Patch 真的没有想象中那么简单😵‍💫


                  焊锡锡 突然想知道 ReferrerPolicy 最后最后怎么修改的,是真的改了config.php吗?

                  话说能不能把目录结构改一下🤔然后模仿twemoji打个包丢到npm上
                  我看flarum/emoji有import twemoji from 'twemoji';

                    你们可能忘了Flamoji面板()
                    这货自己加载了一遍Twemoji 如果要换的话可以顺便看看==

                      綾瀬桃桃 这可能会是下一个 Plan,但对我来说应该只能完成一个“P”,因为“lan”。放 NPM 上面似乎也不会比现在有用多少吧,也可能是我不了解它的好处。
                      事实上我觉得已经不错了。


                      JC_ProPlus 加载速度应该还可以吧?数据加载量太多了?

                        DaleZ 放 NPM 上面似乎也不会比现在有用多少吧,也可能是我不了解它的好处


                        上图为官方实现 可以看出它使用了twemoji前端库(而不是写死链接)
                        然后渲染代码长这样

                        export default function renderEmoji() {
                          override(Post.prototype, 'contentHtml', function (original) {
                            const contentHtml = original();
                        
                            if (this.oldContentHtml !== contentHtml) {
                              // We need to parse the HTML string into a DOM node, then give it to Twemoji.
                              //
                              // This prevents some issues with the default find-replace that would be performed
                              // on a string passed to `Twemoji.parse()`.
                              //
                              // The parse function can only handle a single DOM node provided, so we need to
                              // wrap it in a node. In our `parseHTML` implementation, we wrap it in a `<body>`
                              // element. This gets stripped below.
                              //
                              // See https://github.com/flarum/core/issues/2958
                              const emojifiedDom = twemoji.parse(parseHTML(contentHtml), options);
                        
                              // Steal the HTML string inside the emojified DOM `<body>` tag.
                              this.emojifiedContentHtml = emojifiedDom.innerHTML;
                        
                              this.oldContentHtml = contentHtml;
                            }
                        
                            return this.emojifiedContentHtml;
                          });
                        
                          override(s9e.TextFormatter, 'preview', (original, text, element) => {
                            original(text, element);
                        
                            twemoji.parse(element, options);
                          });
                        }

                        twemoji.parse就是去获取对应的emoji的
                        对应位于Twemoji(看这些注释就够了)

                        /**
                         * If given to parse, this callback will be invoked per each found emoji.
                         *
                         * If this callback returns a falsy value instead of a valid `src` to use for the image, nothing will actually change for that specific emoji.
                         *
                         * @param icon the lower case HEX code point i.e. "1f4a9"
                         * @param options all info for this parsing operation
                         * @param variant the optional \uFE0F ("as image") variant, in case this info is anyhow meaningful. By default this is ignored.
                         */

                        Flarum侧还有一个cdn.js用于获取url

                        import twemoji from 'twemoji';
                        
                        export const version = /([0-9]+).[0-9]+.[0-9]+/g.exec(twemoji.base)[1];
                        
                        export default `https://cdn.jsdelivr.net/gh/twitter/twemoji@${version}/assets/`;

                        最大的优点是

                        1. 不需要再根据Twemoji版本变更相应改变nginx配置(目前Twemoji版本号是14 如果一旦Twemoji更新了所有emoji会全部自动滚回Twemoji)
                        2. 可以打包成插件便于快速在其他站点使用

                          DaleZ 暴力修改资源链接太不优雅了
                          不过我赌 Twemoji15出来之后马上 #意见反馈 就会多一个帖子出来(

                            綾瀬桃桃 不过我赌 Twemoji15出来之后马上 #意见反馈 就会多一个帖子出来(

                            ?
                            你是说要求跟进 Twemoji 更新吗?那不会。

                            DaleZ 以后 msemoji 更新会在此处通知。

                              © 2025 wvbCommunity 管理团队

                              删封申诉 | 知乎专栏 | 状态监控 | 用户协议(EULA) | 隐私政策

                              本站文章除其作者特殊声明外,一律采用CC BY-NC-SA 4.0许可协议进行授权,进行转载或二次创作时务必以相同协议进行共享,严禁用于商业用途。