05.其他
,

插件admonition

文章目录
  1. 1. 安装插件admonition
  2. 2. 使用指南
  3. 3. 支持的类型
  4. 4. 设置/隐藏标题
  5. 5. 嵌套 markdown 标记
  6. 6. 样式配置

安装插件admonition

1
npm install hexo-admonition --save

使用指南

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

1
2
3
!!! note Hexo-admonition 插件使用示例 
    这是基于 hexo-admonition 插件渲染的一条提示信息。类型为 note，并设置了自定义标题。 
    提示内容开头留 4 个空格，可以有多行，最后用空行结束此标记。

支持的类型

提示类型 type 将用作 CSS 类名称，暂支持如下类型：

  • note
  • info, todo
  • warning, attention, caution
  • error, failure, missing, fail

设置/隐藏标题

标题 title 是可选的，当未设置时，将以 type 作为默认值:

1
2
!!! warning
    这是一条采用默认标题的警告信息。

嵌套 markdown 标记

在 hexo-admonition 内部，还可以嵌套标准 Markdown 标签，例如：

1
2
3
!!! todo "嵌套链接及引用块" 
    欢迎访问我的博客链接：[悟尘记](https://www.lixl.cn) 
    >这里嵌套一行引用信息。

样式配置

将如下样式放入 hexo 主题的自定义样式文件中（如：my.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
.admonition {
	margin:1.5625em 0;
	padding:.6rem;
	overflow:hidden;
	font-size:.64rem;
	page-break-inside:avoid;
	border-left:.3rem solid #42b983;
	border-radius:.3rem;
	box-shadow:0 0.1rem 0.4rem rgba(0,0,0,.05),0 0 0.05rem rgba(0,0,0,.1);
	background-color:#fafafa;
}
p.admonition-title {
	position:relative;
	margin:-.6rem -.6rem .8em -.6rem !important;
	padding:.4rem .6rem .4rem 2.5rem;
	font-weight:700;
	background-color:rgba(66,185,131,.1);
}
.admonition-title::before {
	position:absolute;
	top:.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,.1);
}
.warning>.admonition-title,.attention>.admonition-title,.caution>.admonition-title {
	background-color:rgba(255,145,0,.1);
}
.failure>.admonition-title,.missing>.admonition-title,.fail>.admonition-title,.error>.admonition-title {
	background-color:rgba(255,82,82,.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;
}

来源: 悟尘记 - 李小龙的博客网站
文章作者: 李小龙
文章链接: https://www.lixl.cn/2020/041837756.html