Butterfly外挂标签，写博客文章教程。

说明：本文参考了 Fomalaut 的文章，并在此基础上进行了补充与改进！！！并按照使用频率进行排序。

1.分栏 tab

{% tabs 代码块 %}
<!-- tab 代码 -->

<!-- endtab -->

<!-- tab 效果 -->

<!-- endtab -->
{% endtabs %}

对大部分人来说，这已经够用了，升级操作可以去看 https://www.fomal.cc/posts/2013454d.html#2-21-%E5%88%86%E6%A0%8F-tab 的文章。

2.折叠框 folding

1
2
3

{% folding green, 查看代码测试 %}
假装这里有代码块
{% endfolding %}

①可以将green改为：“blue, cyan, green, yellow, red”等，以改变折叠框颜色；
②可以不写颜色用默认色（灰白色）。
③green改成green open可以让折叠框默认打开。

查看代码测试

假装这里有代码块

3.注释 notation

1	{% nota 把鼠标移动到我上面试试 ,可以看到注解内容出现在顶栏 %}

把鼠标移动到我上面试试

4.引用文献 reference

1
2

Akilarの糖果屋(akilar.top)是一个私人性质的博客{% referto '[1]','Akilarの糖果屋群聊简介' %}
{% referfrom '[1]','Akilarの糖果屋群聊简介','https://jq.qq.com/?_wv=1027&k=pGLB2C0N' %}

Akilarの糖果屋(akilar.top)是一个私人性质的博客^[1]Akilarの糖果屋群聊简介参考资料

[1]

Akilarの糖果屋群聊简介

5.隐藏块

1
2
3

{% hideBlock 点我预览, blue %}
这里有字
{% endhideBlock %}

这里有字

6.音频 audio

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

7.视频 video

一行1个

1	{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}

一行4个

{% 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 %}
{% endvideos %}

在videos后加数字就能控制一行视频的个数。

一行1个

一行4个

9.时间轴 timeline

{% timeline 建站历程,blue %}
<!-- timeline 2025-05-08 -->
今天是5月8日，…………
<!-- endtimeline -->

<!-- timeline 2025-05-04 -->
今天是5月4号，…………
<!-- endtimeline -->

<!-- timeline 2025-05-02 -->
今天是5月2日，…………
<!-- endtimeline -->
{% endtimeline %}

建站历程

2025-05-08

今天是5月8日，…………

2025-05-04

今天是5月4号，…………

2025-05-02

今天是5月2日，…………

10.诗词标签 poem

11.阿里图标 icon

12.进度条 progress

{% progress 10 red 进度条样式预览 %}
{% progress 30 yellow 进度条样式预览 %}
{% progress 50 green 进度条样式预览 %}
{% progress 70 cyan 进度条样式预览 %}
{% progress 90 blue 进度条样式预览 %}
{% progress 100 gray 进度条样式预览 %}

进度条样式预览

8.图片

行内图片 inlineimage

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

这又是一段话。

单张图片 image

无任何样式约束

1	{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg %}

有样式约束

1	{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}

无任何样式约束

有样式约束

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

相册 gallery

gallerygroup 相册图库

<div class="gallery-group-main">
{% galleryGroup MC 在Rikkaの六花服务器里留下的足迹 '/gallery/MC/' https://cdn.cbd.int/akilar-candyassets@1.0.36/image/1.jpg %}
{% galleryGroup Gundam 哦咧哇gundam哒！ '/gallery/Gundam/' https://cdn.cbd.int/akilar-candyassets@1.0.36/image/20200907110508327.png %}
{% galleryGroup I-am-Akilar 某种意义上也算自拍吧 '/gallery/I-am-Akilar/' https://cdn.cbd.int/akilar-candyassets@1.0.36/image/20200907113116651.png %}
</div>

gallery 相册

{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
{% endgallery %}

gallerygroup 相册图库

Group Image Gallery — MC

在Rikkaの六花服务器里留下的足迹

gallery 相册

文本

行内文本样式 text

行内文本 span

段落文本 p

气泡注释 bubble（文本高亮）

列表

单选列表 radio

复选列表 checkbox

链接

卡片链接 link

1	{% link 糖果屋教程贴, https://akilar.top/posts/615e2dec/, https://cdn.cbd.int/akilar-candyassets@1.0.36/image/siteicon/favicon.ico %}

连接名 + 链接地址 + 头像

糖果屋教程贴

https://akilar.top/posts/615e2dec/

网站卡片 sites

按钮链接 btns

样式一

1
2
3

{% btns circle grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% endbtns %}

按钮名 + 链接地址 + 头像

样式二

1
2
3

{% btns rounded grid5 %}
{% cell 下载源码, https://xaoxuu.com, fas fa-download %}
{% endbtns %}

按钮名 + 链接地址 + 图标名

样式一

xaoxuu

样式二

下载源码

Butterfly外挂标签【连载】