主题配置-1 Butterfly 安裝文檔(三) 主題配置-1 | Butterfly
主题配置-2 Butterfly 安裝文檔(四) 主題配置-2 | Butterfly
进阶教程 Butterfly 安裝文檔(六) 進階教程 | Butterfly
数学公式渲染 Butterfly 安裝文檔(四) 主題配置-2 | Butterfly
1 2 3 4 5 6 $$ \sqrt{x^2 + y^2} = \left(\frac{\sum_{i=1}^{n} a_i^2}{n}\right)^{1/2} $$ $$ f(x) = \int_{-\infty}^\infty e^{-\pi x^2} dx $$
x 2 + y 2 = ( ∑ i = 1 n a i 2 n ) 1 / 2 \sqrt{x^2 + y^2} = \left(\frac{\sum_{i=1}^{n} a_i^2}{n}\right)^{1/2} x 2 + y 2 = ( n ∑ i = 1 n a i 2 ) 1/2
f ( x ) = ∫ − ∞ ∞ e − π x 2 d x f(x) = \int_{-\infty}^\infty e^{-\pi x^2} dx f ( x ) = ∫ − ∞ ∞ e − π x 2 d x
乐谱渲染 Butterfly 安裝文檔(三) 主題配置-1 | Butterfly
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 {% score %} X:1 T:alternate heads M:C L:1/8 U:n=!style=normal! K:C treble style=rhythm "Am" BBBB B2 B>B | "Dm" B2 B/B/B "C" B4 |"Am" B2 nGnB B2 nGnA | "Dm" nDB/B/ nDB/B/ "C" nCB/B/ nCB/B/ |B8| B0 B0 B0 B0 |] %%text This translates to: [M:C ][K:style=normal ] [A,EAce ][A,EAce ][A,EAce ][A,EAce ] [A,EAce]2 [A,EAce]>[A,EAce] |[DAdf]2 [DAdf]/[DAdf]/[DAdf] [CEGce]4 |[A,EAce]2 GA [A,EAce] GA |D[DAdf]/[DAdf]/ D[DAdf]/[DAdf]/ C [CEGce]/[CEGce]/ C[CEGce]/[CEGce]/ |[CEGce]8 | [CEGce]2 [CEGce]2 [CEGce]2 [CEGce]2 |] GAB2 !style=harmonic![gb]4|GAB2 [K: style=harmonic]gbgb| [K: style=x] C/A,/ C/C/E C/zz2| w:Rock-y did-nt like that {% endscore %}
X:1 T:alternate heads M:C L:1/8 U:n=!style=normal! K:C treble style=rhythm "Am" BBBB B2 B>B | "Dm" B2 B/B/B "C" B4 |"Am" B2 nGnB B2 nGnA | "Dm" nDB/B/ nDB/B/ "C" nCB/B/ nCB/B/ |B8| B0 B0 B0 B0 |] %%text This translates to: [M:C][K:style=normal] [A,EAce][A,EAce][A,EAce][A,EAce] [A,EAce]2 [A,EAce]>[A,EAce] |[DAdf]2 [DAdf]/[DAdf]/[DAdf] [CEGce]4 |[A,EAce]2 GA [A,EAce] GA |D[DAdf]/[DAdf]/ D[DAdf]/[DAdf]/ C [CEGce]/[CEGce]/ C[CEGce]/[CEGce]/ |[CEGce]8 | [CEGce]2 [CEGce]2 [CEGce]2 [CEGce]2 |] GAB2 !style=harmonic![gb]4|GAB2 [K: style=harmonic]gbgb| [K: style=x] C/A,/ C/C/E C/zz2| w:Rock-y did-nt like that
任意界面插入友链 Butterfly 安裝文檔(三) 主題配置-1 | Butterfly
1 2 3 {% 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 {% 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: 中国最大社交分享平台 {% endflink %}
时光轴 Butterfly 安裝文檔(三) 主題配置-1 | Butterfly
1 2 3 4 5 6 7 8 {% timeline title,color %} <!-- timeline title --> xxxxx <!-- endtimeline --> <!-- timeline title --> xxxxx <!-- endtimeline --> {% endtimeline %}
标签 Butterfly 安裝文檔(三) 主題配置-1 | Butterfly
Minecraft Minecraft Minecraft Minecraft Minecraft Minecraft Minecraft 图片内联显示 Butterfly 安裝文檔(三) 主題配置-1 | Butterfly
1 2 3 4 {% inlineImg [src] [height] %} [src] : 图片链接 [height] ： 图片高度限制【可选】
你看我长得漂亮不（这谁啊喂！）
我觉得很漂亮
按钮渲染 Butterfly 安裝文檔(三) 主題配置-1 | Butterfly
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 {% 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 2 3 4 5 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
1 2 3 {% 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 1 2 3 4 5 6 7 {% 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 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>
分页（Tabs） Butterfly 安裝文檔(三) 主題配置-1 | Butterfly
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 {% 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 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 %}
1 2 3 4 5 6 7 8 9 10 11 12 13 {% tabs test2, 3 %} <!-- tab --> **This is Tab 1.** <!-- endtab --> <!-- tab --> **This is Tab 2.** <!-- endtab --> <!-- tab --> **This is Tab 3.** <!-- endtab --> {% endtabs %}
1 2 3 4 5 6 7 8 9 10 11 12 13 {% tabs test2, 3 %} <!-- tab --> **This is Tab 1.** <!-- endtab --> <!-- tab --> **This is Tab 2.** <!-- endtab --> <!-- tab --> **This is Tab 3.** <!-- endtab --> {% endtabs %}
1 2 3 4 5 6 7 8 9 10 11 12 13 {% tabs test4 %} <!-- tab 第一个Tab --> **tab名字为第一个Tab** <!-- endtab --> <!-- tab @fab fa-apple-pay --> **只有图标 没有Tab名字** <!-- endtab --> <!-- tab 炸弹@fas fa-bomb --> **名字+icon** <!-- endtab --> {% endtabs %}
流程图 Butterfly 安裝文檔(三) 主題配置-1 | Butterfly
1 2 3 4 5 6 7 8 9 10 11 12 13 {% tabs test4 %} <!-- tab 第一个Tab --> **tab名字为第一个Tab** <!-- endtab --> <!-- tab @fab fa-apple-pay --> **只有图标 没有Tab名字** <!-- endtab --> <!-- tab 炸弹@fas fa-bomb --> **名字+icon** <!-- endtab --> {% endtabs %}
写法:
1 2 3 {% mermaid %} 内容 {% endmermaid %}
eg:
1 2 3 4 5 6 7 8 {% mermaid %} pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5 {% endmermaid %}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
隐藏按钮 Butterfly 安裝文檔(三) 主題配置-1 | Butterfly
1、inline 1 {% hideInline content,display,bg,color %}
1 2 3 哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %} 门里站着一个人? {% hideInline 闪 %}
哪个英文字母最酷？ 查看答案 因为西装裤(C装酷)
门里站着一个人? Click 闪
2、 1 2 3 {% hideBlock display,bg,color %} content {% endhideBlock %}
1 2 3 4 查看答案 {% hideBlock 查看答案 %} 傻子，怎么可能有答案 {% endhideBlock %}
查看答案
3、 1 2 3 {% hideToggle display,bg,color %} content {% endhideToggle %}
1 2 3 4 5 6 7 8 9 10 {% 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安装方法 note Butterfly 安裝文檔(三) 主題配置-1 | Butterfly
1 2 3 {% note [class] [no-icon] [style] %} Any content (support inline tags too.io). {% endnote %}
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 %}
微信
支付宝