Markdown 属性
概述
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>
块级元素
更新您的站点配置以启用块级元素的 Markdown 属性。
hugo。
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 会将属性应用于周围的段落,而不是图像。
要将属性应用于独立的图像元素,必须禁用默认的包装行为
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 不同,布尔属性必须同时具有键和值。
例如
> This is a blockquote.
{class="foo bar" hidden=hidden}
Hugo 将其渲染为
<blockquote class="foo bar" hidden="hidden">
<p>This is a blockquote.</p>
</blockquote>
在大多数情况下,将属性列表放在标记元素下方。对于标题和围栏代码块,将属性列表放在右侧。
元素 | 属性列表的位置 |
---|---|
blockquote | 底部 |
围栏代码块 | 右边 |
标题 | 右边 |
水平线 | 底部 |
图像 | 底部 |
列表 | 底部 |
段落 | 底部 |
表格 | 底部 |
例如
## Section 1 {class=foo}
```bash {class=foo linenos=inline}
declare a=1
echo "${a}"
```
This is a paragraph.
{class=foo}
如上所示,围栏代码块的属性列表不限于 HTML 属性。您还可以通过传递一个或多个 这些选项 来配置语法高亮。