大部分样式是主题独有的功能，还有些是通过安装插件、修改源码实现的，基本只适用于此博客，如需要将文章发布在其它平台，不建议大量使用。

外挂标签

tabs

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

示例源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test2 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

timeline

2022

04-02

这是测试页面

2022

03-02

这是测试页面

2021

07-02

这是测试页面

1
2
3
4
5
6
7
8
{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}
  1. 标题：title
  2. 颜色：default(留空) / blue / pink / red / purple / orange / green
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% timeline 2022 %}
<!-- timeline 04-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,blue %}
<!-- timeline 03-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2021,pink %}
<!-- timeline 07-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

btn

Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly 
1
{% 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
6
7
8
9
<div class="btn-center">
{% 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 %}
</div>

note

默认 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

flat样式示例源码

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

默认 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

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 disabled %}
默认 提示块标籤
{% endnote %}

{% note default disabled %}
default 提示块标籤
{% endnote %}

{% note primary disabled %}
primary 提示块标籤
{% endnote %}

{% note success disabled %}
success 提示块标籤
{% endnote %}

{% note info disabled %}
info 提示块标籤
{% endnote %}

{% note warning disabled %}
warning 提示块标籤
{% endnote %}

{% note danger disabled %}
danger 提示块标籤
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

modern样式示例源码

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

hide

点击展开

内容

示例源码

1
2
3
{% hideToggle 点击展开 %}
内容
{% endhideToggle %}

点击显示:内容

参数

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

  content: 文本内容
  display: 按钮显示的文字 (可选)
  bg: 按钮的背景颜色 (可选)
  color: 按钮文字的颜色 (可选)

示例源码

1
点击显示:{% hideInline 内容,显示,#FF7242,#fff %}

内容

示例源码

1
2
3
{% hideBlock 点击显示 %}
内容
{% endhideBlock %}

label

臣亮言：先帝 創業未半，而中道崩殂 。今天下三分，益州疲敝 ，此誠危急存亡之秋 也！然侍衞之臣，不懈於內；忠志之士 ，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。
宮中、府中，俱為一體；陟罰臧否，不宜異同。若有作奸 、犯科 ，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。

1
{% label text color %}

text：文字
color：[可选]背景颜色，default/blue/pink/red/purple/orange/green

1
2
臣亮言：{% label 先帝 %}創業未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此誠{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈於內；{% label 忠志之士 purple %}，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。
宮中、府中，俱為一體；陟罰臧否，不宜異同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。

以下标签移植于 volantis(v5)

span

各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。

超大号文字：

A Wonderful Theme for Hexo 
1
{% span 样式参数::文本内容 %}

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

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

对齐方向：left, center, right

1
2
3
4
5
各种颜色的标签，包括：{% span red::红色 %}、{% span yellow::黄色 %}、{% span green::绿色 %}、{% span cyan::青色 %}、{% span blue::蓝色 %}、{% span gray::灰色 %}。

超大号文字：

{% span center logo large::Volantis %} {% span center small::A Wonderful Theme for Hexo %}

checkbox

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

1
{% checkbox 样式参数（可选）::文本（支持简单md） %}

颜色：red, yellow, green, cyan, blue

选中状态：checked

1
2
3
4
5
6
7
8
9
10
{% 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::叉 %}

radio
同属于checkbox标签，使用方法同上

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

如何参与项目

https://volantis.js.org/contributors/

1
{% link 标题::链接::图片链接（可选） %}
1
{% link 如何参与项目::https://volantis.js.org/contributors/::https://pblood.oss-cn-hongkong.aliyuncs.com/img/site/logo.png %}

ghcard

用户信息卡片

仓库信息卡片

 
1
2
{% ghcard 用户名::其它参数（可选） %}
{% ghcard 用户名/仓库::其它参数（可选） %}
1
2
3
4
5
| {% ghcard xaoxuu %} | {% ghcard xaoxuu::theme=vue %} |
| -- | -- |
| {% ghcard xaoxuu::theme=buefy %} | {% ghcard xaoxuu::theme=solarized-light %} |
| {% ghcard xaoxuu::theme=onedark %} | {% ghcard xaoxuu::theme=solarized-dark %} |
| {% ghcard xaoxuu::theme=algolia %} | {% ghcard xaoxuu::theme=calm %} |
1
2
3
4
5
| {% ghcard volantis-x/hexo-theme-volantis %} | {% ghcard volantis-x/hexo-theme-volantis::theme=vue %} |
| -- | -- |
| {% ghcard volantis-x/hexo-theme-volantis::theme=buefy %} | {% ghcard volantis-x/hexo-theme-volantis::theme=solarized-light %} |
| {% ghcard volantis-x/hexo-theme-volantis::theme=onedark %} | {% ghcard volantis-x/hexo-theme-volantis::theme=solarized-dark %} |
| {% ghcard volantis-x/hexo-theme-volantis::theme=algolia %} | {% ghcard volantis-x/hexo-theme-volantis::theme=calm %} |

HTML 语法

兼容 HTML 语法，可以直接使用

插入音乐

以网易云为例

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=1455706958&auto=1&height=66"></iframe>

嵌入视频

1
<video src="https://test.com/test.mp4" width="800px" height="600px" controls="controls"></video>

嵌入自适应B站视频

B站官方已经提供了iframe标签，不用找接口爬链接了，在网页打开b站视频页，通过分享按钮就可以复制，直接引用的效果如下

这样肯定是不行的，我们需要添加一些参数使其适应我们的网站

1
2
3
<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//player.bilibili.com/player.html?aid=206890880&bvid=BV1Ah411z7Po&cid=378344365&page=1&as_wide=0&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>

最终效果

通过以上只能获取低清视频，而且获取不了番剧、影视等视频链接，获取高清视频可以参考 晓晴博客，B站视频直链解析源码(PHP源码 包含前端解析源码)

DOM运动

可使任意DOM运动起来

| 首页 | 首页

默认 提示块标籤

1
[DOM类] [DOM元素] [参数]

运动逻辑(必需)
animated：DOM加载完毕自动运动
animated-hover：鼠标悬停在图标上才运动

运动模式(必需)
faa-wrench：抖动
faa-bounce：上下滑动
faa-spin：顺时针旋转

更多参数及效果预览请 点击这里

运动速度(可选)
faa-fast：快速抖动
faa-slow：慢速抖动(默认)

1
2
3
4
5
6
7
<i class="fas fa-home faa-wrench animated"></i> | <span class="fas fa-home faa-wrench animated">首页</span> | <span><i class="fas fa-home faa-wrench animated"></i>首页</span>

<i class="fa-solid fa-fan faa-spin animated"></i>

{% note success faa-float animated %}
默认 提示块标籤
{% endnote %}