Hugo Markdown 屬性

使用 Markdown 屬性在將 Markdown 渲染為 HTML 時添加 HTML 屬性。

概述

Hugo 支持圖像和塊元素（包括引用塊、圍欄代碼塊、標題、水平線、列表、段落和表格）的 Markdown 屬性。

例如：

This is a paragraph.
{class="foo bar" id="baz"}

使用 class 和 id 屬性，你也可以使用簡短表示法：

This is a paragraph.
{.foo .bar #baz}

Hugo 將上述兩個示例都渲染為：

<p class="foo bar" id="baz">This is a paragraph.</p>

使用 class 和 id 屬性時，無論你使用長格式還是短格式表示法，結果值都可以通過 Attributes 方法在 render hook templates 中使用。例如：

{{ .Attributes.class }} → foo bar
{{ .Attributes.id }} → baz

塊元素

更新站點配置以啟用塊級元素的 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 specification 將圖像元素包裝在段落元素內。

如果你將屬性列表放在圖像元素下面，Hugo 會將屬性應用於周圍的段落，而不是圖像。

要將屬性應用於獨立圖像元素，你必須禁用默認的包裝行為：

markup:
  goldmark:
    parser:
      wrapStandAloneImageWithinParagraph: false

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

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

用法

你可以添加 global HTML attributes 或當前元素類型特定的 HTML 屬性。與其內容安全模型一致，Hugo 會刪除 HTML 事件屬性，如 onclick 和 onmouseover。

屬性列表由一個或多個鍵值對組成，用空格或逗號分隔，用大括號包裹。你必須引用包含空格的字符串值。與 HTML 不同，布爾屬性必須同時具有鍵和值。

例如：

> This is a blockquote.
{class="foo bar" hidden=hidden}

Hugo 將其渲染為：

<blockquote class="foo bar" hidden="hidden">
  <p>This is a blockquote.</p>
</blockquote>

在大多數情況下，將屬性列表放在 markup 元素下面。對於標題和圍欄代碼塊，將屬性列表放在右側。

Element	Position of attribute list
blockquote	bottom
fenced code block	right
heading	right
horizontal rule	bottom
image	bottom
list	bottom
paragraph	bottom
table	bottom

例如：

## Section 1 {class=foo}

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

This is a paragraph.
{class=foo}

如上所示，圍欄代碼塊的屬性列表不僅限於 HTML 屬性。你還可以通過傳遞 these options 之一來配置語法高亮。

Last updated: January 1, 0001

Improve this page