Markdown attributes

概述

Hugo 支援在圖片和區塊元素（包括區塊引言、圍欄式程式碼區塊、標題、水平線、列表、段落和表格）上使用 Markdown 屬性。

例如：

這是一段文字。
{class="foo bar" id="baz"}

使用 class 和 id 時，您可以使用簡寫表示法：

這是一段文字。
{.foo .bar #baz}

Hugo 會將這兩種方式渲染為：

<p class="foo bar" id="baz">這是一段文字。</p>

區塊元素

更新您的網站設定，啟用區塊級元素的 Markdown 屬性。

markup:
  goldmark:
    parser:
      attribute:
        block: true
        title: true

[markup]
  [markup.goldmark]
    [markup.goldmark.parser]
      [markup.goldmark.parser.attribute]
        block = true
        title = true

{
   "markup": {
      "goldmark": {
         "parser": {
            "attribute": {
               "block": true,
               "title": true
            }
         }
      }
   }
}

獨立圖片

預設情況下，當 Goldmark Markdown 渲染器遇到獨立圖片元素（該行上沒有其他元素或文字）時，它會根據 CommonMark 規範 把圖片元素包裹在段落元素中。

如果您將屬性列表放在圖片元素下方，Hugo 會將屬性應用於包圍的段落，而不是圖片。

若要將屬性應用於獨立圖片元素，必須禁用預設的包裹行為：

markup:
  goldmark:
    parser:
      wrapStandAloneImageWithinParagraph: false

[markup]
  [markup.goldmark]
    [markup.goldmark.parser]
      wrapStandAloneImageWithinParagraph = false

{
   "markup": {
      "goldmark": {
         "parser": {
            "wrapStandAloneImageWithinParagraph": false
         }
      }
   }
}

使用方式

您可以添加 全域 HTML 屬性，或是針對當前元素類型特定的 HTML 屬性。符合其內容安全模型的要求，Hugo 會移除 HTML 事件屬性，如 onclick 和 onmouseover。

屬性列表由一個或多個鍵值對組成，這些鍵值對之間由空格或逗號分隔，並被大括號包裹。包含空格的字串值必須加上引號。與 HTML 不同的是，布林屬性必須同時包含鍵和值。

例如：

> 這是一段區塊引言。
{class="foo bar" hidden=hidden}

Hugo 會將其渲染為：

<blockquote class="foo bar" hidden="hidden">
  <p>這是一段區塊引言。</p>
</blockquote>

在大多數情況下，請將屬性列表放在標記元素的下方。對於標題和圍欄式程式碼區塊，請將屬性列表放在右側。

例如：

## 第一節 {class=foo}

```bash {class=foo linenos=inline}
declare a=1
echo "${a}"
```

這是一段文字。
{class=foo}

如上所示，圍欄式程式碼區塊的屬性列表不僅限於 HTML 屬性。您還可以通過傳遞一個或多個 這些選項 配置語法高亮顯示。