Hugo Figure 短代碼

示例

使用此標記：

{{< figure
  src="/images/examples/zion-national-park.jpg"
  alt="錫安國家公園的照片"
  link="https://www.nps.gov/zion/index.htm"
  caption="錫安國家公園"
  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>
  <figcaption>
    <p>錫安國家公園</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"
         }
      ]
   }
}