vuepress-theme-vpx

# Markdown 容器

Markdown 容器是对 Markdown 语法的一个扩展，使用简单的语法就可以在页面中呈现丰富的效果。

除了原默认主题自带的容器外，本主题还新增了一些好用的自定义容器。

# 提示框容器

输入

::: info
这是一条信息
:::

::: tip
这是一条提示
:::

::: warning
这是一条注意
:::

::: danger
这是一条警告
:::

输出

信息

这是一条信息

提示

这是一条提示

注意

这是一条注意

警告

这是一条警告

# 布局容器

输入

::: 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)
:::

输出

# 我是居中的内容

(可用于标题、图片等的居中)

我是右浮动的内容 (opens new window)

点击查看

这是一个详情块，在 IE / Edge 中不生效

console.log('这是一个详情块')

牛顿第一定律

假若施加于某物体的外力为零，则该物体的运动速度不变。

来自维基百科 (opens new window)

# 普通卡片列表

普通卡片列表容器，可用于 友情链接、项目推荐、诗词展示 等。

先来看看效果：

输出

介绍

介绍

- name: 介绍
  link: ./
  desc: VPX介绍
  nameColor: ''
  bgColor: ''
- name: 介绍
  link: ./
  nameColor: ''
  bgColor: ''

青春永不落幕 (opens new window)

一位静态网站设计爱好者

青春永不落幕 (opens new window)

一位静态网站设计爱好者

青春永不落幕 (opens new window)

一位静态网站设计爱好者

- name: 青春永不落幕
  desc: 一位静态网站设计爱好者
  avatar: https://s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f?s=80
  link: https://qcyblm.github.io/
  nameColor: ''
  bgColor: ''
  textColor: ''
  icon: 'fab fa-github'
- name: 青春永不落幕
  desc: 一位静态网站设计爱好者
  avatar: https://s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f?s=80
  link: https://qcyblm.github.io/
  nameColor: ''
  bgColor: ''
  textColor: ''
  icon: 'fab fa-github'
- name: 青春永不落幕
  desc: 一位静态网站设计爱好者
  avatar: https://s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f?s=80
  link: https://qcyblm.github.io/
  nameColor: ''
  bgColor: ''
  textColor: ''
  icon: 'fab fa-github'

青春永不落幕 (opens new window)

一位静态网站设计爱好者

青春永不落幕 (opens new window)

一位静态网站设计爱好者

青春永不落幕 (opens new window)

一位静态网站设计爱好者

- name: 青春永不落幕
  desc: 一位静态网站设计爱好者
  avatar: https://s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f?s=80
  link: https://qcyblm.github.io/
  nameColor: ''
  bgColor: ''
  textColor: ''
  icon: 'fab fa-github'
- name: 青春永不落幕
  desc: 一位静态网站设计爱好者
  avatar: https://s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f?s=80
  link: https://qcyblm.github.io/
  nameColor: ''
  bgColor: ''
  textColor: ''
  icon: 'fab fa-github'
- name: 青春永不落幕
  desc: 一位静态网站设计爱好者
  avatar: https://s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f?s=80
  link: https://qcyblm.github.io/
  nameColor: ''
  bgColor: ''
  textColor: ''
  icon: 'fab fa-github'

上面效果在 Markdown 中的代码是这样的：

输入


::: cardLink
```yaml
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 介绍
  <span class="token key atrule">link</span><span class="token punctuation">:</span> ./
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> VPX介绍
  <span class="token key atrule">nameColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 介绍
  <span class="token key atrule">link</span><span class="token punctuation">:</span> ./
  <span class="token key atrule">nameColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
```
:::

::: cardLinks
```yaml
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 青春永不落幕
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一位静态网站设计爱好者
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f<span class="token punctuation">?</span>s=80
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//qcyblm.github.io/
  <span class="token key atrule">nameColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">icon</span><span class="token punctuation">:</span> <span class="token string">'fab fa-github'</span>
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 青春永不落幕
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一位静态网站设计爱好者
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f<span class="token punctuation">?</span>s=80
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//qcyblm.github.io/
  <span class="token key atrule">nameColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">icon</span><span class="token punctuation">:</span> <span class="token string">'fab fa-github'</span>
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 青春永不落幕
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一位静态网站设计爱好者
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f<span class="token punctuation">?</span>s=80
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//qcyblm.github.io/
  <span class="token key atrule">nameColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">icon</span><span class="token punctuation">:</span> <span class="token string">'fab fa-github'</span>
```
:::

