博客主题案例

# 代码块分组

注意

<code-block>标签之间用空行隔开，否则可能会解析不出来。
<code-group>标签 markdown 内容之间使用空行隔开，否则可能会解析不出来。

输入：

<code-group>
  <code-block title="YARN" active>
  ```bash
  yarn add vuepress-theme-vdoing -D
  ```
  </code-block>

  <code-block title="NPM">
  ```bash
  npm install vuepress-theme-vdoing -D
  ```
  </code-block>
</code-group>

1
2
3
4
5
6
7
8
9
10
11
12
13

输出：

npm install -D vuepress

yarn install -D vuepress

// Make sure to add code blocks to your code group

# 信息提示容器块

输入：

::: tip tip
:::

::: warning
:::

::: danger danger
:::

::: right
right
:::

::: center
center
:::

::: theorem theorem
这里提供了一个灰色背景
:::

::: details details
details 块
:::

::: cardImgList 4

```yaml
- name: cardImgList
  img: /avatar-git.png
  link: https://github.com/eastonyangxu/
  desc: 这里的效果展示使用了cardImgList。 # 可选
  author: "eastonyangxu" # 可选
  avatar: /avatar-git.png # 可选
```

:::

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

输出：

tip

注意

danger

right

center

theorem

这里提供了一个灰色背景

details

details 块

cardImgList

这里的效果展示使用了cardImgList。

eastonyangxu

- name: cardImgList
  img: /avatar-git.png
  link: https://github.com/eastonyangxu/
  desc: 这里的效果展示使用了cardImgList。 # 可选
  author: "eastonyangxu" # 可选
  avatar: /avatar-git.png # 可选