Hexo里优雅地使用emoji

发表于 分类于 本文字数： 1.2k

最近在思考如何在文章中方便的使用emoji表情图标，整体大概有这些思路：

  1. 做成font awesome的形式，通过class名调用。这也是之前采用的方式，将css里定义的所有图标做成一个cheat sheet，直接复制源码插入文章就可以。优点是语义化，常用的几个不用参照表就能盲打出来，而且图标已经加载到css中，不占用额外的资源和带宽。缺点也很明显：不是所有emoji都能做成字体，自定义起来略繁琐。而且可移动性差，用typora编辑md文件时不能所见即所得。
  2. 使用hexo自带的Tag Plugins。和CSS的方法类似，虽然用起来方便，但灵活性和可移植性差了点。
  3. 直接插入img标签外部引入。这也是本文要提到的方式，可移植性好，扩容也比较方便。剩下就是如何操作的问题了。最简单粗暴的就是做一张cheet sheet把所有emoji都放上去，然后定义一些操作逻辑，比如点击某个图片复制它的标签源码。接下来的问题就是如何获取emoji并且把list放到html中。这里介绍三个实用的浏览器扩展，解决思路也不一样。

插件一：DownThemAll!

源自Firefox的高质量下载器辅助类工具。本身是调用浏览器自带的下载功能，最有特点的功能是可以定义序列化url，比如
http://path-to-file/1.png
http://path-to-file/2.png
…
http://path-to-file/20.png
这种就可以写成http://path-to-file/[1:20].png，并且可以定义命名规则，非常适合用来批量抓取资源。而且它本身就可以嗅探网页上的各种文件，筛选器也很强大。本来有这样一个工具就可以爬到各大社交网站的表情库了。然而试下来发现一个图都下不动，不知道是不是网络原因。所以就有了第二个。

插件二：Save All Resources

顾名思义，只要网站能打开，图标能显示，它就能把所有东西都保存到本地，并且不需要再次请求网络。最后就是用这种方式爬下了几个网站的emoji，而且下载下来就已经按照文件夹整理好了。全部完成后在DOS里用dir /s /b列出所有文件的路径，稍微查找替换就做好了一个list。再介绍另外一个有意思的工具。

插件三：Save Page WE

一键将当前网页保存到一个html文件中，所有的图片通过dataURI直接内嵌，理论上视频也是可以的，没尝试过。这样做好的cheat sheet可以保存到本地，只需一个文件就能离线查看。当然，复制img标签的时候src也是base64编码的。

插件四：Scrapper

老插件了，但依然可用，以b站为例

Selector ⇢ jQuery ⇢ a.emoji-list>img
Columns ⇢ @src  @title

获得url和图片名的表格，然后在编辑器里替换成aria2c http://url-to-emoji -o xxx.png的形式，复制后在cmd里执行即可。这里有个在线工具可以把汉字转换为拼音，同样在编辑器里查找替换成ren 汉字.png hanzi.png这种形式，然后执行。

回到cheet sheet的制作，有了url list再简单排版下就大功告成了。这里用<ul>标签简单做了个flex布局，够用就好。最后就是复制的逻辑问题了，复制到剪切板的代码实现通过google获得：

function copyToClipboard(text) {
    var dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
    alert('复制成功：' + text)
}

再贪心一点，除了复制图片链接，还想实现复制为dataURI的形式，比如直接点击是复制链接，shift加点击是复制dataURI。网上大多是通过canvas的toDataURL接口实现的，好处是不用再fetch一次，但我测试下来MIME参数无效，而且转码也有点问题。最后还是上fetch方法

1
2
3
4
5
6
7
8
9
10
11
12
const getBase64FromUrl = async (url) => {
  const data = await fetch(url);
  const blob = await data.blob();
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob); 
    reader.onloadend = () => {
      const base64data = reader.result;   
      resolve(base64data);
    }
  });
}

不知道转Base64有没有可能本地实现，稍微搜了下没有头绪遂放弃。

这里只是提供思路，成品就不放出来了（版权警告）

更新

6.13 增加插件Scrapper