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

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

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

    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 更新会在此处通知。

                            DaleZ 我是说

                            DaleZ 然后更改图片源链接。如果我的理解正确,应该通过 Nginx 将https://cdn.jsdelivr.net/gh/twitter/twemoji@14/assets/替换成https://gh.sourcegcdn.com/DellZHackintosh/msemoji/1.0.0/src/。

                            注意这里 twemoji@14

                              綾瀬桃桃 呃,也就是说届时所有的 Emoji 都会 Boom?😰这倒是个问题。。。

                              © 2025 wvbCommunity 管理团队

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

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