在图片下显示说明文字
hugo建立博客之后,大部分体验都很好,但是目前还有几个想改进的东西。图片是解决了,但是我希望对图片进行一些描述,因为对一些图片的解说又不想出现在正文里。markdown里虽然有这个语法:
![描述](链接)
需求就是把这个描述
是出现在图片下方。这个图片描述是在图片不显示时显示的文字,img标签里会写入alt
属性里。
搜了搜看到了这篇文章(补档)提供了一个思路给图片加文字说明。略作修改就能用。
步骤:
- 在博客主题下找到
layouts/_default/_markup/render-image.html
- 把
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>
借用上面网站里的图片示例:
实现了。