Warning

为兼容 obsidian-admonition，已用 hexo-advanced-admonition 替代 hexo-admonition

Implementation

Hexo-admonition 遵循一种简单的语法：每个块都以 !!! 开头，然后是代表提示类型的关键字（type）及标题（title）。例如:

1
2
!!! note Hexo-admonition 插件使用示例
    内容

Warning

!!! Warning

内容开头留 4 个空格，可以有多行，最后用空行结束此标记。

Installation

1
yarn add hexo-admonition --save

Style file

New source/css/admonition.css

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
.admonition {
  margin: 1.5625em 0;
  padding: 0.6rem;
  overflow: hidden;
  font-size: 0.64rem;
  page-break-inside: avoid;
  border-left: 0.3rem solid #42b983;
  border-radius: 0.3rem;
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.05), 0 0 0.05rem rgba(0, 0, 0, 0.1);
  background-color: #fafafa;
}

p.admonition-title {
  position: relative;
  margin: -0.6rem -0.6rem 0.8em -0.6rem !important;
  padding: 0.4rem 0.6rem 0.4rem 2.5rem;
  font-weight: 700;
  background-color: rgba(66, 185, 131, 0.1);
}

.admonition-title::before {
  position: absolute;
  top: 0.9rem;
  left: 1rem;
  width: 12px;
  height: 12px;
  background-color: #42b983;
  border-radius: 50%;
  content: ' ';
}

.info > .admonition-title,
.todo > .admonition-title {
  background-color: rgba(0, 184, 212, 0.1);
}

.warning > .admonition-title,
.attention > .admonition-title,
.caution > .admonition-title {
  background-color: rgba(255, 145, 0, 0.1);
}

.failure > .admonition-title,
.missing > .admonition-title,
.fail > .admonition-title,
.error > .admonition-title {
  background-color: rgba(255, 82, 82, 0.1);
}

.admonition.info,
.admonition.todo {
  border-color: #00b8d4;
}

.admonition.warning,
.admonition.attention,
.admonition.caution {
  border-color: #ff9100;
}

.admonition.failure,
.admonition.missing,
.admonition.fail,
.admonition.error {
  border-color: #ff5252;
}

.info > .admonition-title::before,
.todo > .admonition-title::before {
  background-color: #00b8d4;
  border-radius: 50%;
}

.warning > .admonition-title::before,
.attention > .admonition-title::before,
.caution > .admonition-title::before {
  background-color: #ff9100;
  border-radius: 50%;
}

.failure > .admonition-title::before,
.missing > .admonition-title::before,
.fail > .admonition-title::before,
.error > .admonition-title::before {
  background-color: #ff5252;
  border-radius: 50%;
}

.admonition > :last-child {
  margin-bottom: 0 !important;
}

Import style

Edit _config.butterfly.yml

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/admonition.css?v1">

Reference

Hexo-admonition 插件安装使用指南