Butterfly 常用操作

详细配置参考：

作者: Jerry
連結: https://demo.jerryc.me/posts/4aa8abbe/#Gallery%E7%9B%B8%E5%86%8A
來源: Butterfly

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
auto_open:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:

静态页面的一些属性：

写法 解释
title 【必需】文章标题
date 【必需】文章创建日期
updated 【可选】文章更新日期
tags 【可选】文章标签
categories 【可选】文章分类
keywords 【可选】文章关键字
description 【可选】文章描述
top_img 【可选】文章顶部图片
cover 【可选】文章缩略图(如果没有设置top_img,文章页顶部将展示缩略图，可设置为false/图片地址/留空)
comments 【可选】显示文章评论模块(默认 true)
toc 【可选】显示文章TOC(默认设置为toc的enable配置)
toc_number 【可选】显示toc_number(默认设置为toc的number配置)
auto_open 【可选】是否自动打开TOC(默认设置为toc的auto_open配置)
copyright 【可选】显示文章版权(默认设置为post_copyright的enable配置)
copyright_author 【可选】文章版的文章作者
copyright_author_href 【可选】文章版权模块的文章作者链接
copyright_url 【可选】文章版权模块的文章連結链接
copyright_info 【可选】文章版版权模块的版权声明文字
mathjax 【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex 【可选】显示katex(当设置katex的per_page: false時，才需要配置，默认 false)
aplayer 【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐配置
highlight_shrink 【可选】配置代码块是否展开(true/false)(默认值为highlight_shrink的配置)

1 标签

用法：

1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

Demo：

Any content (support inline tags too.io).

名称 用法
class 【可选】标识，不同的标识有不同的配色
（ default / primary / success / info / warning / danger ）
no-icon 【可选】不显示 icon
style 【可选】可以覆盖配置中的 style
（simple/modern/flat/disabled）

用法二：

1
2
3
4
5
6
7
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
Demo：
{% note orange  'fas fa-lab' green %}
Any content (support inline tags too.io).
{% endnote %}

Any content (support inline tags too.io).

名称 用法
color 【可选】顔色
(default / blue / pink / red / purple / orange / green)
icon 【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )
style 【可选】可以覆盖配置中的 style
（simple/modern/flat/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 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 %}

默认 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

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 %}

你是刷 Visa 還是 UnionPay

2021年快到了….

小心開車 安全至上

這是三片呢？還是四片？

你是刷 Visa 還是 UnionPay

剪刀石頭布

前端最討厭的瀏覽器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note no-icon flat %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note blue no-icon flat %}
2021年快到了....
{% endnote %}
{% note pink 'fa fa-bicycle flat %}
小心開車 安全至上
{% endnote %}
{% note red no-icon flat %}
這是三片呢？還是四片？
{% endnote %}
{% note orange no-icon flat %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note purple no-icon flat %}
剪刀石頭布
{% endnote %}
{% note green no-icon flat %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 還是 UnionPay

2021年快到了….

小心開車 安全至上

這是三片呢？還是四片？

你是刷 Visa 還是 UnionPay

剪刀石頭布

前端最討厭的瀏覽器

1
2
3
4
5
6
7
8
9
10
11
12
{% note no-icon flat %}
2021年快到了....
{% endnote %}
{% note blue no-icon modern %}
2021年快到了....
{% endnote %}
{% note pink 'fa fa-bicycle' simple %}
2021年快到了....
{% endnote %}
{% note red no-icon disabled  %}
2021年快到了....
{% endnote %}

flat 提示块标籤

modern提示块标籤

simple 提示块标籤

disabled 提示块标籤

2 butterfly内置标签

标签名 语法 参数
行内文本 span 样式参数, 文本内容 logo, code，red, yellow, green, cyan, blue, gray，
small, h4, h3, h2, h1, large, huge, ultra，left, center, right
独立文本 p 样式参数, 文本内容 同上
普通标签 note 样式参数, 文本内容 quote, info, warning, done/success, error/danger， quote（蓝色引号）
info（蓝色叹号）warning(黄色叹号),done（绿色打钩）
success（绿色打钩）,error(红色禁止),danger(红色打叉)
块状标签 noteblock 样式参数 文本段落 同上
上标式标签 tip 样式参数, 文本内容 空(蓝色叹号上标),success (绿色打钩上标),error(红色叉上标),warning(黄色叹号上标)
动画标签 tip 标签图标样式 动画效果 文本内容 标签图标样式参考普通标签； 动画效果： faa-horizontal【摇晃】
faa-flash【若隐若现】,faa-spin【360度旋转】,faa-shake【小幅度摆动】
复选框 checkbox 样式参数（可选）, 文本 颜色：red, yellow, green, cyan, blue；
样式：plus, minus, times； 选中状态：checked
按钮 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:可选按钮布局默认为lineblock/留空,
position:可选按钮位置前提是设置了layout为block默认为左边center/right/留空,
size:可选按钮大小larger/留空
隐藏按钮 hideInline content,display,bg,color content: 文本内容， display: 按钮显示的文字(可选)，
bg: 按钮的背景颜色(可选)， color: 按钮文字的颜色(可选)
隐藏款按钮 hideBlock display,bg,color content 同上
选项卡容器 tab-id：必填，如果一个页面有多个 tabs 时，tab-id 不能重复。
tab-name：标签文本。
折叠容器 颜色：blue, cyan, green, yellow, red；状态：状态填写 open 代表默认打开
fancybox容器 fancybox 参数, 列数 图片 endfancybox 对齐方向：left, center, right；缩放：stretch；
列数：逗号后面直接写列数，支持 2 ～ 8 列。
设定列列数之后就是「多行多图」布局，此时图片默认左对齐。
为了避免图片大小不一，建议搭配 stretch 来时图片放大填充。
音频容器 audio 音频链接 无
食品容器 video 视频链接 对齐方向：left, center,right；
列数：逗号后面直接写列数，支持 1 ～ 4 列。
latex公式 latex公式内容latex公式内容 无

出现{{}}解决办法

1
2
3
{% raw %}
 含有双大括号的内容
{% endraw %}

3 按钮

按钮具体用法 

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 'http://www.jerryc.me',JerryC %}
This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right %}
This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,,outline %}
This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,larger %}

