写博客的时候突然想输入一个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

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

• // 加载任何Github发布、提交或分支
  https://cdn.jsdelivr.net/gh/user/repo@version/file
• // 加载 jQuery v3.2.1
  https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js
• // 使用版本范围而不是特定版本
  https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js
  https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js
• // 完全省略该版本以获取最新版本
  https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js
• // 将“.min”添加到任何JS/CSS文件中以获取缩小版本，如果不存在，将为会自动生成
  https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js
• // 在末尾添加 / 以获取资源目录列表
  https://cdn.jsdelivr.net/gh/jquery/jquery/

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

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://outdegree.top/2020/09/32/

更新于：2020年9月26日

emoji

Hexo