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 之一来配置语法高亮。