叶寻的博客

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

叶寻
目次

本文测试于 Hugo extended 0.125.6，完整的网站代码在此。

将图片标题用作说明文字（推荐） #

Markdown 插入图片的代码是这样的：

1

![描述](链接 "标题")

对于的 HTML 代码：

1

<img src="链接" alt="描述" title="标题" />

用户的光标放在图片时，会有提示框，其内容为标题。提示框不好用，因为用户不一定会把光标移动到图片上，而且用户可能不用鼠标。

既然提示框不好用，那我们可以将标题转换为图片底下的说明文字，这样用户一定会看到。对应的 HTML 代码为：

1
2
3
4

<figure>
  <img src="链接" alt="描述">
  <figcaption>标题</figcaption>
</figure>

配置流程：

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

    1
2

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

  2. 往 render-image.html 填入以下内容（如果不需要修改样式，可以去除 class="..."）：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10

    {{ if .Title }}
  <figure class="figure">
    <img class="img" src="{{ .Destination | safeURL }}"
      {{- with .Text }} alt="{{ . }}"{{ end -}} >
    <figcaption>{{ .Title }}</figcaption>
  </figure>
{{ else }}
  <img class="img" src="{{ .Destination | safeURL }}"
    {{- with .Text }} alt="{{ . }}"{{ end -}} >
{{ end }}

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

如果不需要说明文字，就写 ![维基娘的姊妹们（由左至右）：维基共享资源娘、维基百科娘、维基语录娘](https://upload.wikimedia.org/wikipedia/commons/1/1f/Wiki-sisters.png)。

将图片描述用作说明文字（不推荐） #

不推荐此方法的原因是 <img> 元素的 alt 属性（描述） 和 <figcaption> 元素意义不同，将前者转换成后者是错的。

如果你的 Markdown 图片链接是只有描述没有标题，也可以把描述变成说明文字。render-image.html 需要改为：

1
2
3
4

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

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

样式 #

我给本站加了一些额外的样式，你可以根据你的需求调整你的网站。!important 必要时才用。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

/* remove figure margin */
figure {
  margin: 0 !important;
}
figure > figcaption {
  color: gray;
}
/* image is not clickable because photoswipe is disabled */
p > img {
  cursor: auto !important;
}
/* center img */
// :has only works for browsers after December 2023, see https://caniuse.com/css-has
p:has(.img), .figure{
  text-align: center;
}

用表格添加说明文字 #

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

1
2
3

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

1
2
3

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

参考资料 #

标签：

giscus 评论。如果评论未加载，giscus 可能被你的互联网服务提供商屏蔽。

Disqus 评论。如果评论未加载，Disqus 可能被你的互联网服务提供商屏蔽。