使用 Figure 短代码增强内容的可读性

探索 Hugo 的 Figure 短代码：让图片和图注更具表现力

在网站内容创作中，图片是传达信息、提升用户体验的重要元素。然而，仅仅插入图片往往不够，我们还需要为图片添加描述性的图注，并可能需要进行一些简单的样式调整。Hugo 提供了强大的短代码（Shortcodes）功能，其中 figure 短代码尤其适用于处理带图注的图片。

什么是 Figure 短代码？

figure 短代码是一个内置的 Hugo 短代码，它允许你在 Markdown 内容中插入一个 figure 元素，并为其添加 figcaption（图注）。这比直接使用 HTML <img> 和 <figure> 标签更加简洁和易于管理。

如何使用 Figure 短代码

使用 figure 短代码的基本语法如下：

让我们分解一下这个短代码的参数：

• src: 图片的路径。这可以是相对路径（相对于 static/ 目录）或绝对 URL。
• alt: 图片的替代文本（alt text）。这是 SEO 和可访问性的重要组成部分。
• caption: 图片的图注文本。

示例：

假设你有一张图片 static/images/world-cup-trophy.jpg，你可以在你的 Markdown 文件中这样插入它：

渲染后，它将生成如下的 HTML 结构（具体样式可能取决于你的主题）：

<figure>
  <img src="/images/world-cup-trophy.jpg" alt="世界杯奖杯">
  <figcaption>这是图片的图注</figcaption>
</figure>

Figure 短代码的高级用法

figure 短代码还支持一些可选的参数，可以让你更灵活地控制图片的显示：

• title: 图片的标题属性。
• class: 为 figure 元素添加自定义 CSS 类，方便进行样式控制。
• link: 如果你想让图片成为一个链接，可以指定 link 参数，它将包裹整个 figure 元素。

示例：带链接和自定义类的 figure 短代码

这会生成类似以下的 HTML：

<figure class="team-gallery-item">
  <a href="/teams/profile">
    <img src="/images/team-photo.png" alt="球队合影" title="球队合影">
  </a>
  <figcaption>球队赛前合影留念</figcaption>
</figure>

在主题中自定义 Figure 短代码

如果你想进一步定制 figure 短代码的行为，或者为其添加默认样式，你可以在你的主题的 layouts/shortcodes/figure.html 文件中覆盖默认实现。

例如，一个简单的自定义实现可能看起来像这样：

<figure {{ with .Get "class" }} class="{{ . }}"{{ end }}>
  {{ with .Get "link" }}<a href="{{ . }}"> {{ end }}
    <img src="{{ .Get "src" }}"
         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"
         {{ with .Get "title" }} title="{{ . }}"{{ end }} />
  {{ with .Get "link" }}</a>{{ end }}
  {{ with .Get "caption" }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
</figure>

通过这种方式，你可以让 figure 短代码的行为更符合你的网站设计需求。

总结

figure 短代码是 Hugo 提供的一个非常有用的工具，它使得在 Markdown 内容中插入带图注的图片变得简单而优雅。掌握 figure 短代码的使用，将能显著提升你的内容创作效率和网站的视觉表现力。

世界杯官方直播站内容创作指南