Hugo添加Admonition功能

Admonition(警告，加重点) 是指在文档中用来提供额外信息、注意事项、警告或提示的一种结构化的文本格式。在 Hugo 中添加 Admonition，可以让读者轻松的阅读我们的文章。

添加 Admonition 功能

在网站根目录下添加 admonition.html 文件（路径：layouts/shortcodes/admonition.html）

{{- $type := .Get "type" | default "note"}}
<div class="admonition {{ $type }}">
  <div class="title">{{ .Get "title" | default $type }}</div>
  <div class="content">{{ .Inner | markdownify }}</div>
</div>

添加 admonition 样式表，在网站根目录下添加 blank.css 文件（路径：assets/css/extended/blank.css），blank.css 中添加如下内容：

.admonition {
  padding: 15px;
  margin-bottom: 21px;
  border-left: 10px solid transparent;
}

.admonition .title {
  margin: 0;
  text-transform: uppercase;
  padding-left: 3px;
  border: 1px solid;
  border-style: hidden hidden solid;
}

.admonition .content {
  padding-left: 0.75em;
  padding-right: 0.75em;
  padding-top: 0.5em;
  margin-left: 0;
  border-left: 0;
  border-top: 0;
  min-height: 0;
}

.note {
  border-color: olive;
  background-color: #f6fffe;
}

.note .title {
  color: olive;
  border-color: olive;
}

.tip {
  border-color: blue;
  background-color: #f6fcff;
}

.tip .title {
  color: blue;
  border-color: blue;
}

.warning {
  border-color: orange;
  background-color: #fffeec;
}

.warning .title {
  color: orange;
  border-color: orange;
}

.important {
  border-color: red;
  background-color: #fffbfb;
}

.important .title {
  color: red;
  border-color: red;
}

这个实现参考了Admonitions in Hugo。

使用示例

注意

在代码块中显示 shortcodes 并不是那么容易的事。即使在代码块中，shortcodes 也会被 Hugo 评估，转化为 shortcodes 对应的 html。而这会导致我们无法在文章中演示 admonition 的使用。在Shortcode syntax example within a code block is being executed找到了一种方法，可以让我们在文章中演示 shortcodes：

{{</* foo */>}}
{{%/* bar */%}}

注意 admonition：

{{< admonition type="note" title="注意" >}}
This is some note information that you should pay attention to.
{{< /admonition >}}

注意

This is some note information that you should pay attention to.

提示 admonition：

{{< admonition type="tip" title="提示" >}}
This is some tip information that you should pay attention to.
{{< /admonition >}}

提示

This is some tip information that you should pay attention to.

警告 admonition：

{{< admonition type="warning" title="警告" >}}
This is some warning information that you should pay attention to.
{{< /admonition >}}

警告

This is some warning information that you should pay attention to.

强调/错误 admonition：

{{< admonition type="important" title="强调" >}}
This is some important information that you should pay attention to.
{{< /admonition >}}

强调

This is some important information that you should pay attention to.

添加 Admonition 功能#

使用示例#

添加 Admonition 功能

使用示例