Butterfly 标签插件详解

标签插件是 Hexo 独有的功能，不是标准的 Markdown 格式。以下内容仅适用于 Butterfly 主题。

提示框（Note）

配置

1
2
3
4
5
note:
  style: simple  # simple/modern/flat/disabled
  icons: false
  border_radius: 3
  light_bg_offset: 0

用法一：基础用法

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

参数说明：

  • class：标识，不同标识有不同配色（default/primary/success/info/warning/danger）
  • no-icon：不显示图标
  • style：样式（simple/modern/flat/disabled）

用法二：自定义图标

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

参数说明：

  • color：颜色（default/blue/pink/red/purple/orange/green）
  • icon：FontAwesome 图标
  • style：样式

图库（Gallery）

图库分组

1
2
3
4
<div class="gallery-group-main">
{% galleryGroup 名称 描述 链接 图片URL %}
{% galleryGroup 名称 描述 链接 图片URL %}
</div>

图库展示

本地图片

1
2
3
4
{% gallery %}
![](图片URL)
![](图片URL)
{% endgallery %}

远程加载

1
2
{% gallery url,https://example.com/images.json %}
{% endgallery %}

JSON 格式示例：

1
2
3
4
5
6
7
[
  {
    "url": "https://example.com/image.jpg",
    "alt": "描述",
    "title": "标题"
  }
]

隐藏内容（Tag-hide）

行内隐藏

1
{% hideInline 内容,按钮文字,背景色,文字色 %}

块级隐藏

1
2
3
{% hideBlock 按钮文字,背景色,文字色 %}
内容
{% endhideBlock %}

折叠框

1
2
3
{% hideToggle 标题,背景色,文字色 %}
内容
{% endhideToggle %}

Mermaid 图表

1
2
3
{% mermaid '[配置JSON]' %}
图表代码
{% endmermaid %}

支持流程图、时序图、类图、状态图、甘特图、饼图等。

标签页（Tabs）

1
2
3
4
5
6
7
{% tabs 唯一名称,[索引] %}

<!-- tab 标签名 [@图标] -->
内容
<!-- endtab -->

{% endtabs %}

参数说明：

  • 唯一名称：tabs 块的唯一标识
  • 索引：默认选中的标签（1 开始，-1 表示不选中）
  • 标签名：标签页标题
  • 图标：FontAwesome 图标

按钮（Button）

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

参数说明：

  • 链接：必须
  • 文字：必须
  • 图标：可选
  • 颜色：default/blue/pink/red/purple/orange/green
  • 样式：outline（空心）或留空（实心）
  • 布局：block（块级）或留空（行内）
  • 位置：center/right（仅 block 模式）
  • 大小：larger

内联图片（InlineImg）

1
{% inlineImg 图片URL [高度限制] %}

在文本中显示内联图片。

标签（Label）

1
{% label 文字 [颜色] %}

高亮显示文字，颜色可选：default/blue/pink/red/purple/orange/green

时间线（Timeline）

1
2
3
4
5
6
7
{% timeline 标题,[颜色] %}

<!-- timeline 时间点 -->
内容
<!-- endtimeline -->

{% endtimeline %}

颜色可选：default/blue/pink/red/purple/orange/green

友情链接（Flink）

1
2
3
4
5
6
7
8
9
{% flink %}
- class_name: 分类名
  class_desc: 分类描述
  link_list:
    - name: 链接名
      link: 链接地址
      avatar: 头像URL
      descr: 描述
{% endflink %}

音乐乐谱（Score）

需要启用 ABCJS 配置：

1
2
3
abcjs:
  enable: true
  per_page: true

使用方法：

1
2
3
{% score %}
乐谱代码
{% endscore %}

系列文章（Series）

1
2
3
{% series %}
或
{% series 系列名称 %}

在文章 front-matter 中添加 series: 标识 来标记系列文章。

图表（Chartjs）

1
2
3
4
5
{% chartjs [宽度] [并排] [图表ID] %}
<!-- chart -->
JSON 配置
<!-- endchart -->
{% endchartjs %}

支持各种 Chart.js 图表类型。

总结

Butterfly 主题提供了丰富的标签插件，可以大大增强文章的表现力。合理使用这些插件可以创建更加生动和交互性强的内容。