This is my website, click the button JerryC
This is my website, click the button JerryC
This is my website, click the button JerryC
This is my website, click the button JerryC
This is my website, click the button JerryC

1
2
3
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,block %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,block center larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,block right outline larger %}
JerryC JerryC JerryC 
1
2
3
4
5
6
7
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,blue larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,pink larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,red larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,purple larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,orange larger %}
{% btn 'http://www.jerryc.me',JerryC,far fa-hand-point-right,green larger %}
JerryC JerryC JerryC JerryC JerryC JerryC JerryC 
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'http://www.jerryc.me',Jerry1,far fa-hand-point-right,outline larger %}
{% btn 'http://www.jerryc.me',Jerry2,far fa-hand-point-right,outline blue larger %}
{% btn 'http://www.jerryc.me',Jerry3,far fa-hand-point-right,outline pink larger %}
{% btn 'http://www.jerryc.me',Jerry4,far fa-hand-point-right,outline red larger %}
{% btn 'http://www.jerryc.me',Jerry5,far fa-hand-point-right,outline purple larger %}
{% btn 'http://www.jerryc.me',Jerry6,far fa-hand-point-right,outline orange larger %}
{% btn 'http://www.jerryc.me',Jerry7,far fa-hand-point-right,outline green larger %}
</div>
Jerry1 Jerry2 Jerry3 Jerry4 Jerry5 Jerry6 Jerry7

4 引用块

1
2
3
{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
{% endblockquote %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

5 引用书上的句子

1
2
3
4
5
6
7
{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}
example:
{% blockquote 艾米莉·狄金森 '句读'%}
我想你了，可是我不能对你说，怕只怕，说了对你也是一种折磨。
{% endblockquote %}

我想你了，可是我不能对你说，怕只怕，说了对你也是一种折磨。

艾米莉·狄金森

6 饼图

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 %}

7 选项卡内容

Demo 1 - 预设选择第一个【默认】

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs 选项卡一 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 2 - 预设选择tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs 选项卡二(默认为2), 2 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 3 - 没有预设值

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs 选项卡三（无预设值）, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 4 - 自定义Tab名 + 只有icon + icon和Tab名

1
2
3
4
5
6
7
8
9
10
11
12
{% tabs 选项卡四（自定义标签） %}
<!-- tab 第一个Tab@fa fa-arrow-circle-left -->
**tab名字为第一个Tab**
<!-- endtab -->
<!-- tab @fa fa-arrow-right -->
**只有图标 没有Tab名字**`<i class="fa fa-podcast" aria-hidden="true"></i>`
<i class="fa fa-podcast" aria-hidden="true"></i>
<!-- endtab -->
<!-- tab grav@fa fa-grav -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

哪个英文字母最酷？ 因为西装裤(C装酷)

门里站着一个人? 闪

8 图片格式（演示用）

1
2
3
4
5
{% gallery %}
插入图片链接即可
![]()
仅支持markdown格式
{% endgallery %}



9 隐藏块

隐藏块





1
2
3
{% hideToggle 分割线 %}

{% endhideToggle %}