Butterfly 标签扩展

标签扩展 (Tag Plugins)是 Hexo 特有的功能，不是标准的 Markdown 格式，因此不能够在 Typora中正常显示，但是通过 Hexo 渲染之后可以正常显示。通过标签扩展可以实现一些增强功能，如：字段强调、按钮隐藏、选择按钮等动能。

虽然在 Hexo常用指令中介绍了一些 Hexo 标签扩展，但是 Butterfly 主题中也内带了一些移植于 Next 主题的标签扩展。因此这篇文章就是来介绍 Butterfly 主题常用的的额外标签扩展。完整标签扩展可以拜访 Butterfly 官方文档

虽然这些标签可以带来强大的功能，但也拥有许多限制，同时这些标签扩展在其他主题使用可能不会生效。

Note 标签

该设置在主题配置文件中

1
2
3
4
5
6
7
8
9
10
11
12
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: false
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

Note 标签有两种用法

icons 和 light_bg_offset 只对第一种用法有效

用法：

1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
参数名称 描述
class 可选参数，不同的类别有不同的颜色
( default / primary / success / info / warning / danger)
no-icon 可选参数，不显示 icon
style 可选参数，可以覆盖设置中的默认 style
( simple / modern / flat / disabled )

示例：

style - simple

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

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

style - modern

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

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

style - flat

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
{% note flat %}
默认 提示块标签
{% 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 %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

style - disabled

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
{% note disabled %}
默认 提示块标签
{% endnote %}

{% note default disabled %}
default 提示块标签
{% endnote %}

{% note primary disabled %}
primary 提示块标签
{% endnote %}

{% note success disabled %}
success 提示块标签
{% endnote %}

{% note info disabled %}
info 提示块标签
{% endnote %}

{% note warning disabled %}
warning 提示块标签
{% endnote %}

{% note danger disabled %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

no-icon 设置

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
{% note no-icon %}
默认 提示块标签
{% endnote %}

{% note default no-icon %}
default 提示块标签
{% endnote %}

{% note primary no-icon %}
primary 提示块标签
{% endnote %}

{% note success no-icon %}
success 提示块标签
{% endnote %}

{% note info no-icon %}
info 提示块标签
{% endnote %}

{% note warning no-icon %}
warning 提示块标签
{% endnote %}

{% note danger no-icon %}
danger 提示块标签
{% endnote %}

用法：

1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
参数名称 描述
color 可选参数，提示块的颜色
( default / blue / pink / red / purple / orange / green )
icon 可选参数，可配置自定的 icon，只支持 fontawesome 图标或者 no-icon。
style 可选参数，可以覆盖设置中的默认 style
( simple / moder / flat / disabled )

示例：

style - simple 的自定义 颜色与 icon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' simple %}
2024年到了....
{% endnote %}
{% note pink 'fas fa-car-crash' simple %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' simple%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' simple %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2024年到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

Tag-hide 标签

Butterfly 的作者不建议在 Tag-hide 标签中放入 h1~h6 标题。因为 Toc 目录会把隐藏的标题给显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致 Toc 的滚动出现异常。

Tag-hide 标签适合用来把一些文字，内容隐藏起来，并且可以通过按钮点击显示，主要有三种用法：

Inline 只能够在文本里面添加隐藏按钮，只能隐藏文本，并且文本不能包含英文逗号，可以使用 ‚ 来代替。

用法：

1
{% hideInline content,display,bg,color %}
参数名称 描述
content 要隐藏的文本内容
display 可选参数，按钮的文字
bg 可选参数，按钮的背景颜色
color 可选参数，按钮文字的颜色

示例：

1
2
1 + 1 等于多少？ {% hideInline 等于2,查看答案,#FF7242,#fff %}
门前大桥下 {% hideInline 游过一群鸭 %}

1 + 1 等于多少？ 等于2</span>
门前大桥下 游过一群鸭</span>

block 可以用来隐藏很多内容，如：代码块，图片等

( display中不能包含英文符号，可以用&sbquo; 代替)

用法：

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}
参数名称 描述
content 要隐藏的文本内容
display 可选参数，按钮的文字
bg 可选参数，按钮的背景颜色
color 可选参数，按钮文字的颜色

示例：

1
2
3
4
问世间情为何物
{% hideBlock 查看答案 %}

{% endhideBlock %}

问世间情为何物

如果展示的内容很多，可以把这些内容隐藏在收缩框里，需要时再展开

(display 不能包含英文逗号，可用 &sbquo; 代替)

用法：

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
{% hideToggle 春江花月夜 %}
江天一色无纤尘，皎皎空中孤月轮。

江畔何人初见月？江月何年初照人？

人生代代无穷已，江月年年望相似。

不知江月待何人，但见长江送流水。

白云一片去悠悠，青枫浦上不胜愁。

谁家今夜扁舟子？何处相思明月楼？ 
{% endhideToggle %}
春江花月夜

江天一色无纤尘，皎皎空中孤月轮。

江畔何人初见月？江月何年初照人？

人生代代无穷已，江月年年望相似。

不知江月待何人，但见长江送流水。

白云一片去悠悠，青枫浦上不胜愁。

谁家今夜扁舟子？何处相思明月楼？

Mermaid 标签

使用 Mermaid 标签可以绘制流程图、时序图、类别图、状态图等图像。具体可以查看 mermaid文档

主题配置文件中默认设置：

1
2
3
4
5
6
7
8
# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme:
    light: default
    dark: dark

用法：

1
2
3
{% mermaid %}
content
{% endmermaid %}

示例：

1
2
3
4
5
6
7
8
{% mermaid %}
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}

Tabs 标签

Tab 标签移植于 Next 主题

使用方法

1
2
3
4
5
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
参数名 描述
[Unique name] 用来标明每个选项的前缀名，与 [index] 组成选项名。名称在当前文章/页面是唯一的，不能包含逗号，并且空格会被替换为短横线。
[index] 可选参数，用来指定默认激活的选项的索引值。默认选择第一个选项，若值为 -1 则不会指定任何选项。
[Tab caption] 可选参数，用来指定当前选项的的标题名，如果未设置，就会使用 [Unique name] + 索引值的方式为每一个选项设置标题名。如果设置了图标，则标题会空。
[@icon] 可选参数，用图标来代替选项名，要指定 FontAwesome 图标名称，可以包含空格也可不包含空格。

示例：

测试1 - 参数使用默认设置

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

测试2 - [index] 参数指定索引值

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test2, 2 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

可以看见此时默认激活的选项为第二个

测试3 - [index] 值使用 -1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% tabs test3, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

可以看到，此时默认是不会打开任何选项栏的

测试4 - 指定 [Tab caption] 值

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test4 %}
<!-- tab 1 -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab 2 -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab 3 -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

可以看到，此时每个选项的名称都改为设定的值。

测试5 - 指定 [@icon] 值

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test5 %}
<!-- tab 第一個Tab -->
**tab名字為第一个Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有图标 沒有Tab名字**
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

