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

外挂标签

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

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 语法

支持自定义颜色

绿色

黄色

青色

蓝色

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

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