Markdown扩展
# Markdown 扩展
Markdown 容器是对 Markdown 语法的一个扩展，使用简单的语法就可以在页面中呈现丰富的效果。
除了原默认主题自带的容器外，本主题还新增了一些好用的自定义容器。
# 信息框容器
::: tip
这是一条提示
:::
::: warning
这是一条注意
:::
::: danger
这是一条警告
:::
::: note
这是笔记容器，在 <Badge text="v1.5.0 +" /> 版本才支持哦~
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
示例:
提示
这是一条提示
注意
这是一条注意
警告
这是一条警告
笔记
这是笔记容器，在 v1.5.0 + 版本才支持哦~
以上容器均可自定义标题，如：
::: tip 我的提示
自定义标题的提示框
:::
1
2
3
2
3
我的提示
自定义标题的提示框
# 布局容器
::: center
### 我是居中的内容
（可用于标题、图片等的居中）
:::
::: right
[我是右浮动的内容](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
:::
::: details
这是一个详情块，在 IE / Edge 中不生效
```js
console.log('这是一个详情块')
```
:::
::: theorem 牛顿第一定律
假若施加于某物体的外力为零，则该物体的运动速度不变。
::: right
来自 [维基百科](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
示例：
# 我是居中的内容
（可用于标题、图片等的居中）
点击查看
这是一个详情块，在 IE / Edge 中不生效
console.log('这是一个详情块')
1
# 普通卡片列表
# 效果
- name: Unity
avatar: /img/home/unity.png
desc: Unity游戏引擎.
link: https://unity.com/cn
bgColor: 'rgb(165 216 243)'
textColor: '#6854A1'
- name: CocosCreator
desc: CocosCreator游戏引擎
avatar: /img/home/creator.png
link: https://www.cocos.com/
bgColor: '#1abc9c'
textColor: '#c0392b'
- name: Skynet
desc: Skynet游戏服务端
avatar: /img/home/skynet.png
link: https://github.com/cloudwu/skynet
bgColor: '#2980b9'
textColor: '#ecf0f1'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
《静夜思》
床前明月光，疑是地上霜。举头望明月，低头思故乡。
Vdoing
🚀一个描述
- name: 《静夜思》
desc: 床前明月光，疑是地上霜。举头望明月，低头思故乡。
bgColor: '#F0DFB1'
textColor: '#242A38'
- name: Vdoing
desc: 🚀一个描述
link: /
bgColor: '#DFEEE7'
textColor: '#2A3344'
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 语法
::: cardList <每行显示数量>
``` yaml
- name: 名称
desc: 描述
avatar: https://xxx.jpg # 头像，可选
link: https://xxx/ # 链接，可选
bgColor: '#CBEAFA' # 背景色，可选，默认var(--bodyBg)。颜色值有#号时请添加引号
textColor: '#6854A1' # 文本色，可选，默认var(--textColor)
```
:::
- <
每行显示数量> 数字，表示每行最多显示多少个，选值范围1~4，默认3。在小屏时会根据屏幕宽度减少每行显示数量。 - 代码块需指定语言为
yaml - 代码块内是一个yaml格式的数组列表
- 数组成员的属性有：
name: 名称desc: 描述avatar: 头像，可选link: 链接，可选bgColor: 背景色，可选，默认var(--bodyBg)。颜色值有#号时请添加引号textColor: 文本色，可选，默认var(--textColor)
# 图文卡片列表
# 效果
- img: /other/icon1.jpg
name: For you
desc: 你若盛开，清风自来。
- img: /other/icon2.jpg
name: To me
desc: 心若浮沉，浅笑安然。
- img: /other/icon3.jpg
name: To me
desc: 你笑了，我笑了
- img: /other/icon4.jpg
name: To me
desc: 你哭了，我笑了
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 语法
::: cardImgList <每行显示数量>
``` yaml
- img: https://xxx.jpg # 图片地址
link: https://xxx.com # 链接地址
name: 标题
desc: 描述 # 可选
author: 作者名称 # 可选
avatar: https://xxx.jpg # 作者头像，可选
```
:::
- <
每行显示数量> 数字，表示每行最多显示多少个，选值范围1~4，默认3。在小屏时会根据屏幕宽度减少每行显示数量。 - 代码块需指定语言为
yaml - 代码块内是一个
yaml格式的数组列表 - 数组成员的属性有：
img: 图片地址link: 链接地址name: 标题desc: 描述，可选author: 作者名称，可选avatar: 作者头像，可选