hugo主题美化功能admonition

2022-09-06 17:20:55 浏览数 (1)

admonition

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

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

admonition shortcode 有以下命名参数:

  • type [必需]第一个位置参数) admonition 横幅的类型,默认值是 note
  • title [可选]第二个位置参数) admonition 横幅的标题,默认值是 type 参数的值。(支持 markdown)
  • open [可选]第三个位置参数) 横幅内容是否默认展开,默认值是 true

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

代码语言:javascript复制
{{< admonition type=tip title="This is a tip" open=false >}}
一个 **提示** 横幅
{{< /admonition >}}
或者
{{< admonition tip "This is a tip" false >}}
一个 **提示** 横幅
{{< /admonition >}}

显示效果如下:

Tip

一个 提示 横幅

12种样式代码和效果

note

代码语言:javascript复制
{{< admonition >}}
一个 **注意** 横幅
{{< /admonition >}}

注意

一个 注意 横幅

tip

代码语言:javascript复制
{{< admonition tip>}}
一个 **提示** 横幅
{{< /admonition >}}

Tip

一个 提示 横幅

abstract

代码语言:javascript复制
{{< admonition abstract>}}
一个 **摘要** 横幅
{{< /admonition >}}

摘要

一个 摘要 横幅

info

代码语言:javascript复制
{{< admonition info >}}
一个 **信息** 横幅
{{< /admonition >}}

信息

一个 信息 横幅

success

代码语言:javascript复制
{{< admonition success >}}
一个 **成功** 横幅
{{< /admonition >}}

成功

一个 成功 横幅

question

代码语言:javascript复制
{{< admonition question >}}
一个 **问题** 横幅
{{< /admonition >}}

问题

一个 问题 横幅

warning

代码语言:javascript复制
{{< admonition warning >}}
一个 **警告** 横幅
{{< /admonition >}}

警告

一个 警告 横幅

failure

代码语言:javascript复制
{{< admonition failure >}}
一个 **失败** 横幅
{{< /admonition >}}

失败

一个 失败 横幅

danger

代码语言:javascript复制
{{< admonition danger >}}
一个 **危险** 横幅
{{< /admonition >}}

危险

一个 危险 横幅

bug

代码语言:javascript复制
{{< admonition bug >}}
一个 **Bug** 横幅
{{< /admonition >}}

Bug

一个 Bug 横幅

example

代码语言:javascript复制
{{< admonition example >}}
一个 **示例** 横幅
{{< /admonition >}}

示例

一个 示例 横幅

quote

代码语言:javascript复制
{{< admonition quote >}}
一个 **引用** 横幅
{{< /admonition >}}

引用

一个 引用 横幅

0 人点赞