5

让 Hugo 自动给图片加上说明文字

 11 months ago
source link: https://cyrusyip.org/zh-cn/post/2021/03/11/automatically-caption-image-with-alt-in-hugo/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

让 Hugo 自动给图片加上说明文字

2021-03-11 约 468 字 预计阅读 1 分钟

开始写博客之后我发现了 Markdown 缺少一个重要功能：给图片加上说明文字。Markdown 插入图片的语法是这样的：

![这是一张图片](图片链接)

我希望「这是一张图片」可以显示在图片底部。想修改网站样式的时候，我常常告诫自己要多写文章，少美化网站。毕竟写作灵感稍纵即逝，样式却随时可以改。可能是今天牙痛比较烦躁，想起这个问题就很想解决掉。在谷歌搜索一番，发现了一篇文章（存档）里有给图片加说明文字的方法。我根据里面的代码略作修改，就搞定这个问题了。步骤如下：

  1. 在博客根目录下新建 layouts/_default/_markup/render-image.html

    mkdir layouts/_default/_markup/ -p
touch layouts/_default/_markup/render-image.html

  2. 往 render-image.html 填入以下内容

    <figure>
<center>
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}">
<figcaption>{{ .Text }}</figcaption>
</center>
</figure>

现在输入：

![维基娘的姊妹们（由左至右）：维基共享资源娘、维基百科娘、维基语录娘](https://upload.wikimedia.org/wikipedia/commons/1/1f/Wiki-sisters.png)

它会被显示为：

2021-03-11_wikisisters-with-caption.png

另外，我还在 Stack Overflow 发现了一个怪招：使用单列双行的表格，第一行放图片，第二行放说明文字。

|![](图片链接)|
|:-:|
|说明文字|

| ![space-1.jpg](http://www.storywarren.com/wp-content/uploads/2016/09/space-1.jpg) | 
|:--:| 
| *Space* |

效果如下：

space-1.jpg
Space

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK