本文参考了Butterfly主题作者的文章：标签外挂

标签外挂是Hexo独有的功能，且只适用于Butterfly主题，在其他Hexo主题上使用可能会报错！个人认为这有助于美化文章页面，所以做一个学习记录，供以后查询使用！

1.tabs

{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name   : Unique name of tabs block tag without comma.
                Will be used in #id's as prefix for each tab with their index numbers.
                If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
                Only for current url of post/page must be unique!
[index]       : Index number of active tab.
                If not specified, first tab (1) will be selected.
                If index is -1, no tab will be selected. It's will be something like spoiler.
                Optional parameter.
[Tab caption] : Caption of current tab.
                If not caption specified, unique name with tab index suffix will be used as caption of tab.
                If not caption specified, but specified icon, caption will empty.
                Optional parameter.
[@icon]       : FontAwesome icon name (full-name, look like 'fas fa-font')
                Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
                Optional parameter.

默认选择测试1的写法

{% tabs 测试 %}
<!-- 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的写法

{% tabs 测试, 3 %}
<!-- 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.

没有预设值的写法，此时默认不会展开

{% tabs 测试, -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.

自定义Tab名、只有icon、icon和Tab名

{% tabs 测试 %}
<!-- tab 自定义Tab名 -->
自定义Tab名
<!-- endtab -->

<!-- tab @fas fa-fan -->
只有icon
<!-- endtab -->

<!-- tab 大风车@fas fa-fan -->
icon和Tab名
<!-- endtab -->
{% endtabs %}

自定义Tab名

只有icon

icon和Tab名

2.label

3.7.5 及以上版本适用

{% label text color %}

text	 文字
color	【可选】背景颜色(default/blue/pink/red/purple/orange/green)，默认为 default

如下例

声声慢·寻寻觅觅
宋·李清照

{% label 寻寻觅觅，冷冷清清，凄凄惨惨戚戚 green %}。
乍暖还寒时候，最难将息。
{% label 三杯两盏淡酒，怎敌他、晚来风急 blue %}！
雁过也，正伤心，却是旧时相识。
{% label 满地黄花堆积，憔悴损，如今有谁堪摘 orange %}？
守着窗儿，独自怎生得黑！
梧桐更兼细雨，到黄昏、点点滴滴。
{% label 这次第，怎一个愁字了得 purple %}！

声声慢·寻寻觅觅
宋·李清照

寻寻觅觅，冷冷清清，凄凄惨惨戚戚 。

乍暖还寒时候，最难将息。

三杯两盏淡酒，怎敌他、晚来风急 ！

雁过也，正伤心，却是旧时相识。

满地黄花堆积，憔悴损，如今有谁堪摘 ？

守着窗儿，独自怎生得黑！
梧桐更兼细雨，到黄昏、点点滴滴。

这次第，怎一个愁字了得 ！

3.button

3.0以上适用

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

素履的博客 {% btn 'https://www.xyming108.top/',素履的博客 %}
素履的博客 {% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right %}
素履的博客 {% btn 'https://www.xyming108.top/',素履的博客,,outline %}
素履的博客 {% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,outline %}
素履的博客 {% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,larger %}

素履的博客 素履的博客
素履的博客 素履的博客
素履的博客 素履的博客
素履的博客 素履的博客
素履的博客 素履的博客

例2

{% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,block %}
{% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,block center larger %}
{% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,block right outline larger %}
素履的博客 素履的博客 素履的博客

例3

{% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,larger %}
{% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,blue larger %}
{% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,pink larger %}
{% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,red larger %}
{% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,purple larger %}
{% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,orange larger %}
{% btn 'https://www.xyming108.top/',素履的博客,far fa-hand-point-right,green larger %}
素履的博客 素履的博客 素履的博客 素履的博客 素履的博客 素履的博客 素履的博客

例4

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

4.Note (Bootstrap Callout)

修改主题配置文件

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

icons和light_bg_offset只对方法一生效

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

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

默认 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

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

默认 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

flat

{% 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 提示块标籤

disabled

{% 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 提示块标籤

3.2.0 以上版本支持

{% 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/modern/flat/disabled）

simple

{% note 'fab fa-cc-visa' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' simple %}
2021年快到了....
{% 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

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

modern

{% note 'fab fa-cc-visa' modern %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' modern %}
2021年快到了....
{% 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 %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

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

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

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

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器