图示

示例

使用此标记

{{< figure
  src="/images/examples/zion-national-park.jpg"
  alt="A photograph of Zion National Park"
  link="https://www.nps.gov/zion/index.htm"
  caption="Zion National Park"
  class="ma0 w-75"
>}}

Hugo 渲染此 HTML

<figure class="ma0 w-75">
  <a href="https://www.nps.gov/zion/index.htm">
    <img 
      src="/images/examples/zion-national-park.jpg" 
      alt="A photograph of Zion National Park"
    >
  </a>
  <figcaption>
    <p>Zion National Park</p>
  </figcaption>
</figure>

这在您的浏览器中看起来像这样

参数

src

（string）img 元素的 src 属性。通常这是一个页面资源或一个全局资源。

alt

（string）img 元素的 alt 属性。

width

（int）img 元素的 width 属性。

height

（int）img 元素的 height 属性。

loading

（string）img 元素的 loading 属性。

class

（string）figure 元素的 class 属性。

link

（string）包裹 img 元素的锚元素的 href 属性。

target

（string）包裹 img 元素的锚元素的 target 属性。

rel

（rel）包裹 img 元素的锚元素的 rel 属性。

title

（string）在 figurecaption 元素中，标题位于顶部，并包裹在 h4 元素中。

caption

（string）在 figurecaption 元素中，标题位于底部，并且可能包含纯文本或 Markdown。

attr

（string）在 figurecaption 元素中，属性显示在标题旁边，并且可能包含纯文本或 Markdown。

attrlink

（string）包裹属性的锚元素的 href 属性。

图像位置

figure 短代码通过查找匹配的页面资源来解析内部 Markdown 目标，如果没有匹配的页面资源，则会回退到匹配的全局资源。远程目标将直接传递，如果渲染钩子无法解析目标，则不会抛出错误或警告。

您必须将全局资源放置在 assets 目录中。如果您已将资源放置在 static 目录中，并且您无法或不愿意移动它们，则必须通过在您的站点配置中包含以下两个条目，将 static 目录挂载到 assets 目录

module:
  mounts:
  - source: assets
    target: assets
  - source: static
    target: assets

[module]
  [[module.mounts]]
    source = 'assets'
    target = 'assets'
  [[module.mounts]]
    source = 'static'
    target = 'assets'

{
   "module": {
      "mounts": [
         {
            "source": "assets",
            "target": "assets"
         },
         {
            "source": "static",
            "target": "assets"
         }
      ]
   }
}