多彩外挂标签 1.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 %}
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 %}
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 %}
no-icon无图标类型 {% 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.配置:颜色（color）+图标（icon）+类型（style）
simple （和上面类型差不多，只展示一个）
只支持 fontawesome 图标
{% 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 %}
标签隐藏美化 block block独立的block隐藏内容，可以隐藏很多内容，包括图片，代码块等等
( display 不能包含英文逗号，可用‚)
content: 文本内容
display: 按钮显示的文字(可选)
bg: 按钮的背景颜色(可选)
color: 按钮文字的颜色(可选)
{% hideBlock display,bg,color %} 内容 {% endhideBlock %}
{% hideBlock 查看答案 %} 傻子，怎么可能有答案 {% endhideBlock %}
{% 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.Demo This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly %} This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right %} This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,,outline %} This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline %} This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}
This is my website, click the button Butterfly Butterfly Butterfly Butterfly Butterfly
2.带链接 {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block center larger %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block right outline larger %}
Butterfly Butterfly Butterfly 3.实心颜色 {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,blue larger %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,pink larger %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,red larger %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,purple larger %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,orange larger %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,green larger %}
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly 4.空心颜色 <div class ="btn-center" > {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline larger %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline blue larger %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline pink larger %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline red larger %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline purple larger %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline orange larger %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline green larger %} </div >
{% label text color %} text文字 color=想要的颜色
臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。 宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。
臣亮言：先帝 创业未半，而中道崩殂 。今天下三分，益州疲敝 ，此诚危急存亡之秋 也！然侍衞之臣，不懈于内；忠志之士 ，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。作奸 、犯科 ，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。
时间线 {% timeline 2022,pink %} <!-- timeline 01-02 --> 这是测试页面 <!-- endtimeline --> {% endtimeline %} 例子为粉色，想要改其他颜色替换pink即可，blue pink red purple orange green 默认淡蓝色
toggle折叠式文章显示 {% hideToggle display,bg,color %} content {% endhideToggle %}
{% hideToggle 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 {% endhideToggle %}
Butterfly安装方法 标签显示 非预设标签（默认展示第一项） {% tabs test1 %} <!-- tab --> **This is Tab 1.** <!-- endtab --> <!-- tab --> **This is Tab 2.** <!-- endtab --> <!-- tab --> **This is Tab 3.** <!-- endtab --> {% endtabs %}
预设标签(如下默认勾选第三个) {% tabs test2, 3 %} <!-- tab --> **This is Tab 1.** <!-- endtab --> <!-- tab --> **This is Tab 2.** <!-- endtab --> <!-- tab --> **This is Tab 3.** <!-- endtab --> {% endtabs %}
自定义Tab名 + 只有icon + icon和Tab名 {% tabs test4 %} <!-- tab 第一个Tab --> **tab名字为第一个Tab** <!-- endtab --> <!-- tab @fab fa-apple-pay --> **只有图标 没有Tab名字** <!-- endtab --> <!-- tab 炸弹@fas fa-bomb --> **名字+icon** <!-- endtab --> {% endtabs %}
相册和相册图集配置 相册 {% gallery %} markdown 图片格式 {% endgallery %}
{% gallery %}         {% endgallery %}
[{"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":""}]
加载更多
相册图集 <div class ="gallery-group-main" > {% galleryGroup name description link img-url %} {% galleryGroup name description link img-url %} {% galleryGroup name description link img-url %} </div >
<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 >
壁纸
收藏的一些壁纸
漫威
关于漫威的图片
OH MY GIRL
关于OH MY GIRL的图片
