先要安装插件，地址找店长的hexo-butterfly-tag-plugins-plus

Butterfly外挂标签语法参考安知鱼教程 ，或fomal大佬的教程 或777nx的教程 和CC的部落角 ,guole大佬的教程

Markdown自带语法参考黑暗星球教程

tabs分栏标签

这是一个测试，看效果

另一个测试

第三个

tabs分栏标签

tabs分栏标签-测试

这是一个测试，看效果ok

1
2
3
4
5
{% tabs %}
<!-- tab 样式预览 -->
**这是一个测试，看效果**
<!-- endtab -->
{% endtabs %}

行内文本span

行内文本span

行内文本span命令

  • 彩色文字，使用的是行内文本span

    在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。

  • 超大号文字

    文档「开始」页面中的标题部分就是超大号文字。

    居中显示的小文字

1
{% span 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: 红色、黄色、绿色、青色、蓝色、灰色
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
1
2
3
4
5
6
- 彩色文字，使用的是{% span red, 行内文本`span` %}
  在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
- 超大号文字
  文档「开始」页面中的标题部分就是超大号文字。
  {% span center logo large, 居中显示的超大文字 %}
  {% span center small, 居中显示的小文字 %}

段落文本p

段落文本p命令

段落文本p命令

  • 彩色文字，使用的是

    行内文本p

    在一段话中方便插入各种颜色的标签，包括：

    君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。 钟鼓馔玉不足贵，但愿长醉不愿醒。 古来圣贤皆寂寞，惟有饮者留其名。 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。

    、

    黄色

    、

    绿色

    、

    青色

    、

    泉眼无声惜细流，树阴照水爱晴柔。 小荷才露尖尖角，早有蜻蜓立上头。

    三皇五帝始，尧舜禹相传。 夏商与西周，东周分两段。 春秋和战国，一统秦两汉。 三分魏蜀吴，两晋前后延。 南北朝并立，隋唐五代传。 宋元明清后，皇朝至此完。

  • 超大号文字

    文档「开始」页面中的标题部分就是超大号文字。

    居中显示的小文字

1
{% p 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: 红色、黄色、绿色、青色、蓝色、灰色
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
- 彩色文字，使用的是{% p red, 行内文本`p` %}

  在一段话中方便插入各种颜色的标签，包括：

  {% p red, 

  君不见，黄河之水天上来，奔流到海不复回。

  君不见，高堂明镜悲白发，朝如青丝暮成雪。

  人生得意须尽欢，莫使金樽空对月。

  天生我材必有用，千金散尽还复来。

  烹羊宰牛且为乐，会须一饮三百杯。

  岑夫子，丹丘生，将进酒，杯莫停。

  与君歌一曲，请君为我倾耳听。

  钟鼓馔玉不足贵，但愿长醉不愿醒。

  古来圣贤皆寂寞，惟有饮者留其名。

  陈王昔时宴平乐，斗酒十千恣欢谑。

  主人何为言少钱，径须沽取对君酌。

  五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。

   %}、

  {% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、

  {% p blue,

  泉眼无声惜细流，树阴照水爱晴柔。

  小荷才露尖尖角，早有蜻蜓立上头。

  %}

  {% p gray,

  三皇五帝始，尧舜禹相传。
  夏商与西周，东周分两段。
  春秋和战国，一统秦两汉。
  三分魏蜀吴，两晋前后延。
  南北朝并立，隋唐五代传。
  宋元明清后，皇朝至此完。 

  %}

- 超大号文字

  文档「开始」页面中的标题部分就是超大号文字。
    {% span center logo large, 居中显示的超大文字 %}
    {% span center small, 居中显示的小文字 %}

行内文本样式 text

行内文本样式 text

  1. 带 下划线 的文本
  2. 带 着重号 的文本
  3. 带 波浪线 的文本
  4. 带 删除线 的文本
  5. 键盘样式的文本 Ctrl + D
  6. 密码样式的文本：这里没有验证码
1
2
3
4
5
6
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}
1
2
3
4
5
6
1. 带 {% u 下划线 %} 的文本
2. 带 {% emp 着重号 %} 的文本
3. 带 {% wavy 波浪线 %} 的文本
4. 带 {% del 删除线 %} 的文本
5. 键盘样式的文本 {% kbd Ctrl %} + {% kbd D %}
6. 密码样式的文本：{% psw 这里没有验证码 %}

note标签用法

note标签用法：

加号标签比较

primary 加号标签，simple款式

primary 加号标签，modern款式

primary 加号标签，flat款式

对号标签比较

success 对号标签，simple款式

success 对号标签，modern款式

success 对号标签

警告标签比较

warning 警告标签，simple款式

warning 警告标签，modern款式

warning 警告标签，flat款式

标签+图标

2025年快到了…. modern款式

2025年快到了…. disabled款式

2025年快到了…. flat款式

其他款式

駝駱仧

Welcome to 駝駱仧

无图标

Note without icon: note info no-icon

Welcome to 駝駱仧

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
#simple标签
{% note simple %}
默认提示标签，无图标
{% endnote %}
{% note default simple %}
default 默认标签
{% endnote %}
{% note primary simple %}
primary 加号标签
{% endnote %}
{% note success simple %}
success 对号标签
{% endnote %}
{% note info simple %}
info 信息标签
{% endnote %}
{% note warning simple %}
warning 警告标签
{% endnote %}
{% note danger simple %}
danger 危险标签
{% endnote %}

#modern标签
{% note modern %}
默认提示标签，无图标
{% endnote %}
{% note default modern %}
default 默认标签
{% endnote %}
{% note primary modern %}
primary 加号标签
{% endnote %}
{% note success modern %}
success 对号标签
{% endnote %}
{% note info modern %}
info 信息标签
{% endnote %}
{% note warning modern %}
warning 警告标签
{% endnote %}
{% note danger modern %}
danger 危险标签
{% endnote %}

#flat标签
{% note modern %}
默认提示标签，无图标
{% endnote %}
{% note default flat %}
default 默认标签
{% endnote %}
{% note primary flat %}
primary 加号标签
{% endnote %}
{% note success flat %}
success 对号标签
{% endnote %}
{% note info flat %}
info 信息标签
{% endnote %}
{% note warning flat %}
warning 警告标签
{% endnote %}
{% note danger flat %}
danger 危险标签
{% endnote %}

#modern标签+图标
{% note 'fab fa-cc-visa' modern %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' modern %}
2025年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' modern %}
小心開車 安全至上
{% endnote %}
{% note red 'fas fa-fan' modern%}
這是三片呢？還是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' modern %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}
剪刀石頭布
{% endnote %}
{% note green 'fab fa-internet-explorer' modern %}
前端最討厭的瀏覽器
{% endnote %}

#disabled标签+图标
{% note 'fab fa-cc-visa' disabled %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' disabled %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' disabled %}
小心開車 安全至上
{% endnote %}
{% note red 'fas fa-fan' disabled %}
這是三片呢？還是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' disabled %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' disabled %}
剪刀石頭布
{% endnote %}
{% note green 'fab fa-internet-explorer' disabled %}
前端最討厭的瀏覽器
{% endnote %}

#flat标签+图标
{% note 'fab fa-cc-visa' flat %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' flat %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' flat %}
小心開車 安全至上
{% endnote %}
{% note red 'fas fa-fan' flat%}
這是三片呢？還是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' flat %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}
剪刀石頭布
{% endnote %}
{% note green 'fab fa-internet-explorer' flat %}
前端最討厭的瀏覽器
{% endnote %}

{% note primary %}
#### 駝駱仧
**Welcome** to [駝駱仧](https://blog.camelz.site)
{% endnote %}

{% note info no-icon %}
#### 无图标
Note **without** icon: `note info no-icon`
**Welcome** to [駝駱仧](https://blog.camelz.site)
{% endnote %}

btn标签用法

btn标签用法：

inline

没事瞎胡搞，生活更美好！点击 駝駱仧
没事瞎胡搞，生活更美好！点击 駝駱仧

block

没事瞎胡搞，生活更美好！点击 駝駱仧
没事瞎胡搞，生活更美好！点击 駝駱仧
没事瞎胡搞，生活更美好！点击 駝駱仧

option

駝駱仧 駝駱仧 駝駱仧 駝駱仧 駝駱仧 駝駱仧 駝駱仧 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#inline
没事瞎胡搞，生活更美好！点击 {% btn 'https://blog.camelz.site',駝駱仧 %}
没事瞎胡搞，生活更美好！点击 {% btn 'https://blog.camelz.site',駝駱仧,outline%}
#block
没事瞎胡搞，生活更美好！点击  {% btn 'https://blog.camelz.site',駝駱仧,far fa-hand-point-right,block larger %}
没事瞎胡搞，生活更美好！点击  {% btn 'https://blog.camelz.site',駝駱仧,far fa-hand-point-right,block center larger %}
没事瞎胡搞，生活更美好！点击  {% btn 'https://blog.camelz.site',駝駱仧,far fa-hand-point-right,block right blue larger %}
#option
<div class="btn-center">
{% btn 'https://blog.camelz.site',駝駱仧,far fa-hand-point-right,larger %}
{% btn 'https://blog.camelz.site',駝駱仧,far fa-hand-point-right,blue larger %}
{% btn 'https://blog.camelz.site',駝駱仧,far fa-hand-point-right,pink larger %}
{% btn 'https://blog.camelz.site',駝駱仧,far fa-hand-point-right,red larger %}
{% btn 'https://blog.camelz.site',駝駱仧,far fa-hand-point-right,purple larger %}
{% btn 'https://blog.camelz.site',駝駱仧,far fa-hand-point-right,orange larger %}
{% btn 'https://blog.camelz.site',駝駱仧,far fa-hand-point-right,green larger %}
</div>

btns标签用法

btns标签用法：

1，如果需要显示类似「团队成员」之类的一组含有头像的链接：

駝駱仧 xaoxuu 駝駱仧 xaoxuu xaoxuu
2，或者含有图标的按钮：
下载源码 查看文档

3，圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

心率管家

专业版

 心率管家

免费版

 
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
1，如果需要显示类似「团队成员」之类的一组含有头像的链接：
{% btns circle grid5 %}
{% cell 駝駱仧, https://blog.camelz.site, /img/avatar-camel.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell 駝駱仧, https://blog.camelz.site, /img/linshi.jpg %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% endbtns %}
2，或者含有图标的按钮：
{% btns rounded grid5 %}
{% cell 下载源码, https://github.com/yaoxieyoulei/mytv-android/releases/tag/v1.4.2, fas fa-download %}
{% cell 查看文档, https://blog.camelz.site/posts/1cffd2c0, fas fa-book-open %}
{% endbtns %}
3，圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
{% btns circle center grid5 %}
<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
  <i class='fab fa-apple'></i>
  <b>心率管家</b>
  {% p red, 专业版 %}
  <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'>
</a>
<a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'>
  <i class='fab fa-apple'></i>
  <b>心率管家</b>
  {% p green, 免费版 %}
  <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}

上标标签tip

上标标签tip：

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tip %}default{% endtip %}
{% tip info %}info{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}
{% tip fa-atom %}自定义font awesome图标{% endtip %}

动态标签 anima

动态标签 anima：

1.On DOM load（当页面加载时显示动画）

warning

ban

2.调整动画速度

warning

ban

3.On hover（当鼠标悬停时显示动画）

warning

ban

4.On parent hover（当鼠标悬停在父级元素时显示动画）

warning

ban

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1.On DOM load（当页面加载时显示动画）

{% tip warning faa-horizontal animated %}warning{% endtip %} {% tip ban faa-flash animated %}ban{% endtip %}

2.调整动画速度

{% tip warning faa-horizontal animated faa-fast %}warning{% endtip %} {% tip ban faa-flash animated faa-slow %}ban{% endtip %}

3.On hover（当鼠标悬停时显示动画）

{% tip warning faa-horizontal animated-hover %}warning{% endtip %} {% tip ban faa-flash animated-hover %}ban{% endtip %}

4.On parent hover（当鼠标悬停在父级元素时显示动画）

{% tip warning faa-parent animated-hover %}<p class="faa-horizontal">warning</p>{% endtip %} {% tip ban faa-parent animated-hover %}<p class="faa-flash">ban</p>{% endtip %}

复选列表 checkbox

复选列表 checkbox：

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

  1. 样式：plus, minus, times

  2. 颜色：red,yellow,green,cyan,blue,gray

  3. 选中状态：checked

1
2
3
4
5
6
7
8
9
10
{% 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, 叉 %}

单选列表 radio

单选列表 radio：

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

  1. 颜色：red,yellow,green,cyan,blue,gray

  2. 选中状态：checked

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

音频audio

音频audio：

1
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

视频video

视频video：

1，100%宽度

2，50%宽度
3，25%宽度
  • 对其方向：left, center, right
  • 列数：逗号后面直接写列数，支持 1 ～ 4 列。
  • 100%宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1，100%宽度
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
2，50%宽度
{% videos, 2 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}
3，25%宽度
{% videos, 4 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}

时间轴timeline

时间轴timeline：

2023

01-02

这是测试页面

01-01

这是另一个测试页面

2022

01-02

这是测试页面

01-01

这是另一个测试页面

  • title：标题/时间线
  • color：timeline颜色:default(留空) / blue / pink / red / purple / orange / green
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
{% timeline 2023,blue %}
<!-- timeline 01-02 -->

这是测试页面
<!-- endtimeline -->

<!-- timeline 01-01 -->

这是另一个测试页面
<!-- endtimeline -->

{% endtimeline %}

{% timeline 2022,blue %}
<!-- timeline 01-02 -->

这是测试页面
<!-- endtimeline -->

<!-- timeline 01-01 -->

这是另一个测试页面
<!-- endtimeline -->

{% endtimeline %}

链接卡片link：

hexo-butterfly一图流教程

https://blog.camelz.site/posts/600fd187.html

或放本地图片

hexo-butterfly一图流教程

https://blog.camelz.site/posts/600fd187.html

1
2
3
{% link hexo-butterfly一图流教程, https://blog.camelz.site/posts/600fd187.html, https://pic-bed1.xiagao.site//2024/image-20240722221649058.png %}
或放本地图片
{% link hexo-butterfly一图流教程, https://blog.camelz.site/posts/600fd187.html, /img/avatar-camel.png %}

行内图片 inlineimage

行内图片 inlineimage：

这是 一段话。

这又是 一段话。

1
2
3
这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。

这又是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段话。

单张图片 image

单张图片 image

1，添加描述：

每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。

2，指定宽度：

3，指定宽度并添加描述：

每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。

4，设置占位背景色：

优化不同宽度浏览的观感
优化不同宽度浏览的观感
1
{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}
  1. 图片宽度高度：width=300px, height=32px
  2. 图片描述：alt=图片描述（butterfly需要在主题配置文件中开启图片描述）
  3. 占位背景色：bg=#f2f2f2
1
2
3
4
5
6
7
8
9
10
11
添加描述：
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt=每天下课回宿舍的路，没有什么故事。 %}

指定宽度：
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %}

指定宽度并添加描述：
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}

设置占位背景色：
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}

折叠框 folding

折叠框 folding

查看图片测试

查看默认打开的折叠框

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

查看代码测试

假装这里有代码块（代码块没法嵌套代码块）

查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha 

1
2
3
{% folding 参数（可选）, 标题 %}
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}
  1. 颜色：blue, cyan, green, yellow, red
  2. 状态：状态填写 open 代表默认打开。
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
{% folding 查看图片测试 %}

![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

{% endfolding %}

{% folding cyan open, 查看默认打开的折叠框 %}

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

{% endfolding %}

{% folding green, 查看代码测试 %}
假装这里有代码块（代码块没法嵌套代码块）
{% endfolding %}

{% folding yellow, 查看列表测试 %}

- haha
- hehe

{% endfolding %}

{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

hahaha <span><img src='https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

阿里图标 icon

单张图片 image

阿里图标icon

1
{% icon [icon-xxxx],[font-size] %}
  1. icon-xxxx：表示图标font-class,可以在自己的阿里矢量图标库项目的font-class引用方案内查询并复制。
  2. font-size：表示图标大小，直接填写数字即可，单位为em。图标大小默认值为1em。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% icon icon-fengche1 %}{% icon icon-fengche1,2 %}

{% icon icon-fengche1,3 %}{% icon icon-fengche1,4 %}

{% icon icon-fengche1,5 %}{% icon icon-fengche1,6 %}

{% icon icon-houzi-se,1 %}{% icon icon-houzi-se,2 %}

{% icon icon-houzi-se,3 %}{% icon icon-houzi-se,4 %}

{% icon icon-houzi-se,5 %}{% icon icon-houzi-se,6 %}

{% icon icon-media-color-_camera- %}{% icon icon-media-color-_camera-,2 %}

{% icon icon-media-color-_camera-,3 %}{% icon icon-media-color-_camera-,4 %}

{% icon icon-media-color-_camera-,5 %}{% icon icon-media-color-_camera-,6 %}

特效标签wow

特效标签wow

1，flip动画效果。

flip动画效果。

2，zoomIn动画效果，持续5s，延时5s，离底部100距离时启动，重复10次。

zoomIn动画效果，持续5s，延时5s，离底部100距离时启动，重复10次

3，slideInRight动画效果，持续5s，延时5s。

slideInRight动画效果，持续5s，延时5s。

4，heartBeat动画效果，延时5s，重复10次。此处注意不用的参数位置要留空，用逗号间隔。

heartBeat动画效果，延时5s，重复10次。

1
2
3
{% wow [animete],[duration],[delay],[offset],[iteration] %}
内容
{% endwow %}

  1. animate: 动画样式，效果详见animate.css参考文档

  2. duration: 选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。

  3. delay: 选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。

  4. offset: 选填项，开始动画的距离（相对浏览器底部）

  5. iteration: 选填项，动画重复的次数

    注意，后面四个虽然是选填项，但是当有跨位选填时，次序不能乱。详见示例。
    支持嵌套其他外挂标签。

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
1，flip动画效果。
{% wow animate__flip %}
{% note green 'fas fa-fan' modern%}
`flip`动画效果。
{% endnote %}
{% endwow %}
2，zoomIn动画效果，持续5s，延时5s，离底部100距离时启动，重复10次。
{% wow animate__zoomIn,5s,5s,100,10 %}
{% note blue 'fas fa-bullhorn' modern%}
`zoomIn`动画效果，持续`5s`，延时`5s`，离底部`100`距离时启动，重复`10`次
{% endnote %}
{% endwow %}
3，slideInRight动画效果，持续5s，延时5s。
{% wow animate__slideInRight,5s,5s %}
{% note orange 'fas fa-car' modern%}
`slideInRight`动画效果，持续`5s`，延时`5s`。
{% endnote %}
{% endwow %}
4，heartBeat动画效果，延时5s，重复10次。此处注意不用的参数位置要留空，用逗号间隔。
{% wow animate__heartBeat,,5s,,10 %}
{% note red 'fas fa-battery-half' modern%}
`heartBeat`动画效果，延时`5s`，重复`10`次。
{% endnote %}
{% endwow %}

tag-hide

tag-hide

你是人还是狗？格老子的</span>

哪個英文字母最酷？ 因為西裝褲(C裝酷)</span>

門裏站着一個人? 閃</span>

1
{% hideInline content,display,bg,color %}

content: 文本內容

display: 按鈕顯示的文字(可選)

bg: 按鈕的背景顏色(可選)

color: 按鈕文字的顏色(可選)

1
2
3
4
5
你是人还是狗？{% hideInline 格老子的,你猜,pink,blue %}

哪個英文字母最酷？ {% hideInline 因為西裝褲(C裝酷),查看答案,#FF7242,#fff %}

門裏站着一個人? {% hideInline 閃 %}

进度条 progress

进度条 progress

阿拉伯数字

1
{% progress [width] [color] [text] %}

width: 0 到 100 的阿拉伯数字
color: 颜色，取值有 red,yellow,green,cyan,blue,gray
text: 进度条上的文字内容

1
{% progress 10 blue 阿拉伯数字 %}

诗词标签 poem

诗词标签 poem

月夜听卢子顺弹琴
唐·李白

闲坐夜明月，幽人弹素琴。

忽闻悲风调，宛若寒松吟。

白雪乱纤手，绿水清虚心。

钟期久已没，世上无知音。

1
2
3
{% poem [title],[author] %}
诗词内容
{% endpoem %}

title: 0 到 100 的阿拉伯数字
author: 作者，例如唐·李白
诗词内容: 填写诗词内容

1
2
3
4
5
6
7
8
9
10
11
{% poem 月夜听卢子顺弹琴,唐·李白 %}

闲坐夜明月，幽人弹素琴。

忽闻悲风调，宛若寒松吟。

白雪乱纤手，绿水清虚心。

钟期久已没，世上无知音。

{% endpoem %}