按钮

融入段落中按钮

不设置任何参数的按钮适合融入段落中。

空心和实心按钮

示例博客示例博客

大点的按钮和样式

开始使用

环形按钮

开始使用

warning等颜色按钮

开始使用开始使用开始使用开始使用开始使用

warning等颜色空心环形居中按钮

开始使用开始使用

带有头像和名称的按钮

一行两个

草帽海贼团

小绵羊

沫兮

凯爹

阿离

韩信

环形图标按钮

下载源码查看文档

环形图标居中按钮

下载源码查看文档

环形图标填充按钮

下载源码查看文档

圆形图标按钮

这个是微信

微信

这个是支付宝

支付宝

audio音频

事例

写法

1	{% audio http://qiniu.cunzhuang.top/%E5%85%AD%E5%93%B2%20-%20%E4%BD%A0%E7%9A%84%E5%BF%83%E6%98%AF%E5%90%A6%E4%B9%9F%E6%9C%89%E6%88%91%E7%9A%84%E5%90%8D.mp3 %}

checkbox

进度条示例

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

上述实例代码

{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% checkbox red, 支持自定义颜色 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 增加 %}
{% checkbox minus yellow checked, 减少 %}
{% checkbox times red checked, 叉 %}

folding折叠

基本

查看图片测试

上述事例代码

1
2
3

{% folding 查看图片测试 %}
  ![](https://pic4.zhimg.com/80/v2-5e0b1aaa1994f6d7cb9aac94a6f4e0b3_1440w.jpg)
{% endfolding %}

cyan青色-默认打开

查看默认打开的折叠框

这是一个默认打开的折叠框。

上述事例代码

1
2
3

{% folding cyan open, 查看默认打开的折叠框 %}
  这是一个默认打开的折叠框。
{% endfolding %}

查看代码

查看代码测试

public class DoWhile {
    public static void main(String[] args) {
        /**
         * do-while循环的语法：
         * do{
         *    statement(s);
         * } while(condition);
         */

        // 简单示例：
//        int i = 10;
//        do {
//            System.out.println(i);
//            i--;
//        }while (i>=1);

        // 使用do-while循环迭代数组
        int arr[] = {2,11,45,9};
        int i = 0;
        do {
            System.out.println(arr[i]);
            i++; // 不加这条会死循环
        }while (i<4);
    }
}

上述事例代码

1
2
3

{% folding green, 查看代码测试 %}
这里写代码高亮部分
{% endfolding %}

查看列表

查看列表测试

haha
hehe

上述事例代码

{% folding yellow, 查看列表测试 %}
  - haha
  - hehe
{% endfolding %}

查看嵌套

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

上述事例代码

{% folding red, 查看嵌套测试 %}
{% folding blue, 查看嵌套测试2 %}
{% folding 查看嵌套测试3 %}
hahaha <span><img src='https://image.dbbqb.com/202101221115/7cdd741907c2ea150d054d24c4da6594/4d0G' ></span>
{% endfolding %}
{% endfolding %}
{% endfolding %}

提示

使用该标签请先将主题下的_config.yml中的fancybox设置为true

galleryGroup图片示例

上述示例代码

<div class="gallery-group-main">
    {% galleryGroup '壁纸' '收藏的壁纸' '/images/bizhi' https://pic1.zhimg.com/80/v2-23c3820e8abfb1cef689531af2dc6d09_1440w.jpg?source=1940ef5c %}
    {% galleryGroup '古典图片' '中国古典图片' '/images/gudian' https://pic1.zhimg.com/80/v2-8d542d68cbbf0e5f503da9e3f72b8447_1440w.jpg?source=1940ef5c %}
    {% galleryGroup '风景' '风景图片' '/images/fengjing' https://pic1.zhimg.com/80/v2-56164ef0695767475935c9e019c594ae_1440w.jpg?source=1940ef5c %}
</div>

gallery图片

提示

使用该标签请先将主题下的_config.yml中的fancybox设置为true

一行一个图片

上述事例代码

1
2
3

{% gallery %}
![图片描述](https://pic4.zhimg.com/80/v2-515859a54d7c9b89c070c6132dff4527_1440w.jpg?source=1940ef5c)
{% endgallery %}

一行多个图片（不换行）

上述事例代码

{% gallery %}
![图片描述](https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c)
![图片描述](https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c)
![图片描述](https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c)
{% endgallery %}

多行多个图片（每行2~8个图片）

多行多个图片（每行2～8个图片）

上述事例代码

{% gallery stretch, 4 %}
![图片描述](https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c)
![图片描述](https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c)
![图片描述](https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c)
![图片描述](https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c)
![图片描述](https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c)
![图片描述](https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c)
{% endgallery %}

组合使用

上述事例代码

{% gallery %}
![图片描述](https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c)
![图片描述](https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c)
{% endgallery %}
{% gallery %}
![图片描述](https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c)
![图片描述](https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c)
![图片描述](https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c)
![图片描述](https://pic2.zhimg.com/80/v2-c513cb0d2eff43b5391ea682f1ba07c6_1440w.jpg?source=1940ef5c)
{% endgallery %}
{% gallery %}
![图片描述](https://pic2.zhimg.com/80/v2-bcb819edb98e081817066eb6b0e6a2ef_1440w.jpg?source=1940ef5c)
![图片描述](https://pic2.zhimg.com/80/v2-f1b467abef1caeb5537f399da4ddbc9d_1440w.jpg?source=1940ef5c)
{% endgallery %}

lineImage标签

段落中插入图片

这是一段话。
这又是一段话。
这又是一段话。

上述事例代码

1
2
3

这是 {% inlineimage http://img.doutula.com/production/uploads/image/2019/08/15/20190815849485_fKMqYD.gif %} 一段话。
这又是 {% inlineimage http://img.doutula.com/production/uploads/image/2019/08/15/20190815849485_fKMqYD.gif, height=40px %} 一段话。
这又是 {% inlineimage http://img.doutula.com/production/uploads/image/2019/08/15/20190815849485_fKMqYD.gif, height=100px %} 一段话。

自定义图片并添加描述

自定义图片

上述事例代码

1	{% image https://pic1.zhimg.com/80/v2-5fe6be356ddda4afe6063b0682edfead_1440w.jpg?source=1940ef5c, alt=自定义图片 %}

指定高度

指定宽度

上述事例代码

1	{% image https://pic3.zhimg.com/80/v2-08d7fdf0201e560c22a2e9d9c2c040f6_1440w.jpg?source=1940ef5c, width=400px, alt=指定宽度 %}

设置占位背景色

上述事例代码

1	{% image https://pic3.zhimg.com/80/v2-c18a3b0f2e82533d6c47e72e085aca0b_1440w.jpg?source=1940ef5c, width=400px, bg=#1D0C04, alt=设置占位背景色 %}

Link标签

超链接标签

点击跳转到百度

http://www.baidu.com

点击跳转到百度

http://www.baidu.com

上述事例代码

1
2

{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}
{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}

点击跳转到百度

http://www.baidu.com

点击跳转到百度

http://www.baidu.com

点击跳转到百度

http://www.baidu.com

点击跳转到百度

http://www.baidu.com

上述事例代码

{% linkgroup %}
{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}
{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}
{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}
{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}
{% endlinkgroup %}

另一种写法

点击跳转到百度

http://www.baidu.com

1	{% link 点击跳转到百度:: http://www.baidu.com:: https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}

mermaid

示例

pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5

graph TD; A-->B; A-->C; B-->D; C-->D;

上述示例代码

{% mermaid %}
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}

{% mermaid %}
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
{% endmermaid %}

NoteBlock

noteblock演示效果

标题（可选）

asdsd

标题（可选）

asdsd

标题（可选）

asdsd

标题（可选）

asdsd

标题（可选）

asdsd

标题（可选）

asdsd

上述事例代码

{% noteblock base, 标题（可选） %}
    asdsd
{% endnoteblock %}
{% noteblock quote, 标题（可选） %}
    asdsd
{% endnoteblock %}
{% noteblock warning, 标题（可选） %}
    asdsd
{% endnoteblock %}
{% noteblock success, 标题（可选） %}
    asdsd
{% endnoteblock %}
{% noteblock danger, 标题（可选） %}
    asdsd
{% endnoteblock %}
{% noteblock info, 标题（可选） %}
    asdsd
{% endnoteblock %}

Note标签

note演示效果

markdown默认写法，左边框颜色，随着主题色改变

我有一只小毛驴，我从来都不骑。

适合引用一段话

这是一个警告

这是一个错误

这是一个成功

这是一个信息

上述事例源码

> markdown默认写法，左边框颜色，随着主题色改变
{% note, 我有一只小毛驴，我从来都不骑。 %}
{% note quote, 适合引用一段话 %}
{% note warning, 这是一个警告 %}
{% note danger, 这是一个错误 %}
{% note success, 这是一个成功 %}
{% note info, 这是一个信息 %}

段落文本

段落文本演示

我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多

上述事例源码

{% p yellow, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p primary, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p info, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p warning, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p danger, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p success, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p red, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p green, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p blue, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p center, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p center large danger, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p center large info, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p center small, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}

进度条

进度条示例

进度条测试

自定义颜色(Custom colors)

进度条测试

上述示例代码

{% progress 70 danger 进度条测试 %}
{% progress 60 info 进度条测试 %}
{% progress 60 success 进度条测试 %}
{% progress 60 warning 进度条测试 %}
{% progress 60 primary 进度条测试 %}
自定义颜色(Custom colors)
{% progress 60 #000 进度条测试 %}
{% progress 60 #2f54eb 进度条测试 %}

圆形进度条示例

进度条测试

自定义颜色(Custom colors)

70%

上述示例代码

{% progressCircle 70 danger 进度条测试 %}
{% progressCircle 80 info 进度条测试 %}
{% progressCircle 60 success 进度条测试 %}
{% progressCircle 50 warning 进度条测试 %}
{% progressCircle 90 primary 进度条测试 %}
自定义颜色(Custom colors)
{% progressCircle 70 #12e9e9 70% %}
{% progressCircle 70 skyblue 70% %}

radio单选标签

radio

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

warning色

success色

danger色

info色

上述代码示例

{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}
{% radio warning, warning色 %}
{% radio success, success色 %}
{% radio danger, danger色 %}
{% radio info, info色 %}

tab

我欲乘风归去又恐琼楼玉宇

高处不胜寒，起舞弄清影，何似在人间

上述事例代码

{% tabs tab-id %}
<!-- tab 栏目1 -->
我欲乘风归去 又恐琼楼玉宇
<!-- endtab -->
<!-- tab 栏目2 -->
高处不胜寒，起舞弄清影，何似在人间
<!-- endtab -->
{% endtabs %}

文字颜色

文字颜色演示效果

这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折

我是一个居中文字高亮

这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折

上述事例源码

这是一个简单的文字{% span yellow, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span primary, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span info, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span warning, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span danger, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span success, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span red, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span green, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span blue, 我是一个文字高亮 %}，唱着我们心肠的曲折
{% span center green, 我是一个居中文字高亮 %}
这是一个简单的文字{% span large, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span small danger, 我是一个文字高亮 %}，唱着我们心肠的曲折

文本高亮

文本高亮演示效果

这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折

上述事例源码

这是一个简单的文字{% pbg yellow, 我是一个文本高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% pbg, 我是一个文本高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% pbg info, 我是一个文本高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% pbg warning, 我是一个文本高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% pbg danger, 我是一个文本高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% pbg success, 我是一个文本高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% pbg red, 我是一个文本高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% pbg green, 我是一个文本高亮 %}，唱着我们心肠的曲折 
这是一个简单的文字{% pbg blue, 我是一个文本高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% pbg cyan, 我是一个文本高亮 %}，唱着我们心肠的曲折

Text文本样式标签

Text文本样式标签演示

带下划线的文本
带着重号的文本
带波浪线的文本
带 ~~删除线~~ 的文本
键盘样式的文本 command + D
密码样式的文本：这里没有验证码

上述事例代码

{% title h2, Text文本样式标签演示 %}
带 {% u 下划线 %} 的文本
带 {% emp 着重号 %} 的文本
带 {% wavy 波浪线 %} 的文本
带 {% del 删除线 %} 的文本
键盘样式的文本 {% kbd command %} + {% kbd D %}
密码样式的文本：{% psw 这里没有验证码 %}

timeline时间线

timeline时间线演示

2021-01-01 1.0.3 -> 1.0.3

我是一个测试文字ghghgh。
我是一个测试问题二’qweqw’，请问企鹅请问请问佛挡杀fgfgf佛第三节课。
我是一个测试问题三’fgfgfg’，请问企鹅请问请问佛挡杀trtrtr佛第三节课。

2020-08-15 1.0.2 -> 1.0.2

这是一段测试文字

2020-08-08 1.0.0 -> 1.0.0

我是一个测试文字ghghgh。
我是一个测试问题二’qweqw’，请问企鹅请问请问佛挡杀fgfgf佛第三节课。
我是一个测试问题三’fgfgfg’，请问企鹅请问请问佛挡杀trtrtr佛第三节课。

上述示例代码

{% timeline %}
{% timenode 2021-01-01 [1.0.3 -> 1.0.3](https://github.com/yuang01/hexo-theme-bamboo) %}
1. 我是一个测试文字`ghghgh`。
2. 我是一个测试问题二'qweqw'，请问企鹅请问请问佛挡杀`fgfgf`佛第三节课。
2. 我是一个测试问题三'fgfgfg'，请问企鹅请问请问佛挡杀`trtrtr`佛第三节课。
{% endtimenode %}
{% timenode 2020-08-15 [1.0.2 -> 1.0.2](https://github.com/yuang01/hexo-theme-bamboo) %}
这是一段测试文字
{% endtimenode %}
{% timenode 2020-08-08 [1.0.0 -> 1.0.0](https://github.com/yuang01/hexo-theme-bamboo) %}
1. 我是一个测试文字`ghghgh`。
2. 我是一个测试问题二'qweqw'，请问企鹅请问请问佛挡杀`fgfgf`佛第三节课。
2. 我是一个测试问题三'fgfgfg'，请问企鹅请问请问佛挡杀`trtrtr`佛第三节课。
{% endtimenode %}
{% endtimeline %}

TitleTag

titleA演示

我是标题

你好啊，未来越来越好哦

我是标题

你好啊，加油哦

我是标题

上述事例代码

{% title h1, 我是标题 %}
你好啊，未来越来越好哦
{% title h2, 我是标题 %}
你好啊，加油哦
{% title h2, 我是标题, warning %}
{% title h2, 我是标题, red %}

titleB演示

我是标题bbb

上述事例代码

1
2
3

{% titleB h2, 我是标题bbb %}
{% titleB h2, 我是标题bbb, #895546 %}
{% titleB h2, 我是标题bbb, red %}

VideoNote

video演示

100%宽度

50%宽度

25%宽度

上述代码示例

{% title h2, video演示 %}
100%宽度
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}

50%宽度
{% videos, 2 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% endvideos %}

25%宽度
{% videos, 4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% video  https://assets.mixkit.co/videos/preview/mixkit-down-the-river-in-a-bamboo-canoe-6804-large.mp4 %}
{% endvideos %}

按钮

融入段落中按钮

空心和实心按钮

大点的按钮和样式

环形按钮

warning等颜色按钮

warning等颜色空心环形居中按钮

带有头像和名称的按钮

一行两个

一行三个

一行四个

一行五个

环形图标按钮

环形图标居中按钮

环形图标填充按钮

圆形图标按钮

audio音频

事例

写法

checkbox

进度条示例

上述实例代码

folding折叠

基本

上述事例代码

cyan青色-默认打开

上述事例代码

查看代码

上述事例代码

查看列表

上述事例代码

查看嵌套

上述事例代码

galleryGroup图片示例

上述示例代码

gallery图片

一行一个图片

上述事例代码

一行多个图片（不换行）

上述事例代码

多行多个图片（每行2~8个图片）

上述事例代码

组合使用

上述事例代码

lineImage标签

段落中插入图片

上述事例代码

自定义图片并添加描述

上述事例代码

指定高度

上述事例代码

设置占位背景色

上述事例代码

Link标签

超链接标签

上述事例代码

上述事例代码

mermaid

示例

上述示例代码

NoteBlock

noteblock演示效果

上述事例代码

Note标签

note演示效果

上述事例源码

段落文本

段落文本演示

上述事例源码

进度条

进度条示例

上述示例代码

圆形进度条示例

上述示例代码

radio单选标签

radio

上述代码示例

tab

tab事例

上述事例代码