短代码 on Hugo 中文文档

figure

Thu, 01 Oct 2026 00:00:00 +0800

示例

正文里这样写：

{{< 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 属性。取值通常是页面资源（page resource）或全局资源（global resource）。
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 目标地址时，先查找匹配的页面资源（page resource），找不到时回退到匹配的全局资源（global resource）。远程地址原样传递，无法解析目标地址时不会抛出错误或警告。

highlight

Thu, 01 Oct 2026 00:00:00 +0800

ref

Thu, 01 Oct 2026 00:00:00 +0800

relref

Thu, 01 Oct 2026 00:00:00 +0800

param

Thu, 01 Oct 2026 00:00:00 +0800

param 短代码渲染前置元数据（front matter）中的参数，取不到同名参数时回退到站点参数。参数不存在时，短代码会抛出错误。

details

Thu, 01 Oct 2026 00:00:00 +0800

details 短代码把一段内容包进 HTML 的 details 元素，折叠与展开由浏览器原生实现，不需要 JavaScript。自 Hugo 0.140.0 起可用。适合放置补充说明、较长的清单或常见问题等次要内容：默认只显示一行摘要，读者点击后才展开正文。

qr

Thu, 01 Oct 2026 00:00:00 +0800

qr 短代码按指定选项把给定的文本编码为二维码，并渲染出对应的图片。自 Hugo 0.141.0 起可用。生成的图片会写入发布目录（publishDir）下的子目录，正文中得到的是一个引用该图片的 img 元素，因此二维码可以用于网址、电话号码或名片等需要被手机扫描的场景。

instagram

Thu, 01 Oct 2026 00:00:00 +0800

instagram 短代码在正文中嵌入一条 Instagram 帖子。它不接受内部内容，只接受一个位置参数，即帖子地址中的 ID。

示例

要展示地址为 https://www.instagram.com/p/CxOWiQNP2MO/ 的帖子，只需在 Markdown 中写入帖子 ID：

vimeo

Thu, 01 Oct 2026 00:00:00 +0800

vimeo 短代码在正文中嵌入一个 Vimeo 播放器，默认输出带内联样式的 iframe 元素，外层包一个 div 元素。

示例

要展示地址为 https://vimeo.com/19899678 的视频，只需在 Markdown 中写入视频 ID：

x

Thu, 01 Oct 2026 00:00:00 +0800

x 短代码在正文中嵌入一条 X（原 Twitter）帖子。自 Hugo 0.141.0 起可用。

示例

要展示地址为 https://x.com/SanDiegoZoo/status/1453110110599868418 的帖子，需要给出作者用户名与帖子 ID：

youtube

Thu, 01 Oct 2026 00:00:00 +0800

youtube 短代码在正文中嵌入一个 YouTube 播放器，默认输出带 style 属性的 iframe 元素，外层包一个带 style 属性的 div 元素。

示例

要展示地址为 https://www.youtube.com/watch?v=0RKpf3rK57I 的视频，只需在 Markdown 中写入视频 ID：