Butterfly写作语法 还没写完，持续更新
Callout 基础配置 注意修改主题配置文件，里面的style代表着不同的样式。
icons和light_bg_offset只对方法一生效
1 2 3 4 5 6 7 8 9 10 11 12 note: # Note tag style values: # - simple bs-callout old alert style. Default. # - modern bs-callout new (v2-v3) alert style. # - flat flat callout style with background, like on Mozilla or StackOverflow. # - disabled disable all CSS styles import of note tag. style: simple icons: false border_radius: 3 # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6). # Offset also applied to label tag variables. This option can work with disabled note tag. light_bg_offset: 0
常规Callout 语法 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）
图标示例 1 2 3 4 {% note simple %} 默認 提示塊標籤 {% endnote %}
1 2 3 {% note default simple %} default 提示塊標籤 {% endnote %}
1 2 3 {% note primary simple %} primary 提示塊標籤 {% endnote %}
1 2 3 {% note success simple %} success 提示塊標籤 {% endnote %}
1 2 3 {% note info simple %} info 提示塊標籤 {% endnote %}
1 2 3 {% note warning simple %} warning 提示塊標籤 {% endnote %}
1 2 3 {% note danger simple %} danger 提示塊標籤 {% endnote %}
样式示例 1 2 3 {% note success no-icon %} success no-icon {% endnote %}
1 2 3 {% note success simple %} success simple {% endnote %}
1 2 3 {% note success flat %} success flat {% endnote %}
1 2 3 {% note success modern %} success modern {% endnote %}
1 2 3 {% note success disabled %} success disabled {% endnote %}
自定义图标Callout 语法 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）
示例 1 2 3 {% note blue no-icon %} 蓝色 no-icon {% endnote %}
1 2 3 {% note blue simple %} 空图标（占位置） simple {% endnote %}
1 2 3 {% note blue 'fas fa-bullhorn' simple %} blue simple {% endnote %}
1 2 3 {% note blue 'fas fa-bullhorn' modern %} blue modern {% endnote %}
1 2 3 {% note blue 'fas fa-bullhorn' flat %} blue flat {% endnote %}
1 2 3 {% note blue 'fas fa-bullhorn' disable %} blue disable {% endnote %}
Toggle 语法 1 2 3 {% hideToggle display,bg,color %} content {% endhideToggle %}
参数
用法
display
toggle的标题
[bg]
暂未测试
[color]
颜色
Content
toggle里的内容
示例 1 2 3 4 5 {% hideToggle Meet17 %} 这里是17的博客~ {% endhideToggle %}
Meet17 Tab 语法 1 2 3 4 5 {% tabs Unique name, [index] %} <!-- tab [Tab caption] [@icon] --> Any content (support inline tags too). <!-- endtab --> {% endtabs %}
参数
用法
Unique name
tab名字（需要唯一）
[index]
激活选项卡的索引号。如果索引为-1，就是一开始直接全部不展开。
[Tab caption]
当前Tab的标题。如果未指定标题，但指定了图标，则标题将为空。
[@icon]
FontAwesome图标名称（全名，类似于’fas fa-font’）。
示例 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 %}
高亮 语法
参数
用法
text
文字
color
颜色，默认为default
示例 1 2 臣亮言：{% label 先帝 %}創業未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此誠{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈於內；{% label 忠志之士 purple %}，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。 宮中、府中，俱為一體；陟罰臧否，不宜異同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。
臣亮言：先帝 創業未半，而中道崩殂 。今天下三分，益州疲敝 ，此誠危急存亡之秋 也！然侍衞之臣，不懈於內；忠志之士 ，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。作奸 、犯科 ，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。
隐藏内容点击显示 inline inline 在文本里面添加按鈕隱藏內容，只限文字 (content不能包含英文逗號，可用‚)
语法 1 {% hideInline content,display,bg,color %}
content: 文本內容
display: 按鈕顯示的文字(可選)
bg: 按鈕的背景顏色(可選)
color: 按鈕文字的顏色(可選)
示例 1 2 3 哪個英文字母最酷？ {% hideInline 因為西裝褲(C裝酷),查看答案,#FF7242,#fff %} 門裏站着一個人? {% hideInline 閃 %}
哪個英文字母最酷？ 查看答案
因為西裝褲(C裝酷)
門裏站着一個人? Click
閃
block block獨立的block隱藏內容，可以隱藏很多內容，包括圖片，代碼塊等等 ( display 不能包含英文逗號，可用‚)
语法 1 2 3 {% hideBlock display,bg,color %} content {% endhideBlock %}
content: 文本內容
display: 按鈕顯示的文字(可選)
bg: 按鈕的背景顏色(可選)
color: 按鈕文字的顏色(可選)
示例 1 2 3 4 查看答案 {% hideBlock 查看答案 %} 怎麼可能有答案 {% endhideBlock %}
查看答案
按钮 语法 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/留空
示例 1 2 3 4 5 This is my website, click the button {% btn 'https://xiang0731.github.io/',Meet17 %} This is my website, click the button {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right %} This is my website, click the button {% btn 'https://xiang0731.github.io/',Meet17,,outline %} This is my website, click the button {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,outline %} This is my website, click the button {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,larger %}
This is my website, click the button Meet17
This is my website, click the button Meet17
This is my website, click the button Meet17
This is my website, click the button Meet17
This is my website, click the button Meet17
1 2 3 {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,block %} {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,block center larger %} {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,block right outline larger %}
Meet17 Meet17 Meet17 1 2 3 4 5 6 7 {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,larger %} {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,blue larger %} {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,pink larger %} {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,red larger %} {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,purple larger %} {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,orange larger %} {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,green larger %}
Meet17 Meet17 Meet17 Meet17 Meet17 Meet17 Meet17 1 2 3 4 5 6 7 8 9 <div class="btn-center"> {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,outline larger %} {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,outline blue larger %} {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,outline pink larger %} {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,outline red larger %} {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,outline purple larger %} {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,outline orange larger %} {% btn 'https://xiang0731.github.io/',Meet17,far fa-hand-point-right,outline green larger %} </div>
同行图片 butterfly主题中图片默认以块级元素显示，如果想以内联元素显示，可以使用这个
语法 1 {% inlineImg [src] [height] %}
示例 1 只需要在markdonw文本行中放上面这个就可以了 {% inlineImg https://s2.loli.net/2023/04/26/PrsfGnWO3DI2Yyt.webp %}
只需要在markdonw文本行中放上面这个就可以了
友情链接块 可以直接在文章内插入友情链接样式模块
语法 1 2 3 4 5 6 7 8 9 10 11 12 13 {% flink %} - class_name: 大标题 class_desc: 大标题下的描述 link_list: - name: Website1 link: https://xxx.com avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg descr: 网站描述 - name: Website2 link: https://xxx.com avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg descr: 网站描述2 {% endflink %}
示例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 {% flink %} - class_name: 友情鏈接 class_desc: 那些人，那些事 link_list: - 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: Twitter link: https://twitter.com/ avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png descr: 社交分享平台 {% endflink %}
本文摘录自Butterfly官方文档 ,或有删改
wechat
alipay