Tabs 
Inline 
1 2 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,,outline%} 
 
This is my website, click the button Butterfly 
This is my website, click the button Butterfly 
Block 
1 2 3 This is my website, click the button  {% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,block larger %} This is my website, click the button  {% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,block center larger %} This is my website, click the button  {% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,block right blue larger %} 
 
Butterfly  
Butterfly  
Butterfly  
option 
more than one button in center
 
1 2 3 4 5 6 7 8 9 <div  class ="btn-center" > {% 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 %} </div > 
 
1 2 3 4 5 6 7 8 9 <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 > 
 
mermaid 
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
Note (Bootstrap Callout) 
方法一 
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 %} 
 
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 %} 
 
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 %} 
 
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 %} 
 
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 %} 
 
方法二 
simple
 
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 %} 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 %} 
 
modern
 
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' 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 %} 
 
flat
 
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' 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 %} 
 
disabled
 
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' 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 %} 
 
no-icon
 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 {% note no-icon %} 你是刷 Visa 還是 UnionPay {% endnote %} {% note blue no-icon %} 2021年快到了.... {% endnote %} {% note pink no-icon %} 小心開車 安全至上 {% endnote %} {% note red no-icon %} 這是三片呢?還是四片? {% endnote %} {% note orange no-icon %} 你是刷 Visa 還是 UnionPay {% endnote %} {% note purple no-icon %} 剪刀石頭布 {% endnote %} {% note green no-icon %} 前端最討厭的瀏覽器 {% endnote %} 
 
Gallery 相冊圖庫 
  
   
  
  壁紙
  收藏的一些壁紙
   
   
   
  
  
   
  
  漫威
  關於漫威的圖片
   
   
   
  
  
   
  
  OH MY GIRL
  關於OH MY GIRL的圖片
   
   
   
  
 
Gallery 相冊 
tag-hide 
隱藏文字,點擊顯示文章
hide-inline 
哪個英文字母最酷? 查看答案
   因為西裝褲(C裝酷) 
門裡站著一個人? Click
   閃 
hide-block 
美女
hide-toggle 
Butterfly安裝方法 
    在你的博客根目錄裏
1 git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly 
 
如果想要安裝比較新的dev分支,可以
1 git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly