Hugo 的短代码（Shortcodes）是强大的工具，允许您在 Markdown 内容中嵌入复杂的 HTML 结构。figure 短代码是其中一个非常实用的例子，它专门用于生成包含图片、标题和可选说明的 figure HTML 元素。这对于在世界杯体育竞猜彩票官方信息发布网站上展示比赛图片、球队标志或数据图表尤为有用。

Figure 短代码的用法

figure 短代码的基本用法非常简单。您可以通过传递参数来控制图片源、标题、替代文本（alt text）以及说明。

基本示例:

这将生成如下 HTML：

<figure>
  <img src="/images/worldcup-logo.png" alt="世界杯官方标志">
  <figcaption>
    <h4>世界杯标志</h4>
  </figcaption>
</figure>

参数详解

• src: (必需) 图片文件的路径。可以是相对路径（相对于内容文件）或绝对路径（相对于 static 目录）。
• title: (可选) 图片的标题，会显示在 figcaption 中。
• alt: (可选) 图片的替代文本，对可访问性至关重要，当图片无法加载时显示，同时也是搜索引擎优化的重要部分。
• caption: (可选) 图片的详细说明，也会显示在 figcaption 中。如果同时提供了 title 和 caption，它们会合并显示。
• class: (可选) 为 figure 元素添加自定义 CSS 类，方便样式化。
• attr: (可选) 图片的来源或版权信息，通常与 title 一起显示。
• attrlink: (可选) 链接到 attr 参数指定的来源。

带版权信息的示例:

这将生成：

<figure>
  <img src="/images/stadium.jpg" alt="足球比赛场馆照片">
  <figcaption>
    <h4>比赛场馆</h4>
    <p>比赛日高清实况</p>
    <p><small>来源: <a href="https://www.fifa.com">FIFA 官方图库</a></small></p>
  </figcaption>
</figure>

在主题中使用

主题的开发者可以在模板文件中定义 figure 短代码的默认行为，也可以允许用户通过 config.toml 进行全局配置。例如，您可以配置所有通过 figure 短代码插入的图片都自动添加一个默认的 CSS 类。

{{/* In a theme's layout file, e.g., layouts/_default/single.html */}}
<article>
  {{ .Content }}
</article>

Hugo 的 figure 短代码提供了一种优雅的方式来处理图片及其相关的元数据，对于构建信息丰富且视觉吸引力的网站（如世界杯竞猜相关内容平台）非常有帮助。