vuepress-theme-vdoing本站使用主题
本站使用主题: vuepress-theme-vdoing
# 快速上手
# 安装启动
git clone https://github.com/xugaoyi/vuepress-theme-vdoing.git
cd vuepress-theme-vdoing
npm install
npm run dev
1
2
3
4
5
6
7
2
3
4
5
6
7
# 使用 Vdoing 主题
# 安装最新主题包
npm install vuepress-theme-vdoing -D
# 在.vuepress/config.js中配置使用主题
module.exports = {
theme: 'vdoing'
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 版本升级
npm update vuepress-theme-vdoing
1
# 评论插件
本站使用评论插件 valine (opens new window)
# Markdown 容器
# 信息框容器
::: tip
这是一条提示
:::
::: warning
这是一条注意
:::
::: danger
这是一条警告
:::
::: note
这是笔记容器，在 <Badge text="v1.5.0 +" /> 版本才支持哦~
:::
以上容器均可自定义标题，如：
::: tip 我的提示
自定义标题的提示框
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
提示
这是一条提示
注意
这是一条注意
警告
这是一条警告
笔记
这是笔记容器，在 v1.5.0 + 版本才支持哦~
我的提示
自定义标题的提示框
# 布局容器
::: 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
# 普通卡片列表
::: cardList
```yaml
- name: 麋鹿鲁哟
desc: 大道至简，知易行难
avatar: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200122153807.jpg # 可选
link: https://www.cnblogs.com/miluluyo/ # 可选
bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
textColor: '#6854A1' # 可选，默认var(--textColor)
- name: XAOXUU
desc: '#IOS #Volantis主题作者'
avatar: https://jsd.cdn.zzko.cn/gh/xaoxuu/assets@master/avatar/avatar.png
link: https://xaoxuu.com
bgColor: '#718971'
textColor: '#fff'
- name: 平凡的你我
desc: 理想成为大牛的小陈同学
avatar: https://reinness.com/avatar.png
link: https://reinness.com
bgColor: '#FCDBA0'
textColor: '#A05F2C'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
:::
::: cardList
```yaml
- name: 麋鹿鲁哟
desc: 大道至简，知易行难
avatar: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200122153807.jpg # 可选
link: https://www.cnblogs.com/miluluyo/ # 可选
bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
textColor: '#6854A1' # 可选，默认var(--textColor)
- name: XAOXUU
desc: '#IOS #Volantis主题作者'
avatar: https://jsd.cdn.zzko.cn/gh/xaoxuu/assets@master/avatar/avatar.png
link: https://xaoxuu.com
bgColor: '#718971'
textColor: '#fff'
- name: 平凡的你我
desc: 理想成为大牛的小陈同学
avatar: https://reinness.com/avatar.png
link: https://reinness.com
bgColor: '#FCDBA0'
textColor: '#A05F2C'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
:::
# Markdown 中使用组件
# 标记
Props:
- text- string
- type - string, 可选值： tip | warning | error，默认： tip
- vertical - string, 可选值： top | middle，默认： top
Usage:
你可以在标题或其他内容中使用标记：
#### 《沁园春·雪》 <Badge text="摘"/>
北国风光<Badge text="注释" type="warning"/>，千里冰封，万里雪飘。
> <Badge text="译文" type="error" vertical="middle"/>: 北方的风光。
1
2
3
4
2
3
4
# 《沁园春·雪》 摘
北国风光注释，千里冰封，万里雪飘。
译文: 北方的风光。
# 代码块选项卡
<code-group>
<code-block title="YARN" active>
```bash
yarn add vuepress-theme-vdoing -D
1
2
3
4
2
3
4
npm install vuepress-theme-vdoing -D
1
上次更新: 2023/09/22, 16:54:32