::: cardList
```yaml
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 青春永不落幕
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一位静态网站设计爱好者
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f<span class="token punctuation">?</span>s=80
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//qcyblm.github.io/
  <span class="token key atrule">nameColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">icon</span><span class="token punctuation">:</span> <span class="token string">'fab fa-github'</span>
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 青春永不落幕
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一位静态网站设计爱好者
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f<span class="token punctuation">?</span>s=80
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//qcyblm.github.io/
  <span class="token key atrule">nameColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">icon</span><span class="token punctuation">:</span> <span class="token string">'fab fa-github'</span>
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 青春永不落幕
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一位静态网站设计爱好者
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f<span class="token punctuation">?</span>s=80
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//qcyblm.github.io/
  <span class="token key atrule">nameColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">''</span>
  <span class="token key atrule">icon</span><span class="token punctuation">:</span> <span class="token string">'fab fa-github'</span>
```
:::

# 语法


::: cardLink
```yaml
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 名称
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 描述 <span class="token comment"># 提示语，默认link (可选)</span>
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xxx/ <span class="token comment">#链接 (可选)</span>
  <span class="token key atrule">nameColor</span><span class="token punctuation">:</span> <span class="token string">''</span> <span class="token comment"># 名称颜色 (可选)，默认 $cardTitle。颜色值有 `#` 号时请添加单引号</span>
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">''</span> <span class="token comment"># 背景色 (可选)，默认 $cardBgColor。颜色值有 `#` 号时请添加单引号</span>
```
:::

::: cardLinks <每行显示数量> <!-- or cardList <每行显示数量> -->
``` yaml
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 名称
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 描述
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xxx.jpg <span class="token comment"># 头像 (可选)</span>
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xxx/ <span class="token comment"># 链接 (可选)</span>
  <span class="token key atrule">nameColor</span><span class="token punctuation">:</span> <span class="token string">''</span> <span class="token comment"># 名称颜色 (可选)，默认 $cardTitle。颜色值有 `#` 号时请添加单引号</span>
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">''</span> <span class="token comment"># 背景色 (可选)，默认 $cardBgColor。颜色值有 `#` 号时请添加单引号</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">''</span> <span class="token comment"># 文本色 (可选)，默认 $cardTextColor 颜色值有 `#` 号时请添加单引号</span>
  <span class="token key atrule">icon</span><span class="token punctuation">:</span> <span class="token string">''</span> <span class="token comment"># icon 右侧图标 (可选)</span>
```
:::
  • <每行显示数量> 数字，表示每行最多显示多少个，选值范围 1~4，默认 3。在小屏时会根据屏幕宽度减少每行显示数量。
  • 代码块需指定语言为 yaml
  • 代码块内是一个 yaml 格式的数组列表
  • 数组成员的属性有：
    • name 名称
    • desc 描述
    • avatar 头像 (可选)
    • link 链接 (可选)
    • nameColor 名称颜色 (可选)，默认 $cardTitle。颜色值有 # 号时请添加单引号
    • bgColor 背景色 (可选)，默认 $cardBgColor。颜色值有 # 号时请添加单引号
    • textColor 文本色 (可选)，默认 $cardTextColor 颜色值有 # 号时请添加单引号
    • icon icon 右侧图标 (可选)

下面再来看另外一个示例：

输入


::: cardList 2
```yaml
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> vuepress<span class="token punctuation">-</span>theme<span class="token punctuation">-</span>vpx
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一款基于 VuePress 开发的主题
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//qcyblm.github.io/vuepress<span class="token punctuation">-</span>theme<span class="token punctuation">-</span>vpx/
  <span class="token key atrule">nameColor</span><span class="token punctuation">:</span> <span class="token string">'#000'</span>
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">'#CBEAFA'</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">'#242A38'</span>
  <span class="token key atrule">icon</span><span class="token punctuation">:</span> <span class="token string">'fab fa-github'</span>
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> vuepress<span class="token punctuation">-</span>theme<span class="token punctuation">-</span>vpx
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 一款基于 VuePress 开发的主题
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//qcyblm.github.io/vuepress<span class="token punctuation">-</span>theme<span class="token punctuation">-</span>vpx/
  <span class="token key atrule">nameColor</span><span class="token punctuation">:</span> <span class="token string">'#000'</span>
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">'#CBEAFA'</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">'#242A38'</span>
  <span class="token key atrule">icon</span><span class="token punctuation">:</span> <span class="token string">'fab fa-github'</span>
