在 butterfly 的官方教程中有提到几个 butterfly 特有的标签外挂效果，这里在实际中测试体验一下
（标签外挂的英文名是 tab plugin，我觉得翻译成标签插件更合适一些）

提示框 Note 标签

在 _confly.butterfly.yml 配置文件的 note 部分可以 note 标签的样式进行设置，可以设置样式、图标、边框圆角弧度、背景。

使用方法1

语法：

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，添加这个字段，就可以不显示图标
  • style，显示的效果，有simple、modern、flat、disabled几种可以选择

效果展示：

Any content (support inline tags too.io).

使用方法2

语法：

1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

参数说明：

  • colo，自己定义颜色
  • icon，配置图标链接
  • style，设置显示的效果，同样是有simple、modern、flat、disabled几种可以选择

效果展示：

Any content (support inline tags too.io).

Gallery 相册图库

语法：

1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>

参数说明：

  • name，图库的名字
  • description，图片的说明文字
  • link，链接到对应相册的地址，就是图片存放的本地路径
  • img-link，图库封面图片的地址
    效果展示：
    1
    2
    3
    4
    5
    <div class="gallery-group-main">
    {% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
    {% galleryGroup '漫威' '关于漫威的图片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
    {% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
    </div>

Gallery相册

新版的相册，会根据图片长度自动进行排版，书写也更为方便。
以这种方式展示图片，就可以使用网络图片，而不需要指向一个本地存放图片的路径。
语法：

1
2
3
{% gallery [lazyload],[rowHeight],[limit] %}
markdown 图片格式
{% endgallery %}

参数说明：

  • lazyload，懒加载，值为true和false，默认为false，可以点击按钮加载更多的图片
  • rowHeight，图片显示的高度，如果需要一行显示更多的内容，可以设置为比较小的数字，默认值为20
  • limit，设置每次加载多少张图片
    效果展示：
    [{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":""}]

tag-hide

这个标签可以把文字内容隐藏起来，需要通过点击按钮才能够显示。（文字内容最好不包括H1-6等标题）

inline内联形式

内联形式是将隐藏内容放在文字的同一行
语法：

1
{% hideInline content,display,bg,color %}

参数说明：

  • content: 文本内容
  • display: 按钮显示的文字(可选)
  • bg: 按钮的背景颜色(可选)
  • color: 按钮文字的颜色(可选)

效果展示：
哪个英文字母最酷？ 因为西装裤(C装酷)

门里站着一个人? 闪

block形式

块形式是将隐藏内容放在下一个块中
语法：

1
2
3
4
{% hideBlock display,bg,color %}
content
{% endhideBlock %}


参数说明：
参数和使用方法和上面的内联形式相同
效果展示：
查看答案

傻子，怎么可能有答案

触发形式

还有一种像代码块一样的收缩形式，能够收缩特定的内容，当需要展开的时候再点击展开

语法：

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

参数说明：
参数和上面差不多，display就是在收缩的时候显示的内容

效果展示：

Butterfly安装方法

在你的博客根目录里
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
如果想要安装比较新的dev分支，可以
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

mermaid 甘特图

使用这个标签可以绘制多种类型的图，比如说Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图）
使用这个功能，还需要打开配置文件的 mermaid 功能
语法：

1
2
3
{% mermaid %}
内容
{% endmermaid %}

参数说明：
需要根据绘制的图的类型不同，使用不同的绘制语法

效果展示：

tabs 标签页

能够在为代码块那样的块标签添加多个标签页，用来区分不同的内容
在查看别人的内容的时候，发现tab标签还可以嵌套，可以在特定的标签也中嵌套另外一个标签插件，实现一个if-else的效果

语法：

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

使用说明：
使用 {%%} 内容标识 tab 标签，然后使用 <!-- tab --> 来标识具体的标签，需要多少个标签页就添加几个

效果展示：
默认展示第一个标签页

This is Tab 1.

This is Tab 2.

This is Tab 3.

预设不打开标签页

This is Tab 1.

This is Tab 2.

This is Tab 3.

自定义的tab名字，并带有图标

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

button 按钮

为网页添加一个按钮
语法：

1
{% 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/留空

效果展示：
不同样式的按钮
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly

不同位置的按钮
Butterfly
Butterfly
Butterfly

不同颜色的按钮
Butterfly
Butterfly
Butterfly
Butterfly
Butterfly
Butterfly
Butterfly

组合使用的结果

Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly

inlineimg 内联图片

使得图片和文字内容出现在同一行中，为内联形式

语法：

1
{% inlineImg [src] [height] %}

参数说明：
[src] : 图片链接
[height] ： 图片高度限制【可选】

效果展示：

你看我长得漂亮不

我觉得很漂亮

label 标签

为网页文字内容添加不同的标签效果
语法：

1
{% label text color %}

参数说明：

  • text 文字
  • color 【可选】背景颜色，默认为 defalue，可选的有default/blue/pink/red/purple/orange/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
{% timeline 2022 %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

可以在上面不断地添加 <!-- timeline --> 内容来添加时间线上的节点

2022

01-02

这是测试页面

flink

可以在任何界面插入类型与友情链接那样的列表效果，支持yaml格式

语法：

1
2
3
4
{% flink %}
xxxxxx
{% endflink %}

效果展示：

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
28
29
{% flink %}
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: JerryC
      link: https://jerryc.me/
      avatar: https://jerryc.me/img/avatar.png
      descr: 今日事,今日毕
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台
{% endflink %}

友情链接
那些人，那些事
JerryC
JerryC
今日事,今日毕
Hexo
Hexo
快速、简单且强大的网志框架
网站
值得推荐的网站
Youtube
Youtube
视频网站
Weibo
Weibo
中国最大社交分享平台
Twitter
Twitter
社交分享平台

参考资料

Butterfly 安裝文檔(三) 主題配置-1 | Butterfly
標籤外掛(Tag Plugins) | Butterfly