写博客的时候突然想输入一个emoji,网上查了一下发现hexo里使用emoji必须装插件,于是研究了一下目前用的这个Volantis主题有没有自带emoji

查阅文档之后找到了行内图片标签可以实现表情功能

官网文档

这是 一段话。

这又是 一段话。

1
2
3
这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。

这又是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段话。

演示的表情是作者自己在github上上传的表情,然后通过jsdeliver的cdn加速直接加载图片,但是作者上传的表情我不太喜欢

使用OpenMoji

于是乎我找到了OpenMoji,OpenMoji的表情也是在github开源的,可以通过jsdeliver加速访问

所以最终的解决方案就是先在OpenMoji的网站上挑表情并把Unicode代码填到下面的网址里

1
2
3
https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji/color/svg/这里填Unicode.svg      #svg图标
https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji/color/72x72/这里填Unicode.svg #72x72像素
https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji/color/618x618/这里填Unicode.svg #618x618像素

然后结合上面的行内图片标签功能即可

1
{% inlineimage https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji/color/svg/这里填Unicode.svg %}

比如第一个表情grinning face的Unicode码是1F600

那么它的链接就是

1
{% inlineimage https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji/color/svg/1F600.svg %}

原理

jsDelivr 是国外的一家优秀的公共 CDN 服务提供商,也是首个「打通中国大陆(网宿公司运营)与海外的免费 CDN 服务」1。jsDelivr 有一个十分好用的功能——它可以加速 Github 仓库的文件。我们可以借此搭建一个免费、全球访问速度超快的图床。

关于jsDelivr引用资源的链接格式

  1. 访问仓库文件:https://cdn.jsdelivr.net/gh/user/repo/file
  2. 访问最新文件:https://cdn.jsdelivr.net/gh/user/repo@latest/file
  3. 按版本号访问:https://cdn.jsdelivr.net/gh/user/repo@1.2/file

而openmoji的github主页为https://github.com/hfg-gmuend/openmoji

用户名user:hfg-gmuend 仓库名repo:openmoji

所以就可以通过https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji/快速获取emoji了

这样的好处也是很明显的

  1. 不需要安装插件,省心(其实是主题好用)

  2. emoji图标实时更新,只要git仓库更新了新版表情,你的表情也会同时更新

    当然如果不想更新的话可以用“按版本号访问”的方式指定你需要的版本

同样的方法也支持其他在github开源的emoji表情,如twitter家的twemoji


这里再贴一些更详细的jsDeliver用法:

使用方法:
https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径
比如:
//加载图片
https://cdn.jsdelivr.net/gh/Zevs6/CDN/img/avatar.jpg

注意:版本号不是必需的,是为了区分新旧资源,如果不使用版本号,将会直接引用最新资源,除此之外还可以使用某个范围内的版本,查看所有资源等,具体使用方法如下:


参考链接:
tag-plugins: inlineimage
Github+jsDelivr+Coding 免费高速稳定图床get!
jsDeliver+github使用教程,免费的cdn

评论