```
:::

输出

vuepress-theme-vpx (opens new window)

一款基于 VuePress 开发的主题

vuepress-theme-vpx (opens new window)

一款基于 VuePress 开发的主题

- name: vuepress-theme-vpx
  desc: 一款基于 VuePress 开发的主题
  link: https://qcyblm.github.io/vuepress-theme-vpx/
  nameColor: '#000'
  bgColor: '#CBEAFA'
  textColor: '#242A38'
  icon: 'fab fa-github'
- name: vuepress-theme-vpx
  desc: 一款基于 VuePress 开发的主题
  link: https://qcyblm.github.io/vuepress-theme-vpx/
  nameColor: '#000'
  bgColor: '#CBEAFA'
  textColor: '#242A38'
  icon: 'fab fa-github'

# 图文卡片列表

图文卡片列表容器，可用于 项目展示、产品展示 等。

先看效果：

输出

标题 (opens new window)

描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容

qcyblm (opens new window)

标题 (opens new window)

描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容

qcyblm (opens new window)

标题 (opens new window)

描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容

qcyblm (opens new window)
- img: '/vuepress-theme-vpx/assets/img/output.jpg'
  link: '#'
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容 # 描述 (可选)
  author: qcyblm # 作者 (可选)
  authorLink: 'https://github.com/qcyblm'
  avatar: https://s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f?s=80 # 头像 (可选)
  nameColor: '#768BFE'
  bgColor: '#E5E5E5'
  textColor: 'red'
  authorbgColor: '#ccc'
  authorColor: '#0058cf'
- img: '/vuepress-theme-vpx/assets/img/output.jpg'
  link: '#'
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: qcyblm
  avatar: https://s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f?s=80
- img: '/vuepress-theme-vpx/assets/img/output.jpg'
  link: '#'
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: qcyblm
  avatar: https://s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f?s=80

输入

::: cardImgList
```yaml
<span class="token punctuation">-</span> <span class="token key atrule">img</span><span class="token punctuation">:</span> <span class="token string">'/vuepress-theme-vpx/assets/img/output.jpg'</span>
  <span class="token key atrule">link</span><span class="token punctuation">:</span> <span class="token string">'#'</span>
  <span class="token key atrule">name</span><span class="token punctuation">:</span> 标题
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容 <span class="token comment"># 描述 (可选)</span>
  <span class="token key atrule">author</span><span class="token punctuation">:</span> qcyblm <span class="token comment"># 作者 (可选)</span>
  <span class="token key atrule">authorLink</span><span class="token punctuation">:</span> <span class="token string">'https://github.com/qcyblm'</span>
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f<span class="token punctuation">?</span>s=80 <span class="token comment"># 头像 (可选)</span>
  <span class="token key atrule">nameColor</span><span class="token punctuation">:</span> <span class="token string">'#768BFE'</span>
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">'#E5E5E5'</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">'red'</span>
  <span class="token key atrule">authorbgColor</span><span class="token punctuation">:</span> <span class="token string">'#ccc'</span>
  <span class="token key atrule">authorColor</span><span class="token punctuation">:</span> <span class="token string">'#0058cf'</span>
