在前文 Hugo Markdown 里嵌入局部模板 中,描述了如何使用 Shortcode 使 Markdown 得以嵌入模板。 但是对于表情包,引入局部模板不是很明智的做法,本文将讲述如何定制自己的表情包 Shortcode

需求

  • 单个 Shortcode 加载各种表情包
  • 可定制表情包的属性,比如 alttitlewidthheight 等等

表情包实质是一张图片,要实现单个 Shortcode 加载表情包,只需要将表情包的名称传入 Shortcode, 然后 Shortcode 根据名称填充的表情包图片的 URL 即可。

而对于表情包的属性,则只是添加 img 标签的属性。

实现

表情包图片

第一步,自然是存放我们的表情包了,本文假定存放路径为:

static/img/emoji

比如:

interesting for-example

创建 Emoji Shortcode

有了表情包,紧接着我们就需要创建 Shortcode 文件来加载这些表情包,如 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 }}
/>

说明:

  1. 首先获取传入的表情包名称 - {{ $name := .Get "name" }}
  2. 接着返回一个 img 标签

调用 Emoji Shortcode

最后,我们只需要调用上一步创建的 Shortcode 则大功告成。

显示 interesting 表情包

{{< emoji name="interesting" >}}

设置属性

{{< emoji name="interesting" ext="jpeg" width="400" height="200" title="title" alt="alt" >}}