Hugo | 为博客添加FF14表情包

2021-10-26

1629字

甘普基本变形定律

Hugo

给评论区加了Blob-cat表情包，过于快乐了，于是决定研究下怎么给文章也添加点表情包。

先看看效果：

这里是一段占位文字再来一段占位文字最后一段占位文字

捋一下思路

我想要实现什么功能？——表情包的实质是图片，但在日志里加入图片（同时调整图片到合适的大小）需要使用img标签（否则需要修改图片本身），在Typora里写img标签又很麻烦，所以我需要的其实是便利地插入图片的方法。

既然是需要Html来做的事情，那么首先想到的就是Hugo的短代码（shortcode）功能，我翻了翻谷歌，找到一篇类似需求的文章，接下来的事情都基于它完成——超熟练了，抄一点，再改一点点。

第一步：先找图标

既然已经定好了思路，接下来的问题就是：在哪儿找高清FF14图标？在群里问了一下，万能的多啦群友迅速丢出了xivapi……非常好，但它的图标不能批量打包下载……救命我不会用API！！

天无绝人之路，思路一旦打开接下来找替代品就很快，我迅速摸到了——FF14拆包工具。

这种感觉，就好像原本只是想要个能代步的陆行鸟，却突然被七拖一拖过了当期零式，睁开眼睛已经在月球上被称呼为光之战士了。

SaintCoinach.Cmd

获取图标需要用的是SaintCoinach.Cmd工具，用法很简单，根据介绍文章一步一步来就OK，先输入游戏安装目录，返回版本号后输入uiHD，就可以得到一个名字类似于2021.09.17.0000.0000的文件夹。操作起来不仅速度飞快，而且输入uiHD不会返回成功提示，我一度以为自己输了个空气。

之后就是整理图标时间……这个部分我们放在茶话会环节再聊。

第二步：短代码

OK现在图片的问题已经解决了，应该考虑下一步了。

这部分用的是之前文章中提到的方法，首先建立static/img/emoji文件夹，之后在layouts/shortcodes下建立emoji.html模板，写入如下内容：

{{ $name := .Get "name" }}
<img
    src="/img/emoji/{{ $name }}.{{ with .Get "ext" }}{{ . }}{{ else }}jpeg{{ end }}"
    title="{{ with .Get "title" }}{{ . }}{{ else }}{{ $name }}{{ end }}"
    alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ $name }}{{ end }}"
    {{ with .Get "width" }} width="{{ . }}"{{ end }}
    {{ with .Get "height" }} height="{{ . }}"{{ end }}
/>

在文章中插入图片并设置属性为

{< emoji name="图片文件名" ext="jpeg" width="400" height="200" title="title" alt="alt" >}} //实际使用需要补全花括号

理论上是这样的，但如果不看就用的话可能会出现一点问题……

作者在模板中限定图片默认后缀为jpeg，因此如果使用jpeg之外格式的图片，就需要写明ext="格式名"，我常用的图片是png格式，方便起见，需要改改默认。

src="/img/emoji/{{ $name }}.{{ with .Get "ext" }}{{ . }}{{ else }}png{{ end }}"

另外一种方法是删掉后半截，把第一行改成：

src="/img/emoji/{{ $name }}

之后只要给图片名字加上后缀就可以了，比如：

{< emoji name="图片文件名.jpg" width="400" height="200" title="title" alt="alt" >}} //实际使用需要补全花括号

适合图片格式比较杂的时候使用。

茶话会时间！

回收标题

搞定之后来讲这次的题外话，首先回收Description：SE——你们到底是什么祖传程序员啊——

简单来讲就是，非常神秘，我一直以为HQ图标只是NQ图标上套了个图层，结果发现每个HQ物品图标都单独做了一张图片——天穹街复兴给复兴用物资盖的那个“检”戳都是独立图片！盖和不盖各一张！甚至易伤啊伤害降低啊等等有层数的图标，每一层都是一张独立的PNG……光靠说的可能意识不到这是个多么惊人的演出效果，我放一张图请看到这里的幸运朋友稍微感受一下：

怎么说呢，我之后都不能好好打本了，一进副本就会想到头上一层一层跳动的buff，全都是一张一张的PNG，可能这就是匠人精神吧……之前查4K图标的时候发现阿布在回帖里说，FF14里的文字其实是预渲染图片，整个FF14没有矢量的图形素材，所有的图形图像资料都是位图数据……啊？

其他表情包方案

其次来讲其他的表情包引用方法，之前球也在博客里加了表情包的功能，具体可以参考这篇文章：开发：emoji 显示，她的文章内写法更简洁一点，在名称前后加个英文冒号就OK了。

Hugo也支持显示emoji，理论上来说配置文件加一句enableEmoji: true应该就OK了。