<span class="token punctuation">-</span> <span class="token key atrule">img</span><span class="token punctuation">:</span> <span class="token string">'/vuepress-theme-vpx/assets/img/output.jpg'</span>
  <span class="token key atrule">link</span><span class="token punctuation">:</span> <span class="token string">'#'</span>
  <span class="token key atrule">name</span><span class="token punctuation">:</span> 标题
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  <span class="token key atrule">author</span><span class="token punctuation">:</span> qcyblm
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f<span class="token punctuation">?</span>s=80
<span class="token punctuation">-</span> <span class="token key atrule">img</span><span class="token punctuation">:</span> <span class="token string">'/vuepress-theme-vpx/assets/img/output.jpg'</span>
  <span class="token key atrule">link</span><span class="token punctuation">:</span> <span class="token string">'#'</span>
  <span class="token key atrule">name</span><span class="token punctuation">:</span> 标题
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  <span class="token key atrule">author</span><span class="token punctuation">:</span> qcyblm
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//s.gravatar.com/avatar/391164c0f6fa34cedeb20590ae49dd9f<span class="token punctuation">?</span>s=80
```
:::

# 语法

::: cardImgList <每行显示数量>
``` yaml
<span class="token punctuation">-</span> <span class="token key atrule">img</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xxx.jpg <span class="token comment"># 图片地址</span>
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xxx.com <span class="token comment"># 链接地址</span>
  <span class="token key atrule">name</span><span class="token punctuation">:</span> 标题 <span class="token comment"># (可选)</span>
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 描述 <span class="token comment"># (可选)</span>
  <span class="token key atrule">author</span><span class="token punctuation">:</span> 作者名称 <span class="token comment"># (可选)</span>
  <span class="token key atrule">authorLink</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xxx.com <span class="token comment"># 作者链接地址 (可选)，默认链接地址。</span>
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xxx.jpg <span class="token comment"># 作者头像 (可选)</span>
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">''</span> <span class="token comment"># 标题描述背景色 (可选)，默认 $cardBgColor。颜色值有 `#` 号时请添加单引号</span>
  <span class="token key atrule">nameColor</span><span class="token punctuation">:</span> <span class="token string">''</span> <span class="token comment"># 标题色 (可选)，默认 $cardTitle。颜色值有 `#` 号时请添加单引号</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">''</span> <span class="token comment"># 描述色 (可选)，默认 $cardTextColor。颜色值有 `#` 号时请添加单引号</span>
  <span class="token key atrule">authorbgColor</span><span class="token punctuation">:</span> <span class="token string">''</span> <span class="token comment"># 作者背景色 (可选)，默认 $cardImgFooterBgColor。颜色值有 `#` 号时请添加单引号</span>
  <span class="token key atrule">authorColor</span><span class="token punctuation">:</span> <span class="token string">''</span> <span class="token comment"># 作者名称的字体颜色 (可选)，默认 $cardImgFooterAuthor。颜色值有 `#` 号时请添加单引号</span>
```
:::
  • <每行显示数量> 数字，表示每行最多显示多少个，选值范围 1~4，默认 3。在小屏时会根据屏幕宽度减少每行显示数量。
  • 代码块需指定语言为 yaml
  • 代码块内是一个 yaml 格式的数组列表
  • 数组成员的属性有：
    • img 图片地址
    • link 链接地址
    • name 标题 (可选)
    • desc 描述 (可选)
    • author 作者名称 (可选)
    • authorLink 作者链接地址 (可选)，默认链接地址。
    • avatar 作者头像 (可选)
    • bgColor 标题描述背景色 (可选)，默认 $cardBgColor。颜色值有 # 号时请添加单引号
    • nameColor 标题色 (可选)，默认 $cardTitle。颜色值有 # 号时请添加单引号
    • textColor 描述色 (可选)，默认 $cardTextColor。颜色值有 # 号时请添加单引号
    • authorbgColor 作者背景色 (可选)，默认 $cardImgFooterBgColor。颜色值有 # 号时请添加单引号
    • authorColor 作者名称的字体颜色 (可选)，默认 $cardImgFooterAuthor。颜色值有 # 号时请添加单引号

文章出处：文档部分内容摘自 vdoing (opens new window)

编辑当前页 (opens new window)

← 广告位 →