在图片下显示说明文字

在图片下显示说明文字

hugo 建立博客之后，大部分体验都很好，但是目前还有几个想改进的东西。图片是解决了，但是我希望对图片进行一些描述，因为对一些图片的解说又不想出现在正文里。markdown 里虽然有这个语法：

![描述](链接)

需求就是把这个描述是出现在图片下方。这个图片描述是在图片不显示时显示的文字，img 标签里会写入alt属性里。

搜了搜看到了这篇文章(补档)提供了一个思路给图片加文字说明。略作修改就能用。

步骤：

1. 在博客主题下找到layouts/_default/_markup/render-image.html
2. 把img标签相关改成：

<figure>
<img src="{{ $Permalink }}"
    {{ with $Width }}width="{{ . }}"{{ end }}
    {{ with $Height }}height="{{ . }}"{{ end }}
    {{ with $Srcset }}srcset="{{ . }}"{{ end }}
    loading="lazy"
    {{ with $alt }}
        alt="{{ . }}"
    {{ end }}
    {{ if $galleryImage }}
        class="gallery-image"
        data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
        data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
    {{ end }}
    alt="{{ .Text }}"
>
<center><figcaption>{{ .Text }}</figcaption></center>
</figure>

借用上面网站里的图片示例：

实现了。