头像 余温Gueen
头像
余温Gueen
-- : -- : --
-- : -- : --
hugo-teek is loading...
vuepress-theme-vdoing 1692 字 7 分钟 -- 次

markdown容器

最后更新于:

Markdown 容器

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

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

1、信息框容器

输入

 1::: tip
 2这是一条提示
 3:::
 4
 5::: warning
 6这是一条注意
 7:::
 8
 9::: danger
10这是一条警告
11:::
12
13::: note
14这是笔记容器，在 <Badge text="v1.5.0 +" /> 版本才支持哦~
15:::

输出

image-20241222120303236

以上容器均可自定义标题，如：

1::: tip 我的提示
2自定义标题的提示框
3:::

image-20241222120323757

实测效果：

提示

这是一条提示

警告

这是一条注意

危险

这是一条警告

NOTE

这是笔记容器，在 `` 版本才支持哦~

我的提示

自定义标题的提示框

2、布局容器 v1.3.3 +

输入

 1::: center
 2  ### 我是居中的内容
 3  （可用于标题、图片等的居中）
 4:::
 5
 6::: right
 7  [我是右浮动的内容](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
 8:::
 9
10
11
12
13<div class="custom-block details" data-collapsed="true">
14  <p class="custom-block-title">详情</p>
15  <div class="custom-block-content">
16    <p>这是一个详情块，在 IE / Edge 中不生效</p>
17  </div>
18</div>
19
20
21
22
23::: theorem 牛顿第一定律
24假若施加于某物体的外力为零，则该物体的运动速度不变。
25::: right
26来自 [维基百科](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
27:::

输出

image-20241222120545573

测试代码：

::: center

我是居中的内容（可用于标题、图片等的居中） :::

::: right 我是右浮动的内容 :::

详情

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

::: theorem 牛顿第一定律 假若施加于某物体的外力为零，则该物体的运动速度不变。 ::: right 来自 维基百科 :::

实测效果：

image-20241229101835825

3、普通卡片列表 v1.1.0 +

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

先来看看效果：

image-20241222120645542

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

输入

 1::: cardList
 2```yaml
 3- name: 麋鹿鲁哟
 4  desc: 大道至简，知易行难
 5  avatar: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200122153807.jpg # 可选
 6  link: https://www.cnblogs.com/miluluyo/ # 可选
 7  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
 8  textColor: '#6854A1' # 可选，默认var(--textColor)
 9- name: XAOXUU
10  desc: '#IOS #Volantis主题作者'
11  avatar: https://jsd.cdn.zzko.cn/gh/xaoxuu/assets@master/avatar/avatar.png
12  link: https://xaoxuu.com
13  bgColor: '#718971'
14  textColor: '#fff'
15- name: 平凡的你我
16  desc: 理想成为大牛的小陈同学
17  avatar: https://reinness.com/avatar.png
18  link: https://reinness.com
19  bgColor: '#FCDBA0'
20  textColor: '#A05F2C'
21```
22:::

语法

 1::: cardList <每行显示数量>
 2``` yaml
 3- name: 名称
 4  desc: 描述
 5  avatar: https://xxx.jpg # 头像，可选
 6  link: https://xxx/ # 链接，可选
 7  bgColor: '#CBEAFA' # 背景色，可选，默认var(--bodyBg)。颜色值有#号时请添加引号
 8  textColor: '#6854A1' # 文本色，可选，默认var(--textColor)
 9```
10:::
  • <每行显示数量> 数字，表示每行最多显示多少个，选值范围1~4，默认3。在小屏时会根据屏幕宽度减少每行显示数量。
  • 代码块需指定语言为yaml
  • 代码块内是一个yaml格式的数组列表
  • 数组成员的属性有：
    • name名称
    • desc描述
    • avatar头像，可选
    • link链接，可选
    • bgColor背景色，可选，默认var(--bodyBg)。颜色值有#号时请添加引号
    • textColor文本色，可选，默认var(--textColor)

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

输入

 1::: cardList 2
 2```yaml
 3- name: 《静夜思》
 4  desc: 床前明月光，疑是地上霜。举头望明月，低头思故乡。
 5  bgColor: '#F0DFB1'
 6  textColor: '#242A38'
 7- name: Vdoing
 8  desc: 🚀一款简洁高效的VuePress 知识管理&博客(blog) 主题
 9  link: https://github.com/xugaoyi/vuepress-theme-vdoing
10  bgColor: '#DFEEE7'
11  textColor: '#2A3344'
12```
13:::

输出

image-20241222120740430

4、图文卡片列表 v1.1.0 +

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

先看效果：

输出

image-20241222120852365

输入

 1::: cardImgList
 2```yaml
 3- img: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200529162253.jpg
 4  link: https://xugaoyi.com/
 5  name: 标题
 6  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容 # 描述，可选
 7  author: Evan Xu # 作者，可选
 8  avatar: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103123203.jpg # 头像，可选
 9- img: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200530100256.jpg
10  link: https://xugaoyi.com/
11  name: 标题
12  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
13  author: Evan Xu
14  avatar: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103123203.jpg
15- img: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200530100257.jpg
16  link: https://xugaoyi.com/
17  name: 标题
18  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
19  author: Evan Xu
20  avatar: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103123203.jpg
21```
22:::

语法

 1::: cardImgList <每行显示数量>
 2``` yaml
 3- img: https://xxx.jpg # 图片地址
 4  link: https://xxx.com # 链接地址
 5  name: 标题
 6  desc: 描述 # 可选
 7  author: 作者名称 # 可选
 8  avatar: https://xxx.jpg # 作者头像，可选
 9```
10:::
  • <每行显示数量> 数字，表示每行最多显示多少个，选值范围1~4，默认3。在小屏时会根据屏幕宽度减少每行显示数量。
  • 代码块需指定语言为yaml
  • 代码块内是一个yaml格式的数组列表
  • 数组成员的属性有：
    • img图片地址
    • link链接地址
    • name标题
    • desc描述，可选
    • author作者名称，可选
    • avatar作者头像，可选

自己的效果：

image-20241229104041141

5、增强配置 v1.9.0 + （待自己测试）

为了适应更多需求场景，v1.9.0+版本的普通卡片和图文卡片容器添加了一些新的配置：

1. 普通卡片和图文卡片容器

target

  • 链接的打开方式，默认_blank
    • _self 当前页面
    • _blank 新窗口打开

2. 图文卡片容器

imgHeight

  • 设置图片高度，默认 auto
    • 带单位

objectFit

  • 设置图片的填充方式(object-fit)，默认 cover
    • fill 拉伸 (会改变宽高比)
    • contain 缩放 (保持宽高比，会留空)
    • cover 填充 (会裁剪)
    • none 保持原有尺寸 (会留空或裁剪)
    • scale-down 保证显示完整图片 (保持宽高比，会留空)

lineClamp

  • 描述文本超出多少行显示省略号，默认1

3. 配置示例：

 1::: cardImgList
 2``` yaml
 3config:
 4    target: _blank
 5    imgHeight: auto
 6    objectFit: cover
 7    lineClamp: 1
 8
 9data:
10  - img: https://xxx.jpg
11    link: https://xugaoyi.com/
12    name: 标题
13    desc: 描述内容
14    author: Evan Xu
15    avatar: https://xxx.jpg
16```
17:::
📡
👤 作者: 余温Gueen
🔗 链接: https://wiki.xxdevops.cn/topic/s2r59
🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自 余温Gueen Blog！
推荐使用微信支付
微信支付二维码
推荐使用支付宝
支付宝二维码
最新文章

文档导航