Admonition标签扩展

Hexo

条幅

这是一条横幅

项目地址

https://github.com/haishanh/hexo-tag-admonition

语法

1
2
3
{% admonition level title %}
content
{% endadmonition %}

例子

危险

速速撤离！！！

警告

前方高能！

通知

这不是演习

注意事项

本质上只是进行了html格式化并加上了css标签

1
2
3
4
<div class="admonition level">
  <p class="admonition-title">title</p>
  <p>content</p>
</div>

并非即插即用，css需要自己在theme里配置,stylus例子
不同的level只是一个标签而已，可以自定义颜色和级别

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
admon-color($color) {
  background-color: lighten($color, 25%);
  border-color: $color;
}

.admonition {
  padding: 0 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: left;
  &-title {
    font-weight: bold;
    text-align: left;
  }
  &.note,
  &.info,
  &.tips {
    admon-color(#3498db);
  }
  &.warning,
  &.warn,
  &.important {
    admon-color(#e67e22);
  }
  &.danger,
  &.critical {
    admon-color(#e74c3c);
  }
}

版权声明

This site by Linest is licensed under a Creative Commons BY-NC-ND 4.0 International License.
由Linest创作并维护的博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。

本文永久链接：http://linest.github.io/2016/10/03/hexo-ext-admonition/