Fluid组件
Fluid 内置了许多 Tag 组件，包含便签、行内标签、勾选框、按钮和组图等，我们可以使用这些组件来丰富自己的文章内容。
标签
1
| {% label primary @text %}
|
1
| <span class="label label-primary">Label</span>
|
便签
1
2
3
| {% note success %}
文字 或者 `markdown` 均可
{% endnote %}
|
1
| <p class="note note-primary">标签</p>
|
组图
1
2
3
4
5
6
7
| {% gi 5 3-2 %}
{% endgi %}
|
更多主题配置请参考：Hexo Fluid 用户手册
Bootstrap组件
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
文本颜色
1
2
3
4
5
6
7
8
9
10
| <p class="text-muted">柔和的文本。</p>
<p class="text-primary">重要的文本。</p>
<p class="text-success">执行成功的文本。</p>
<p class="text-info">代表一些提示信息的文本。</p>
<p class="text-warning">警告文本。</p>
<p class="text-danger">危险操作文本。</p>
<p class="text-secondary">副标题。</p>
<p class="text-dark">深灰色文字。</p>
<p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
<p class="text-white">白色文本（白色背景上看不清楚）。</p>
|
柔和的文本。
重要的文本。
执行成功的文本。
代表一些提示信息的文本。
警告文本。
危险操作文本。
副标题。
深灰色文字。
浅灰色文本（白色背景上看不清楚）。
白色文本（白色背景上看不清楚）。
背景颜色
1
2
3
4
5
6
7
8
| <p class="bg-primary text-white">重要的背景颜色。</p>
<p class="bg-success text-white">执行成功背景颜色。</p>
<p class="bg-info text-white">信息提示背景颜色。</p>
<p class="bg-warning text-white">警告背景颜色</p>
<p class="bg-danger text-white">危险背景颜色。</p>
<p class="bg-secondary text-white">副标题背景颜色。</p>
<p class="bg-dark text-white">深灰背景颜色。</p>
<p class="bg-light text-dark">浅灰背景颜色。</p>
|
重要的背景颜色。
执行成功背景颜色。
信息提示背景颜色。
警告背景颜色
危险背景颜色。
副标题背景颜色。
深灰背景颜色。
浅灰背景颜色。
警报引导
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
38
39
40
41
42
43
44
45
46
47
48
| <div class="alert alert-primary alert-dismissible fade show" role="alert">
primary
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
secondary
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
success
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
danger
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
warning
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-info alert-dismissible fade show" role="alert">
info
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-light alert-dismissible fade show" role="alert">
light
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-dark alert-dismissible fade show" role="alert">
dark
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
|
primary
secondary
success
danger
warning
info
light
dark
更多组件配置请参考：Bootstrap4 中文文档
Volantis组件
这里主要移植了几个我喜欢的 Volantis 标签，并在主题样式上做了些许优化。
注释
1
| {% nota 把鼠标移动到我上面试试,可以看到注释内容出现在顶栏 %}
|
折叠框
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
| {% folding blue open::默认打开的折叠框 %}
这是一个默认打开的折叠框。
{% endfolding %}
{% folding cyan::默认关闭的折叠框 %}
这是一个默认关闭的折叠框。
{% endfolding %}
{% folding green::查看列表测试 %}
- 你好
- hello
{% endfolding %}
{% folding yellow::查看列表测试 %}
- 你好
- hello
{% endfolding %}
{% folding red::查看列表测试 %}
- 你好
- hello
{% endfolding %}
|
默认打开的折叠框
默认关闭的折叠框
查看列表测试
查看列表测试
查看列表测试
时间线
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| {% timeline 大标题 %}
{% timenode 时间节点（小标题） %}
正文内容
{% endtimenode %}
{% timenode 时间节点（小标题） %}
正文内容
{% endtimenode %}
{% timenode 时间节点（小标题） %}
正文内容
{% endtimenode %}
{% endtimeline %}
|
更多标签配置请查看：Volantis 标签插件
