Butterfly主题常见的标签外挂

引用自官方文档，自己总结速查或者其他使用

Gallery 相册图库

相册组

<div class="gallery-group-main">
{% galleryGroup 'somePic'  '这是 somePic 相册,什么都存'  '/gallery/SomePic'  '/gallery/images/cover.png' %}
{% galleryGroup 'draw'  '这是 draw 相册,主要存我的画'  '/gallery/draw'  '/gallery/images/1.jpg' %}
{% galleryGroup 'cover'  '这是 cover 相册,主要存文章封面'  '/gallery/cover'  '/gallery/images/start.jpg' %}
</div>

至少我是这么写的

<div class="gallery-group-main">
  {% galleryGroup 名称 描述 链接 封面图URL %}
  {% galleryGroup 名称 描述 链接 封面图URL %}
</div>

本地相册

{% gallery [button] %}
  ![图片1](url1)
  ![图片2](url2)
{% endgallery %}

参数：button 可选，设为 true 显示加载更多按钮。

远程相册

1 2	{% gallery url,远程JSON链接,[button] %} {% endgallery %}

示例：{% gallery pics,https://api.com/photos.json,true %}

Mermaid

使用 mermaid 标签可以绘制 Flowchart（流程图）、Sequence diagram（时序图）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和 Pie Chart（圆形图），具体可以查看mermaid 文档

1
2
3

{% mermaid %}
内容
{% endmermaid %}

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

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

Tag-hide 隐藏内容标签

功能：隐藏部分内容，通过按钮点击显示。场景：用于答案揭晓、长内容折叠等。

行内隐藏（inline）

1	{% hideInline 内容,显示文本,背景色,文字色 %}

示例：答案是C

块级隐藏（block）

1
2
3

{% hideBlock 显示文本,背景色,文字色 %}
  隐藏的内容（支持图片、代码块等）
{% endhideBlock %}

示例：

这是隐藏的详细内容…

折叠框

1
2
3

{% hideToggle 显示文本,背景色,文字色 %}
  折叠的内容
{% endhideToggle %}

显示文本

折叠的内容

Tabs 标签页

创建多标签页切换内容。

{% tabs 唯一名称, [索引] %}
  <!-- tab 标签标题 @图标 -->
  标签内容
  <!-- endtab -->
{% endtabs %}

参数

{% tabs os-guide, 2 %}
  <!-- tab Windows @fas fa-windows -->
  Windows 安装步骤...
  <!-- endtab -->
  <!-- tab Mac @fab fa-apple -->
  Mac 安装步骤...
  <!-- endtab -->
{% endtabs %}

Windows 安装步骤…

Mac 安装步骤…

Button 按钮

功能：创建可定制的按钮，支持链接和图标。

1	{% btn 链接,文本,图标,颜色,样式,布局,位置,大小 %}

1	{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

<div class="btn-center">
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline green larger %}
</div>

Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly

Label 高亮标签

功能：高亮文本，类似标签效果。

1	{% label 文本,颜色 %}

文本,颜色

示例：重要更新,red
效果：文本显示为带背景色的标签样式。

Timeline 时间线

功能：创建时间线布局，展示事件序列。

{% timeline 标题,颜色 %}
  <!-- timeline 子标题 -->
  事件内容
  <!-- endtimeline -->
{% endtimeline %}

示例;

{% timeline 项目历程,blue %}
  <!-- timeline 2022.01 -->
  项目启动...
  <!-- endtimeline -->
  <!-- timeline 2022.06 -->
  第一版发布...
  <!-- endtimeline -->
{% endtimeline %}

项目历程

2022.01

项目启动…

2022.06

第一版发布…

Note 标签（提示块）

功能：创建带样式的提示信息块，类似 Bootstrap 的 Callout。

1	{% note [class] [no-icon] [style] %}内容{% endnote %}

内容

参数
- class：可选，定义提示块颜色（default/primary/success/info/warning/danger）。
- no-icon：可选，隐藏图标。
- style：可选，定义样式（simple/modern/flat/disabled）。

高级用法

1	{% note [color] [icon] [style] %}内容{% endnote %}

内容

示例：

1 2	{% note warning simple %}警告：此操作不可撤销{% endnote %} {% note blue 'fas fa-lightbulb' modern %}建议：定期备份数据{% endnote %}

警告：此操作不可撤销

建议：定期备份数据

效果**：显示带图标和颜色的提示块，样式根据参数变化。

ABCjs显示乐谱

{% score %}
X:1
T:alternate heads
M:C
L:1/8
U:n=!style=normal!
K:C treble style=rhythm
"Am" BBBB B2 B>B | "Dm" B2 B/B/B "C" B4 |"Am" B2 nGnB B2 nGnA | "Dm" nDB/B/ nDB/B/ "C" nCB/B/ nCB/B/ |B8| B0 B0 B0 B0 |]
%%text This translates to:
[M:C][K:style=normal]
[A,EAce][A,EAce][A,EAce][A,EAce] [A,EAce]2 [A,EAce]>[A,EAce] |[DAdf]2 [DAdf]/[DAdf]/[DAdf] [CEGce]4 |[A,EAce]2 GA [A,EAce] GA |D[DAdf]/[DAdf]/ D[DAdf]/[DAdf]/ C [CEGce]/[CEGce]/ C[CEGce]/[CEGce]/ |[CEGce]8 | [CEGce]2 [CEGce]2 [CEGce]2 [CEGce]2 |]
GAB2 !style=harmonic![gb]4|GAB2 [K: style=harmonic]gbgb|
[K: style=x]
C/A,/ C/C/E C/zz2|
w:Rock-y did-nt like that
{% endscore %}