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

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

  • 意见反馈
  • 建议与内容整理:将 Twemoji 改换为 msemoji

本反馈因为不是报告 Bug,因此不会按反馈模版格式反馈。

概述:

表情由于默认表情库源的问题已经💣了很久了。(例如此反馈 https://community.wvbtech.com/d/2237/3
最近的DaleZ 这个帖子虽不是因为此问题而出是为了自用,但因为几乎相同,因此曾建议过换成此物,不仅好看一些(个人看法),还可以解决加载不出来的问题。后来此帖断续,之前的建议似乎遥遥无期,现在整理出来发一个专门的反馈。

下一步行动:

我的建议是乘暑假尚未结束,早点结束此问题,否则此问题可能会延续到寒假。现在将实现方案放于此处。

方案一:

首先是编辑config.php。寻找内容:

'headers' => 
  array (

然后在其下应该有一行类似'referrerPolicy' => 'same-origin',的内容,没有可以加上。然后更改值。经过测试,可用的值如下:

origin
unsafe-url
strict-origin
no-referrer-when-downgrade
origin-when-cross-origin
strict-origin-when-cross-origin(此值最安全)

然后更改图片源链接。如果我的理解正确,应该通过 Nginx 将https://cdn.jsdelivr.net/gh/twitter/twemoji@14/assets/替换成https://gh.sourcegcdn.com/DellZHackintosh/msemoji/1.0.0/src/
此方法参考 https://discuss.flarum.org/d/27903-why-is-there-no-referer-in-request-headers/8
思路:替换链接。但是我申请到的 cdn 需要 Referer 才允许访问,Flarum 默认仅同源请求会发送 Referer。修改的目的就是更改 Flarum 的默认设置。(更多有关 Referer 的策略在 MDN

方案二:

编辑 forum.js:
"<img ".concat('class="',e.className,'" ','draggable="false" ','alt="',d,'"',' src="',r,'"')替换成"<img ".concat('class="',e.className,'" ','draggable="false" ','alt="',d,'"',' src="',r,'"','referrerpolicy="origin" '),origin 值可以换成上文提到的任意值。
然后更改图片源链接。如果我的理解正确,应该通过 Nginx 将https://cdn.jsdelivr.net/gh/twitter/twemoji@14/assets/替换成https://gh.sourcegcdn.com/DellZHackintosh/msemoji/1.0.0/src/
此方法参考 MDN
思路同上文,但是此方法更加安全。此方法不更改全局策略,仅在请求 Emoji 图片时使用特定的策略,可以避免一些不必要的麻烦。

总结:

想改就改吧,要改得趁早。这是我第一次拿一台手机发一条大长帖,有什么问题、什么要讨论的到时候再说吧,累死了。


@焊锡锡 @Akira Salvare 干脆@一下最近在线的几个核管算了

    方案二可以不改 nginx,把赋值给 img src 的 r 变量 replace 处理下应该也能达到目的

      Crazy Urus 这个我也不是没想过,但我不太了解其工作方式,不敢动。。。
      不过 src 值我了解,是目录+文件名。
      但是——

      var d={base:"https://twemoji.maxcdn.com/v/14.0.2/",...
      const y="https://cdn.jsdelivr.net/gh/twitter/twemoji@"+/([0-9]+).[0-9]+.[0-9]+/g.exec(h.base)[1]+"/assets/";
      url:"//cdn.jsdelivr.net/gh/twitter/twemoji@14/assets/72x72/"+i.toLowerCase()+".png",type:"emoji"}:{};
      var i=(e=t.countryCode(),r=f()(e),(n=h()(r))&&"https://twemoji.maxcdn.com/2/72x72/"+n+".png");

      总共4个源链接,我可不知道咋搞(
      一不小心就会有炸掉的可能……
      总之,还是上面的两个方法我比较有把握。

        核管们如果还是犹豫不决,我这里直接上一个效果吧

        默认引用是这样的↓
        v2gzAs.jpg
        应用 Referer 策略后是这样的↓
        v22SNn.jpg
        求求核管们至少回复一下吧😭

          很抱歉这么久回复
          目前已经完成贴文内容中与 Reations 中 emoji 的替换。

            Akira Salvare 非常感谢!很高兴我的意见被采纳!😊


            不过,我感觉戳表情那里的表情偏小了一点,也可能是我的错觉

              Akira Salvare 那么,这个是怎么改的呢?正常的方式应该会有 emoji class。

              Akira Salvare 看了下确实 reaction 的 img 无 class,但是可以通过选择器修改样式,如果有需要可以尝试下

              .Reactions img {
                  height: 20px;
              }

                DaleZ Emoji 面板甚至还有其它链接……随便看了一个:https://twemoji.maxcdn.com/v/13.0.0/svg/1f606.svg这甚至都不是来自 jsdelivr 的!

                23 天 后
                5 个月 后

                “是的,我要挖。这个帖子仍有时效性。”


                JC_ProPlus 由于几个月前 MaxCDN 关闭了,现在 Emoji 面板使用的链接,比如
                https://twemoji.maxcdn.com/v/13.0.0/svg/1f600.svg
                将跳转到
                https://cdn.jsdelivr.net/gh/twitter/twemoji@v13.0.0/assets/svg/1f600.svg
                所以看看要不要替换一下?顺便也许还能 Redesign 一个支持 14.0 版本的面板……

                1 个月 后

                MSEmoji 1.1.0 即将推出,所以我就先问些问题和提供意见吧。

                问题

                据我这几个月以来的观察,一开始帖子表情突然恢复而且有多次。后来 Reations 替代了这个错误,且至今没有修复。我不确定这是为什么,但如果不是使用链接硬改而是直接修改 NPM 源可以避免此问题的话,我会在下一个小版本更新中尽快推出 NPM 支持。


                意见

                这次不能简单地改链接里面的版本号,因为我对文件夹的名称做了一些改动。
                建议可以从 png 转到 svg,更清晰了的话我觉得挺好的。

                  当了个啥也没看到的云监工
                  @Akira Salvare 现在是不打算升级表情包库吗?在等下一个版本?实际上1.1.1不是个单纯的 NPM 包版本,它本身也要有改动的。

                  DaleZ 建议可以从 png 转到 svg,更清晰了的话我觉得挺好的。

                  建议比较一下png和svg的大小,在网站使用还是加载速度更重要(

                    焊锡锡 那就比较呗(
                    不要草,不要草,我只是没找到机会打开电脑截图而已(
                    图在这里:

                    结论:你是对的。但常用的 Emoji 反而更小的,空间大的是那些细节太多的人物 Emoji……而且,我觉得用几 MB 换始终清晰的 SVG 应该更好吧……

                    © 2025 wvbCommunity 管理团队

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

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