让 Hugo 自动给图片加上说明文字
💡
原文中文，约2600字，阅读约需7分钟。
📝
内容提要
本文讨论了在Hugo中插入图片的Markdown代码及其HTML实现，建议将图片标题转换为说明文字以提高可见性。提供了HTML代码示例，并解释了alt属性与figcaption元素的区别，同时提到了一些样式调整和替代方法。
🎯
关键要点
- Markdown 插入图片的代码格式为 ，对应的 HTML 代码为 <img src='链接' alt='描述' title='标题' />。
- 建议将图片标题转换为说明文字，以提高用户可见性，HTML 代码示例为 <figure><img src='链接' alt='描述'><figcaption>标题</figcaption></figure>。
- alt 属性和 figcaption 元素的意义不同，不能将 alt 属性的内容直接转换为 figcaption。
- 如果 Markdown 图片链接只有描述，可以将描述作为说明文字，HTML 代码示例为 <figure><img src='链接' alt='描述'><figcaption>{{ .Text }}</figcaption></figure>。
- 提供了一些样式调整的建议，例如去除 figure 的边距和居中图片。
❓
延伸问答
如何在Hugo中插入图片并添加说明文字？
在Hugo中插入图片可以使用Markdown格式：，并建议将标题转换为说明文字，使用HTML代码：<figure><img src='链接' alt='描述'><figcaption>标题</figcaption></figure>。
alt属性和figcaption元素有什么区别？
alt属性用于提供图片的替代文本，而figcaption元素用于为图片提供说明文字，两者的意义不同，不能直接互换。
如何自定义Hugo中图片的样式？
可以通过修改render-image.html文件中的CSS样式来调整图片的样式，例如去除figure的边距和居中图片。
如果Markdown图片链接只有描述，如何处理？
如果Markdown图片链接只有描述，可以将描述作为说明文字，使用HTML代码：<figure><img src='链接' alt='描述'><figcaption>{{ .Text }}</figcaption></figure>。
在Hugo中如何提高图片的可见性？
建议将图片标题转换为说明文字，这样用户一定会看到，而不是依赖于鼠标悬停提示框。
Hugo中如何创建自定义的图片渲染模板？
在博客根目录下新建layouts/_default/_markup/render-image.html文件，并填入相应的HTML代码以自定义图片渲染。
➡️
