1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1. 主题自带的样式
    1.1. note
    1.2. Tabs
    1.3. tag-hide
    1.4. Button
2. 自定义的样式
    2.1. 我的样式及写法
    2.3. 群友的样式
    2.3. note&tag
    2.4. 渐变note
3. volantis的样式
    3.1. 标签(已修改)
    3.2. Span & P
    3.3. Checkbox & Radio
    3.4. hideBlock
    3.5. Folding
    3.6. image
    3.7. fancbox
    3.8. 富文本按钮
    3.9. Audio
    3.10. Video
4. 任意元素动画

主题自带的样式

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

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

门里站着一个人? 闪

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

( content不能包含英文逗号，可用&sbquo;)

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

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

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

content: 文本内容

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

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

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

查看答案

傻子，怎么可能有答案

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

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

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

content: 文本内容

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

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

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

点击查看说明

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

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

( display 不能包含英文逗号，可用&sbquo;)

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 'http://blog.xiabor.com',Homepage,fas fa-download, blue larger %}
{% btn 'http://blog.xiabor.com',Homepage,fas fa-download, blue larger %}
{% btn 'http://blog.xiabor.com',Homepage,fas fa-play-circle, orange larger %}
{% btn 'http://blog.xiabor.com',Homepage,fas fa-link, orange %}
This is my homepage, click the button {% btn 'https://837837.xyz',Homepage %}
This is my homepage, click the button {% btn 'https://837837.xyz',Homepage,far fa-hand-point-right %}
This is my homepage, click the button {% btn 'https://837837.xyz',Homepage,,outline %}
This is my homepage, click the button {% btn 'https://837837.xyz',Homepage,far fa-hand-point-right,outline %}
This is my homepage, click the button {% btn 'https://837837.xyz',Homepage,far fa-hand-point-right,larger %}

Homepage
Homepage
Homepage

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

以上效果均为主题自带，参考文档Jerryc

自定义的样式

仅展示我的效果及写法

如何自定义参考之前的文章Hexo 写文章的一些小技巧

黄色色块
绿色色块
灰色色块
蓝色色块

左边框红色块级

右边框红色块级

上边框蓝色块级

1
2
3
4
5
6
7
8
9
10
<span id="inline-yellow">黄色色块</span>
<span id="inline-green">绿色色块</span>
<span id="inline-grey">灰色色块</span>
<span id="inline-blue">蓝色色块</span>

<p id="div-border-left-red">左边框红色块级</p>

<p id="div-border-right-red">右边框红色块级</p>

<p id="div-border-top-blue">上边框蓝色块级</p>

明天再继续扒群友的样式，晚安

群友的样式

note&tag

以下效果由群友分享，参考文档小康博客

绿色

红色

黄色

灰色

蓝色

绿色

红色小标签 绿色小标签 蓝色小标签 黄色小标签 灰色小标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<p class='div-border [颜色|方向加粗]'>你的文字</p>
/* note语法示例 */
<p class='div-border green'>绿色</p>
<p class='div-border red'>红色</p>
<p class='div-border yellow'>黄色</p>
<p class='div-border grey'>灰色</p>
<p class='div-border blue'>蓝色</p>
<p class='div-border green left right'>绿色</p>
/* 小tag标签语法示例 */
<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>
<!-- endtab -->
1
<p class='div-border [颜色|方向加粗]'>你的文字</p>

设置某个边框加粗，例如 <p class='div-border green left right'>绿色</p>

渐变note

默认情况

success

error

warning

单行效果

默认情况
success
error
warning
1
2
3
4
5
6
7
8
9
<div class='tip' ><p>默认情况<p></div>
<div class='tip success'><p>success<p></div>
<div class='tip error'><p>error<p></div>
<div class='tip warning'><p>warning<p></div>

<div class='tip' >默认情况</div>
<div class='tip success'>success</div>
<div class='tip error'>error</div>
<div class='tip warning'>warning</div>

volantis的样式

标签(已修改)

由于主题已自带多种标签，与volantis类似，所以只好用html写法

warning
quote
info
done
success
error
danger
radiation
bug
idea
link
paperclip
todo
msg
guide
download
up
undo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class='snote warning'>warning</div>
<div class='snote quote'>quote</div>
<div class='snote info'>info</div>
<div class='snote done'>done</div>
<div class='snote success'>success</div>
<div class='snote error'>error</div>
<div class='snote danger'>danger</div>
<div class='snote radiation'>radiation</div>
<div class='snote bug'>bug</div>
<div class='snote idea yellow'>idea</div>
<div class='snote link blue'>link</div>
<div class='snote paperclip'>paperclip</div>
<div class='snote todo'>todo</div>
<div class='snote msg'>msg</div>
<div class='snote guide'>guide</div>
<div class='snote download'>download</div>
<div class='snote up'>up</div>
<div class='snote undo'>undo</div>

小提示：tabs中使用无序列表格式会乱

样式参数位置可以写图标和颜色，多个样式参数用空格隔开。

彩色的:quote, info, warning, done/success, error/danger

