各种样式使用方法

保留备用,方便查找使用

主题默认样式

note

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
22
23
{% note default %}
default 提示块标签
{% endnote %}

{% note primary no-icon %}
primary 提示块标签
{% endnote %}

{% note success %}
success 提示块标签
{% endnote %}

{% note info %}
info 提示块标签
{% endnote %}

{% note warning %}
warning 提示块标签
{% endnote %}

{% note danger %}
danger 提示块标签
{% endnote %}

tabs

整个 Tab 是食用方法 4 的效果,默认不展开

1
2
3
4
5
6
7
8
9
10
{% tabs tab-id %}

<!-- tab tab-name -->
内容1
<!-- endtab -->

<!-- tab tab-name -->
内容2
<!-- endtab -->
{% endtabs %}

tab-id:必填,如果一个页面有多个 tabs 时,tab-id 不能重复。

tab-name:标签文本。

预设展示第一个【默认】

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

预设选择 tabs, 默认显示第三个。标题未定义则显示 Tab1,Tab2,Tab3,默认显示第二个写法类似

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

自定义 Tab 名 + 只有 icon + icon 和 Tab 名

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
4
5
6
7
8
9
10
11
12
13
{% tabs test3, -1 %}
<!-- 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
14
15
16
17
18
19
20
21
{% 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.

tag-hide

content

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

门里站着一个人?

在文本里面添加按钮隐藏内容,只限文字

1
2
3
4
5
{% hideInline content,display,bg,color %}

哪个英文字母最酷? {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}

门里站着一个人? {% hideInline 闪 %}

content: 文本内容

display: 按钮显示的文字 (可选)

bg: 按钮的背景颜色 (可选)

color: 按钮文字的颜色 (可选)

content

查看答案

傻子,怎么可能有答案

block 独立的 block 隐藏内容,可以隐藏很多内容,包括图片,代码块等等
( display 不能包含英文逗号,可用 )

1
2
3
4
5
6
7
8
{% hideBlock display,bg,color %}
content
{% endhideBlock %}

查看答案
{% hideBlock 查看答案 %}
傻子,怎么可能有答案
{% endhideBlock %}

content: 文本内容

display: 按钮显示的文字 (可选)

bg: 按钮的背景颜色 (可选)

color: 按钮文字的颜色 (可选)

display

content

点击查看说明

此部分默认不展开,可以是代码块

如果需要展示的内容太多,可以把它隐藏在收缩框里,需要时再把它展开。

( display 不能包含英文逗号,可用 )

1
2
3
4
5
6
7
8
{% hideToggle display,bg,color %}
content
{% endhideToggle %}

{% hideToggle 点击查看说明 %}
此部分默认不展开,可以是代码块

{% endhideToggle %}

Button

Homepage
Homepage
Homepage
Homepage
This is my homepage, click the button Homepage
This is my homepage, click the button Homepage
This is my homepage, click the button Homepage
This is my homepage, click the button Homepage
This is my homepage, click the button Homepage

1
2
3
4
5
6
7
8
9
{% btn 'https://hexo.flyyi.top/',Homepage,fas fa-download, blue larger %}
{% btn 'https://hexo.flyyi.top/',Homepage,fas fa-download, blue larger %}
{% btn 'https://hexo.flyyi.top/',Homepage,fas fa-play-circle, orange larger %}
{% btn 'https://hexo.flyyi.top/',Homepage,fas fa-link, orange %}
This is my homepage, click the button {% btn 'https://www.flyyi.top/',Homepage %}
This is my homepage, click the button {% btn 'https://www.flyyi.top/',Homepage,far fa-hand-point-right %}
This is my homepage, click the button {% btn 'https://www.flyyi.top/',Homepage,,outline %}
This is my homepage, click the button {% btn 'https://www.flyyi.top/',Homepage,far fa-hand-point-right,outline %}
This is my homepage, click the button {% btn 'https://www.flyyi.top/',Homepage,far fa-hand-point-right,larger %}

Homepage
Homepage
Homepage

1
2
3
{% btn 'https://hexo.flyyi.top/',Homepage,far fa-hand-point-right,block %}
{% btn 'https://hexo.flyyi.top/',Homepage,far fa-hand-point-right,block center larger %}
{% btn 'https://hexo.flyyi.top/',Homepage,far fa-hand-point-right,block right outline larger %}

Homepage
Homepage
Homepage
Homepage
Homepage
Homepage
Homepage

1
2
3
4
5
6
7
{% btn 'https://hexo.flyyi.top/',Homepage,far fa-hand-point-right,larger %}
{% btn 'https://hexo.flyyi.top/',Homepage,far fa-hand-point-right,blue larger %}
{% btn 'https://hexo.flyyi.top/',Homepage,far fa-hand-point-right,pink larger %}
{% btn 'https://hexo.flyyi.top/',Homepage,far fa-hand-point-right,red larger %}
{% btn 'https://hexo.flyyi.top/',Homepage,far fa-hand-point-right,purple larger %}
{% btn 'https://hexo.flyyi.top/',Homepage,far fa-hand-point-right,orange larger %}
{% btn 'https://hexo.flyyi.top/',Homepage,far fa-hand-point-right,green larger %}
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://hexo.flyyi.top/',Homepage,far fa-hand-point-right,outline larger %}
{% btn 'https://hexo.flyyi.top/',Homepage,far fa-hand-point-right,outline blue larger %}
{% btn 'https://hexo.flyyi.top/',Homepage,far fa-hand-point-right,outline pink larger %}
{% btn 'https://hexo.flyyi.top/',Homepage,far fa-hand-point-right,outline red larger %}
{% btn 'https://hexo.flyyi.top/',Homepage,far fa-hand-point-right,outline purple larger %}
{% btn 'https://hexo.flyyi.top/',Homepage,far fa-hand-point-right,outline orange larger %}
{% btn 'https://hexo.flyyi.top/',Homepage,far fa-hand-point-right,outline green larger %}
</div>
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/留空

文章仅适用于butterfly主题,本文章仅供于写文章时方便查找,部分文字引用MuJin’s Blog