hugo主题美化功能admonition

admonition

admonition,有着炫酷的效果,可以美化文章笔记,但它并不是Markdown的标准语法,不能被Markdown正常渲染,需要额外的插件配置。

有人喜欢它的优美的展示效果,有人觉得它是对Markdown语法的污染,使用因人而异。

admonition shortcode 有以下命名参数:

  • type [必需]第一个位置参数)

    admonition 横幅的类型,默认值是 note

  • title [可选]第二个位置参数)

    admonition 横幅的标题,默认值是 type 参数的值。(支持 markdown)

  • open [可选]第三个位置参数)

    横幅内容是否默认展开,默认值是 true

hugo的LoveIt,FixIt主题都集成了admonition shorcode功能,可以比较方便的进行使用,语法和样式效果如下。 一个admonition示例:

1
2
3
4
5
6
7
{{< admonition type=tip title="This is a tip" open=false >}}
一个 **提示** 横幅
{{< /admonition >}}
或者
{{< admonition tip "This is a tip" false >}}
一个 **提示** 横幅
{{< /admonition >}}

显示效果如下:

Tip
一个 提示 横幅

12种样式代码和效果

note

1
2
3
{{< admonition >}}
一个 **注意** 横幅
{{< /admonition >}}
注意
一个 注意 横幅

tip

1
2
3
{{< admonition tip>}}
一个 **提示** 横幅
{{< /admonition >}}
Tip
一个 提示 横幅

abstract

1
2
3
{{< admonition abstract>}}
一个 **摘要** 横幅
{{< /admonition >}}
摘要
一个 摘要 横幅

info

1
2
3
{{< admonition info >}}
一个 **信息** 横幅
{{< /admonition >}}
信息
一个 信息 横幅

success

1
2
3
{{< admonition success >}}
一个 **成功** 横幅
{{< /admonition >}}
成功
一个 成功 横幅

question

1
2
3
{{< admonition question >}}
一个 **问题** 横幅
{{< /admonition >}}
问题
一个 问题 横幅

warning

1
2
3
{{< admonition warning >}}
一个 **警告** 横幅
{{< /admonition >}}
警告
一个 警告 横幅

failure

1
2
3
{{< admonition failure >}}
一个 **失败** 横幅
{{< /admonition >}}
失败
一个 失败 横幅

danger

1
2
3
{{< admonition danger >}}
一个 **危险** 横幅
{{< /admonition >}}
危险
一个 危险 横幅

bug

1
2
3
{{< admonition bug >}}
一个 **Bug** 横幅
{{< /admonition >}}
Bug
一个 Bug 横幅

example

1
2
3
{{< admonition example >}}
一个 **示例** 横幅
{{< /admonition >}}
示例
一个 示例 横幅

quote

1
2
3
{{< admonition quote >}}
一个 **引用** 横幅
{{< /admonition >}}
引用
一个 引用 横幅