twemoji:优化全站全平台 emoji 表情展现

封面:アスナ(Pixiv ID:29328488)


介绍

emoji 即表情符号,来自日语词汇“絵文字”(假名为“えもじ”,读音即 emoji),最初由栗田穰崇创作,目前已被纳入 Unicode 编码并得到广泛支持。⭐

Emojipedia 收录了目前所有的 emoji。🎈

尽管如此,emoji 在部分老设备、旧系统的支持性并不好,甚至可能显示为类似“□”的无法显示字符。这当然是不好的。为了优化展现,目前常用的做法是渲染时用图片替换 emoji 字符。相关的项目有 GitHub 正在使用的 g-emoji-element 以及 Twitter 的 twemoji 等。

本文将要介绍的就是引入 twemoji 来优化展现。🍻

使用方法

引入 twemoji.js

twemoji 官方默认提供 MaxCDN 作为加载源,但该 CDN 在国内似乎可用性并不好。因此,笔者还是一贯地选择 jsDelivr。当然,你也可以从官方仓库下载并制作你自己的源。

twemoji.js 从 NPM 拉取,使用:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/twemoji.min.js"></script>

将上述代码插入到网页中适当的位置,即可引入 twemoji。此时 window 下会有 twemoji 对象以便调用。💡

调用 parse 方法

twemoji.parse() 方法的详细用法在 README 中有很科学💎的说明,所以笔者在这里只介绍整体替换的思路。

这个方法接受两个参数:第一个参数是解析的对象,直接使用 document.body 即可;第二个参数是一个 Object,包含一些选项:

{
    callback: Function,   // default the common replacer
    attributes: Function, // default returns {}
    base: string,         // default MaxCDN
    ext: string,          // default ".png"
    className: string,    // default "emoji"
    size: string|number,  // default "72x72"
    folder: string        // in case it's specified
                          // it replaces .size info, if any
}
  • callback 是每次替换的回调,返回值将作为 <img>src 属性,即对应替换图片的 URL。
  • attributes 是另一个回调,返回值应该是一个 Object,这个 Object 将被整合到 imgattributes,例如返回 {test: 'test'} 就会使 <img> 多出一个 test="test" 的属性。
  • base 是 emoji 替换图片的加载源,默认是 MaxCDN,稍后笔者将会给出 jsDelivr 的对应参数值。⚠️
  • ext 指定 emoji 替换图片的扩展名,默认是 .png,也可以使用 .svg 或其他类型(需要 sizefolder 配合)。
  • className 指定 <img>class 属性,默认是 emoji,如果与现有 class 有冲突则需要改变。
  • size 指定“图片尺寸”,实质上是指定一个目录名。不建议修改。
  • folder 指定 emoji 替换图片的目录名,将会覆盖 size 的设置。

⚠️ 使用 jsDelivr 时,emoji 替换图片不能直接从 NPM 拉取,而是要从 GitHub 拉取,应该把 base 设置为 https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/(末尾的 / 不可省略,原因后述)。

如果没有指定 callback,组装 URL 的规则默认是 {base}{size|folder}/{icon}{ext},其中 icon 作为 callback 的第一个参数传入。所以,当使用默认 callback 时,如果 base 的末尾缺少 /,会直接导致 URL 拼接非法。同理,ext 也一定要以 . 开头。👌

综上,解析的代码如下:

twemoji.parse(document.body, {
    base: 'https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/'
});

handsome 主题

handsome 是 Typecho 主题,所以首先需要确保 Typecho 已经开启 emoji 支持,即数据库编码已经调整至 utf8mb4,否则可能会出现数据损坏的严重后果。调整的方法可以参考:使 Typecho 支持 emoji 的显示😂😂😂 以及 如何让Typecho支持emoji的存储。调整完毕后,可以发送几条包含 emoji 的评论测试配置是否有效。

handsome 主题配置中可以直接加入 twemoji 的设定:

第一步,依次展开 开发者设置 -> 自定义输出body 尾部的HTML代码,在末尾加入:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/twemoji.min.js"></script>

第二步,依次展开 开发者设置 -> 自定义 JavaScript,同样在末尾加入:

$(function() {
    twemoji.parse(document.body, {
        attributes() {return {nogallery: 'nogallery'};},
        base: 'https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/'
    });
});

第三步,依次展开 开发者设置 -> 自定义 CSS,还是在末尾加入:

img.emoji {
    height: 1em !important;
    width: 1em !important;
    margin: 0 .05em 0 .1em !important;
    vertical-align: -0.1em !important;
    border-radius: 0 !important;
    border: 0 !important;
    display: inline-block !important;
    padding: 0 !important;
}

为了处理样式冲突,不得不加了很多 !important(话说这也太多了吧😂)

如果你还开启了 PJAX,那么在 PJAX -> PJAX回调函数 末尾也需要加入第二步中的代码。

这样,我们就成功引入了 twemoji,emoji 在旧设备、旧系统也能很漂亮了~💯

最后修改:2020 年 06 月 07 日 08 : 28 PM
欢迎投食喵 ~

发表评论

9 条评论

  1. Kester

    Hi,友链一个可以吗?
    博客名称:乔戈路阔阔;
    博客网址:https://chelgr.com
    博客头像:https://chelgr.com/share/chelgr-com-icon.png
    博客介绍:缅怀过去 | 记录现在 | 心存未来...

  2. zizdog

    需要动数据库的,怕怕

  3. 星座占卜

    文章写的很好啊,赞(ㆆᴗㆆ),每日打卡~~

  4. 惠州注册公司

    又发现一个好站,收藏了~以后会经常光顾的ヾ(≧∇≦*)ゝ

  5. 银联POS机

    赞!混个脸熟,博客真好看୧(๑•̀⌄•́๑)૭

  6. 八字算命

    文章写得好,网站都很吊

  7. 金石热点网

    文章写的不错,加油~

  8. Veen Zhao

    感觉没有Win10的好看

  9. 何叶

    |´・ω・)ノ厉害了,感谢巨佬