封面：アスナ（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 将被整合到img的attributes，例如返回{test: 'test'}就会使<img>多出一个test="test"的属性。base是 emoji 替换图片的加载源，默认是 MaxCDN，稍后笔者将会给出 jsDelivr 的对应参数值。⚠️ext指定 emoji 替换图片的扩展名，默认是.png，也可以使用.svg或其他类型（需要size或folder配合）。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 在旧设备、旧系统也能很漂亮了~💯
版权声明：本文是原创文章，版权归 无限UCW 所有。
本文链接：https://ucw.moe/archives/import-twemoji.html
本站所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由地转载和修改，但请务必注明文章来源并且不可用于商业目的。
Hi，友链一个可以吗？
博客名称：乔戈路阔阔；
博客网址：https://chelgr.com；
博客头像：https://chelgr.com/share/chelgr-com-icon.png；
博客介绍：缅怀过去 | 记录现在 | 心存未来...
需要动数据库的，怕怕
文章写的很好啊，赞(ㆆᴗㆆ)，每日打卡~~
又发现一个好站,收藏了~以后会经常光顾的ヾ(≧∇≦*)ゝ
赞!混个脸熟,博客真好看୧(๑•̀⌄•́๑)૭
文章写得好，网站都很吊
文章写的不错,加油~
感觉没有Win10的好看
|´・ω・)ノ厉害了，感谢巨佬