在图片下显示说明文字

图片下显示说明

389 个字

在图片下显示说明文字

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>

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

维基娘的姊妹们(由左至右):维基共享资源娘、维基百科娘、维基语录娘
维基娘的姊妹们(由左至右):维基共享资源娘、维基百科娘、维基语录娘

实现了。

MIT License
Written by Human, Not by AI

最后更新于 2024 年 4 月 6 日