灰色的，也可以指定颜色:radiation, bug, idea, link, paperclip, todo, msg, guide, download, up, undo

颜色:clear, light, gray, red, yellow, green, cyan, blue

例如：

1
2
<div class='snote idea yellow'>warning</div>
<div class='snote link blue'>link</div>
idea
link

Span & P

在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。

标题部分就是超大文字。

A Wonderful Theme for Hexo

1
2
3
4
5
6
在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。

标题部分就是超大文字。

{% p center logo large, Volantis %}
{% p center small, A Wonderful Theme for Hexo %}

样式参数位置可以写颜色、大小和对齐方向，多个样式参数用空格隔开。

字体：logo, code

颜色:red, yellow, green, cyan, blue, gray

大小:small, h4, h3, h2, h1, large, huge, ultra

对齐方向:left, center, right

下划线

更新记录

2020-08-25 连接测试

今天又更新了文章

2020-08-05 连接测试

今天是2020-06-19，本文的发布日期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% link 木槿部落格, http://xiabor.com/, https://xiabor.com/img/avatar.png %}{% link 木槿部落格, http://xiabor.com/, https://xiabor.com/img/avatar.png %}

{% timeline 更新记录 %}

{% timenode 2020-08-25 [连接测试](https://blog.xiabor.com) %}

今天又更新了文章

{% endtimenode %}

{% timenode 2020-08-05 [连接测试](https://blog.xiabor.com) %}

今天是2020-06-19，本文的发布日期

{% endtimenode %}

{% endtimeline %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% timeline 时间线标题 %}

{% timenode 时间节点（标题） %}

正文内容

{% endtimenode %}

{% timenode 时间节点（标题） %}

正文内容

{% endtimenode %}

{% endtimeline %}

文字样式

下划线

着重线

Ctrl C

删除线

波浪线

1
2
3
4
5
6
7
8
9
<u>下划线</u>

<emp>着重线</emp>

<kbd>Ctrl</kbd>  <kbd>C</kbd>

<del>删除线</del>

<wavy>波浪线</wavy>

Checkbox & Radio

Checkbox

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

Radio

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

1
2
3
4
5
6
7
8
9
10
11
Checkbox
{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% checkbox red, 支持自定义颜色 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 增加 %}
{% checkbox minus yellow checked, 减少 %}
{% checkbox times red checked, 叉 %}
1
2
3
4
5
6
7
8
Radio
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}
1
{% checkbox 样式参数（可选）, 文本（支持简单md） %}

颜色：red, yellow, green, cyan, blue
样式：plus, minus, times
选中状态：checked

hideBlock

主题已自带，现有两种写法：

  1. 主题自带的写法

    因为西装裤(C装酷)

  2. 自定义写法

    content




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}

2. 自定义写法
{% hideBlock display,bg,color %}
content
{% endhideBlock %}

{% hideBlock 小姐姐 %}
{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
{% endgallery %}
{% endhideBlock %}

content: 文本内容

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

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

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

Folding

效果演示在下面，放进tabs里格式会乱。

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
28
29
30
31
32
33
34
35
36
37
{% folding 查看图片测试 %}

![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

{% endfolding %}

{% folding cyan open, 查看默认打开的折叠框 %}

这是一个默认打开的折叠框。

{% endfolding %}

{% folding green, 查看代码测试 %}

{% endfolding %}

{% folding yellow, 查看列表测试 %}

无序列表格式也会乱，建议使用有序列表
- haha
- hehe

{% endfolding %}

{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

hahaha <span><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

示例

1
2
3
{% folding 参数（可选）, 标题 %}
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

参数位置可以填写颜色和状态，多个参数用空格隔开。

颜色：blue, cyan, green, yellow, red
状态：状态填写 open 代表默认打开。

查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试

查看列表测试
  • haha
  • hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

image

图片描述。

指定宽度：

指定宽度并添加描述：

图片描述。
1
2
3
4
5
6
7
8
9
{% image https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg, 图片描述。 %}

指定宽度：

{% image https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg, 300px %}

指定宽度并添加描述：

{% image https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg, 300px, 图片描述。 %}

图片宽度：阿拉伯数字 + px
example: 300px
图片描述：纯文本，不能包含引号。

1
{% image 链接, 宽度（可选）, 描述（可选） %}

fancbox

图片描述

一行多图（不换行）

图片描述
图片描述
图片描述

多行多个图片（每行2～8个图片）




图片描述



一行一图：

1
2
3
{% fancybox %}
![图片描述](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfancybox %}

一行多图（不换行）

1
2
3
4
5
{% fancybox %}
![图片描述](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![图片描述](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
![图片描述](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg)
{% endfancybox %}

多行多个图片（每行2～8个图片）

1
2
3
4
5
6
7
8
9
10
{% fancybox stretch, 4 %}
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
{% endfancybox %}

对齐方向：left, center, right

缩放：stretch

列数：逗号后面直接写列数，支持 2 ～ 8 列。设定列列数之后就是「多行多图」布局，此时图片默认左对齐。为了避免图片大小不一，建议搭配 stretch 来时图片放大填充。

1
2
3
4
{% fancybox 参数, 列数 %}
![图片描述](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
{% endfancybox %}

富文本按钮

来源于volantis，故保留原格式及连接

需要显示类似「团队成员」之类的一组含有头像的链接：

xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu

或者含有图标的按钮：

下载源码 查看文档

圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

心率管家

专业版

 心率管家

免费版

 
1
2
3
4
5
6
7
8
需要显示类似「团队成员」之类的一组含有头像的链接：
{% btns circle grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% endbtns %}
1
2
3
4
5
或者含有图标的按钮：
{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbtns %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
{% btns circle center grid5 %}
<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
  <i class='fab fa-apple'></i>
  <b>心率管家</b>
  {% p red, 专业版 %}
  <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'>
</a>
<a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'>
  <i class='fab fa-apple'></i>
  <b>心率管家</b>
  {% p green, 免费版 %}
  <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}
1
2
3
4
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}
样式参数位置可以写图片样式、布局方式，多个样式参数用空格隔开。

圆角样式,默认为方形：rounded, circle

增加文字样式：可以在容器内增加 <b>标题</b> 和 <p>描述文字</p>

布局方式：默认为自动宽度，适合视野内只有一两个的情况

参数 含义
wide 宽一点的按钮
fill 填充布局，自动铺满至少一行，多了会换行。
center 居中，按钮之间是固定间距。
around 居中分散
grid2 等宽最多2列，屏幕变窄会适当减少列数。
grid3 等宽最多3列，屏幕变窄会适当减少列数。
grid4 等宽最多4列，屏幕变窄会适当减少列数。
grid5 等宽最多5列，屏幕变窄会适当减少列数。

Audio

1
{% audio https://github.com/xaoxuu/volantis-docs/releases/download/assets/Lumia1020.mp3 %}
1
{% audio 音频链接 %}

Video

100%宽度

50%宽度

25%宽度

100%宽度

1
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
50%宽度 
1
2
3
4
5
6
{% videos, 2 %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}

25%宽度

1
2
3
4
5
6
7
8
9
10
{% videos, 4 %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/xaoxuu/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}

单个视频

1
{% video 视频链接 %}
多个视频 
1
2
3
4
5
{% videos 对齐方向, 列数 %}
{% video 视频链接 %}
{% video 视频链接 %}
{% video 视频链接 %}
{% endvideos %}

对齐方向：left, center, right

列数：逗号后面直接写列数，支持 1 ～ 4 列。

任意元素动画

动画效果示例表
On DOM loadOn hoverOn parent hover
 faa-wrench animated faa-wrench animated-hover faa-wrench
 faa-ring animated faa-ring animated-hover faa-ring
 faa-horizontal animated faa-horizontal animated-hover faa-horizontal
 faa-vertical animated faa-vertical animated-hover faa-vertical
 faa-flash animated faa-flash animated-hover faa-flash
 faa-bounce animated faa-bounce animated-hover faa-bounce
 faa-spin animated faa-spin animated-hover faa-spin
 faa-float animated faa-float animated-hover faa-float
 faa-pulse animated faa-pulse animated-hover faa-pulse
 faa-shake animated faa-shake animated-hover faa-shake
 faa-tada animated faa-tada animated-hover faa-tada
 faa-passing animated faa-passing animated-hover faa-passing
 faa-passing-reverse animated faa-passing-reverse animated-hover faa-passing-reverse
 faa-burst animated faa-burst animated-hover faa-burst
 faa-falling animated faa-falling animated-hover faa-falling
 faa-rising animated faa-rising animated-hover faa-rising

例如网址导航栏可以写为- 收藏夹 || http://trove.xiabor.com/ || fas fa-infinity faa-shake animated

注意：如果使用 On parent hover 需要向父级元素添加 class 名 faa-parent animated-hover。其余两个不需要。

效果演示(再次点击可收起)

图标示例

小标签
红色小标签

绿色小标签

大风车，转呀转悠悠！

(又发现一个小问题，Toggle写标题会导致目录不展开而直接跳转Toggle处)

默认情况

success

error

error

warning

渐变标签

绿色

红色

绿色

食用方法

可以通过添加faa-fast动画加速，faa-slow动画减速！！！

1
2
图标示例
<i class="fa fa-plane faa-float animated"></i>
1
2
3
小标签
<span class="inline-tag red  faa-flash animated">红色小标签</span>
<span class="inline-tag green faa-falling animated">绿色小标签</span>
1
2
3
4
5
6
7
大风车，转呀转悠悠！
<div class='tip faa-horizontal animated' ><p>默认情况<p></div>
<div class='tip success faa-flash animated'><p>success<p></div>
<div class='tip error faa-spin faa-slow animated'><p>error<p></div>
<div class='tip success faa-spin faa-fast
 animated'><p>error<p></div>
<div class='tip warning faa-shake animated'><p>warning<p></div>
1
2
3
4
渐变标签
<p class='div-border green  faa-falling animated'>绿色</p>
<p class='div-border red  faa-wrench animated'>红色</p>
<p class='div-border green left right  faa-burst animated'>绿色</p>