目录

hugo loveit 主题的美化扩展标签admonition

admonition shortcode 支持12种颜色样式,更好的展现美化您的文章.

hugo loveit 主题的美化扩展标签

admonition shortcode 支持12种颜色样式,更好的展现美化您的文章.

支持Markdown或者HTML格式.

admonition的语法

  • type 横幅的颜色样式

  • title 横幅的标题内容

  • open 横幅是否自动展开 默认true

完整代码:

1
2
3
4
5
6
7
{{< admonition type=tip title="示例标题" open=false >}}
示例内容
{{< /admonition >}}
或者
{{< admonition tip "示例标题" false >}}
示例内容
{{< /admonition >}}

网页渲染后效果:

示例标题
示例内容


全部颜色样式

代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
{{< admonition >}}
一个 **默认** 横幅 
{{< /admonition >}}

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

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

{{< admonition tip >}}
一个 **技巧** 横幅
{{< /admonition >}}

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

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

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

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

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

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

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

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

渲染后效果

注意
一个 默认 横幅
摘要
一个 摘要 横幅
信息
一个 信息 横幅
技巧
一个 技巧 横幅
成功
一个 成功 横幅
问题
一个 问题 横幅
警告
一个 警告 横幅
失败
一个 失败 横幅
危险
一个 危险 横幅
Bug
一个 Bug 横幅
示例
一个 示例 横幅
引用
一个 引用 横幅

作者:福州老杨
参照loveit官方文档补充修改