tab 名字为第一个Tab

只有图标 沒有Tab名字

名字+icon

可以看出，选项的名称可以只有名字、只有图标组成，也可以名字和图标组合组成。

Button 标签

该标签用来为设置一个链接按钮

用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url]         : 链接
[text]        : 按钮文字
[icon]        : [可选] 图标
[color]       : [可选] 按钮背景颜色(默认style时）
                      按钮字体和边框颜色(outline时)
                      default/blue/pink/red/purple/orange/green
[style]       : [可选] 按钮样式 默认实心
                      outline/留空
[layout]      : [可选] 默认布局 默认为line
                      block/留空
[position]    : [可选] 按钮位置 前提是设置了layout为block 默认为左边
                      center/right/留空
[size]        : [可选] 按钮大小
                      larger/留空

示例：

1
2
3
4
5
This is baidu website, click the button {% btn 'https://www.baidu.com',BaiDu %}
This is baidu website, click the button {% btn 'https://www.baidu.com',BaiDu,far fa-hand-point-right %}
This is baidu website, click the button {% btn 'https://www.baidu.com',BaiDu,,outline %}
This is baidu website, click the button {% btn 'https://www.baidu.com',BaiDu,far fa-hand-point-right,outline %}
This is baidu website, click the button {% btn 'https://www.baidu.com',BaiDu,far fa-hand-point-right,larger %}

This is baidu website, click the button BaiDu
This is baidu website, click the button BaiDu
This is baidu website, click the button BaiDu
This is baidu website, click the button BaiDu
This is baidu website, click the button BaiDu

Label 标签

由于 hexo 的渲染限制，Butterfly 作者建议不要在段落开头使用 Label 标签，否则可能出现无法换行的问题。

用法：

{% label text color %}

参数名称 描述
text 文字
color 可选参数，背景颜色，默认为default
( default / blue / pink / red / purple / orange / green )

示例：

1
披绣闼，俯{% label 雕甍 %}，山原旷其盈视，川泽纡其骇瞩。{% label 闾阎扑地 pink %}，钟鸣鼎食之家；舸舰弥津，{% label 青雀黄龙 blue %}之舳。{% label 云销雨霁 red %}，彩彻区明。{% label 落霞  与孤鹜齐飞 purple %}，{% label 秋水共长天一色 orange %}。{% label 渔舟 green %}唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。

披绣闼，俯雕甍 ，山原旷其盈视，川泽纡其骇瞩。闾阎扑地 ，钟鸣鼎食之家；舸舰弥津，青雀黄龙 之舳。云销雨霁 ，彩彻区明。落霞与孤鹜齐飞 ，秋水共长天一色 。渔舟 唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。

Timeline 标签

用法：

1
2
3
4
5
6
7
8
9
{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}

参数名称 描述
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
{% timeline 2024 %}
<!-- timeline 01-01 -->
第一
<!-- endtimeline -->
<!-- timeline 01-02 -->
第二
<!-- endtimeline -->
<!-- timeline 01-03 -->
第三
<!-- endtimeline -->
<!-- timeline 01-04 -->
第四
<!-- endtimeline -->
<!-- timeline 01-05 -->
第五
<!-- endtimeline -->
<!-- timeline 01-06 -->
第六
<!-- endtimeline -->
{% endtimeline %}

2024

01-01

第一

01-02

第二

01-03

第三

01-04

第四

01-05

第五

01-06

第六