標籤外掛是Hexo獨有的功能，並不是標準的Markdown格式。

以下的寫法，只適用於Butterfly主題，用在其它主題上不會有效果，甚至可能會報錯。使用前請留意。

Note (Bootstrap Callout)

Note 標籤外掛有兩種用法

用法一

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）

info 提示塊標籤

用法二（自定義 icon）

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

2021年快到了….

2022年快到了….

圖庫

Gallery圖庫

1
2
3
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
</div>
Group Image Gallery
壁紙

收藏的一些壁紙

Group Image Gallery
插画

好看的一些插画

Gallery相冊

區別於舊版的Gallery相冊,新的Gallery相冊會自動根據圖片長度進行排版，書寫也更加方便，與markdown格式一樣。可根據需要插入到相應的md。

1
2
3
{% gallery %}
markdown 圖片格式
{% endgallery %}

图片描述
图片描述
图片描述
图片描述
图片描述

tag-hide

請注意，tag-hide內的標簽外掛content內都不建議有h1 - h6 等標題。因為Toc會把隱藏內容標題也顯示出來，而且當滾動屏幕時，如果隱藏內容沒有顯示出來，會導致Toc的滾動出現異常。

如果你想把一些文字、內容隱藏起來，並提供按鈕讓用户點擊顯示。可以使用這個標籤外掛。

Inline

inline 在文本里面添加按鈕隱藏內容，只限文字
( content不能包含英文逗號，可用&sbquo;)

1
{% hideInline content,[display],[bg],[color] %}
  • content: 文本內容
  • display: 按鈕顯示的文字(可選)
  • bg: 按鈕的背景顏色(可選)
  • color: 按鈕文字的顏色(可選)

哪個英文字母最酷？ 因為西裝褲(C裝酷)

Block

block獨立的block隱藏內容，可以隱藏很多內容，包括圖片，代碼塊等等
( display 不能包含英文逗號，可用&sbquo;)

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

查看答案

傻子，怎麼可能有答案
alt 属性文本

1
<p>这是隱藏的代码块</p>

Toggle

如果你需要展示的內容太多，可以把它隱藏在收縮框裏，需要時再把它展開
( display 不能包含英文逗號，可用&sbquo;)

1
2
3
{% hideToggle [display],[bg],[color] %}
content
{% endhideToggle %}
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

mermaid標籤不允許嵌套於一些隱藏屬性的標籤外掛，例如: tag-hide內的標籤外掛和tabs標籤外掛，這會導致mermaid圖示無法正常顯示，使用時請留意。

請不要壓縮html代碼，不然會導致mermaid顯示異常

使用mermaid標籤可以繪製Flowchart（流程圖）、Sequence diagram（時序圖 ）、Class Diagram（類別圖）、State Diagram（狀態圖）、Gantt（甘特圖）和Pie Chart（圓形圖），具體可以查看mermaid文檔

Tabs

1
2
3
4
5
6
7
8
9
10
11
{% 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.
              Only for current url of post/page must be unique!
[index]     : 預設選擇
[Tab caption] : 当前选项卡的标题
[@icon]       : FontAwesome icon name (full-name, look like 'fas fa-font')

This is Tab 1.

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/留空

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

more than one button in center

Butterfly Butterfly Butterfly

inlineImg

主題中的圖片都是默認以塊級元素顯示，如果你想以內聯元素顯示，可以使用這個標簽外掛。

1
2
3
4
{% inlineImg src [height] %}

[src]      :    圖片鏈接
[height]   ：   圖片高度限制【可選】

你看我長得漂亮不

alt 属性文本

我覺得很漂亮

label

高亮所需的文字

1
2
3
4
5
{% label text [color] %}

text  文字
color 【可選】背景顏色，默認為 default
      default/blue/pink/red/purple/orange/green

臣亮言：先帝 創業未半，而中道崩殂 。今天下三分，益州疲敝 ，此誠危急存亡之秋 也！