Hexo 常用组件汇总

Fluid 组件

行内标签

使用:

1
2
3
4
5
6
{% label primary @primary %}
{% label default @default %}
{% label info @info %}
{% label success @success %}
{% label warning @warning %}
{% label danger @danger %}

演示:

primary default info success warning danger

便签

使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note primary %}
primary
{% endnote %}
{% note secondary %}
secondary
{% endnote %}
{% note success %}
success
{% endnote %}
{% note danger %}
danger
{% endnote %}
{% note warning %}
warning
{% endnote %}
{% note info %}
info
{% endnote %}
{% note light %}
light
{% endnote %}

演示:

primary

secondary

success

danger

warning

info

light

组图

使用:

1
2
3
4
5
6
7
{% gi 5 3-2 %}
![风景](https://pic1.imgdb.cn/item/636e733b16f2c2beb1a86832.jpg)
![风景](https://pic1.imgdb.cn/item/636e733b16f2c2beb1a86832.jpg)
![风景](https://pic1.imgdb.cn/item/636e733b16f2c2beb1a86832.jpg)
![星空](https://pic1.imgdb.cn/item/636e736816f2c2beb1a93fba.jpg)
![星空](https://pic1.imgdb.cn/item/636e736816f2c2beb1a93fba.jpg)
{% endgi %}

演示:

风景
风景
风景
星空
星空

更多主题内置 Tag 请查看:Fluid 配置指南

Volantis 组件

这里就需要使用 Hexo 注入器 了,编写注入代码:

需要在博客的根目录下创建scripts文件夹,然后在里面任意命名创建一个 js 文件即可。

例如,创建一个/blog/scripts/tag.js,内容为:

点击查看
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
hexo.extend.injector.register(
"body_end",
function () {
/* 折叠框 */
("use strict");
function postFolding(args, content) {
if (/::/g.test(args)) {
args = args.join(" ").split("::");
} else {
args = args.join(" ").split(",");
}
let style = "";
let title = "";
if (args.length > 1) {
style = args[0].trim();
title = args[1].trim();
} else if (args.length > 0) {
title = args[0].trim();
}
if (style != undefined) {
return `<details ${style}><summary> ${title} </summary>
<div class='content'>
${hexo.render
.renderSync({ text: content, engine: "markdown" })
.split("\n")
.join("")}
</div>
</details>`;
}
return `<details><summary> ${title} </summary>
<div class='content'>
${hexo.render
.renderSync({ text: content, engine: "markdown" })
.split("\n")
.join("")}
</div>
</details>`;
}
hexo.extend.tag.register("folding", postFolding, {
ends: true,
});

/* 时间线 */
("use strict");
function postTimeline(args, content) {
if (args.length > 0) {
return `<div class="timeline"><p class='p h2'>${args}</p>${content}</div>`;
}
return `<div class="timeline">${content}</div>`;
}
function postTimenode(args, content) {
if (/::/g.test(args)) {
args = args.join(" ").split("::");
} else {
args = args.join(" ").split(",");
}
var time = args[0];
return `<div class="timenode"><div class="meta"><p>${hexo.render.renderSync(
{ text: time, engine: "markdown" }
)}</p></div><div class="body">${hexo.render
.renderSync({ text: content, engine: "markdown" })
.split("\n")
.join("")}</div></div>`;
}
hexo.extend.tag.register("timeline", postTimeline, {
ends: true,
});
hexo.extend.tag.register("timenode", postTimenode, {
ends: true,
});
},
"default"
);

然后再引入相关的 CSS 即可。

点击查看
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
/* 折叠框 */
details {
display: block;
margin: 0.5rem 0;
padding: 16px;
border: 0;
font-size: 0.9rem;
border-radius: 4px;
transition: all 0.28s ease;
}

details summary {
position: relative;
margin: -16px;
padding: 16px;
color: #555;
font-size: 0.9rem;
font-weight: bold;
line-height: normal;
border-radius: 4px;
}

details summary > p,
details summary > h1,
details summary > h2,
details summary > h3,
details summary > h4,
details summary > h5,
details summary > h6 {
display: inline;
}

details summary:hover {
color: #30a9de;
}

details summary:hover:after {
position: absolute;
top: 50%;
right: 16px;
content: "+";
text-align: center;
transform: translateY(-50%);
}

details > summary {
background-color: #f6f6f6;
}

details[blue] {
border-color: #e8f4fd;
}

details[blue] > summary {
background-color: #e8f4fd;
}

details[cyan] {
border-color: #e8fafe;
}

details[cyan] > summary {
background-color: #e8fafe;
}

details[green] {
border-color: #ebf9ed;
}

details[green] > summary {
background-color: #ebf9ed;
}

details[yellow] {
border-color: #fff8e9;
}

details[yellow] > summary {
background-color: #fff8e9;
}

details[red] {
border-color: #feefee;
}

details[red] > summary {
background-color: #feefee;
}

details[open] {
border-color: rgba(85, 85, 85, 0.2);
}

details[open] > summary {
border-bottom: 1px solid rgba(85, 85, 85, 0.2);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

details[open][blue] {
border-color: rgba(33, 150, 243, 0.3);
}

details[open][blue] > summary {
border-bottom-color: rgba(33, 150, 243, 0.3);
}

details[open][cyan] {
border-color: rgba(27, 205, 252, 0.3);
}

details[open][cyan] > summary {
border-bottom-color: rgba(27, 205, 252, 0.3);
}

details[open][green] {
border-color: rgba(61, 197, 80, 0.3);
}

details[open][green] > summary {
border-bottom-color: rgba(61, 197, 80, 0.3);
}

details[open][yellow] {
border-color: rgba(255, 189, 43, 0.3);
}

details[open][yellow] > summary {
border-bottom-color: rgba(255, 189, 43, 0.3);
}

details[open][red] {
border-color: rgba(254, 95, 88, 0.3);
}

details[open][red] > summary {
border-bottom-color: rgba(254, 95, 88, 0.3);
}

details[open] > summary {
color: #555;
margin-bottom: 0;
}

details[open] > summary:hover:after {
content: "-";
}

details[open] > div.content {
margin: -16px;
margin-top: 0;
padding: 16px;
border: 1px solid lightgray;
border-top-color: transparent;
border-radius: 0 0 2px 2px;
}

details[open] > div.content p > a:hover {
text-decoration: underline;
}
点击查看
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
/* 时间线 */
div.timenode {
position: relative;
}

div.timenode:before,
div.timenode:after {
position: absolute;
left: 7px;
z-index: 1;
content: "";
width: 2px;
background-color: rgba(68, 215, 182, 0.5);
}

div.timenode:before {
top: 0;
height: 6px;
}

div.timenode:after {
top: 26px;
height: calc(100% - 26px);
}

div.timenode:last-child:after {
height: calc(100% - 26px - 16px);
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}

div.timenode .meta,
div.timenode .body {
max-width: calc(100% - 24px);
}

div.timenode .meta {
position: relative;
font-size: 0.75rem;
line-height: 32px;
height: 32px;
}

div.timenode .meta:before,
div.timenode .meta:after {
position: absolute;
top: 8px;
z-index: 2;
content: "";
}

div.timenode .meta:before {
width: 16px;
height: 16px;
background-color: rgba(68, 215, 182, 0.5);
border-radius: 8px;
}

div.timenode .meta:after {
width: 12px;
height: 12px;
margin-left: 2px;
margin-top: 2px;
background-color: #44d7b6;
border-radius: 6px;
transform: scale(0.5);
}

div.timenode .meta p {
margin: 0 0 0 24px;
font-weight: bold;
}

div.timenode .body {
display: inline-block;
margin: 4px 0 20px 24px;
padding: 0 12px;
border: 1px solid lightgray;
border-radius: 6px;
transition: all 0.3s;
}

div.timenode .body p:first-child {
margin-top: 0;
}

div.timenode .body p:last-child {
margin-bottom: 0;
}

div.timenode .body .highlight {
background-color: #fff7ea;
filter: grayscale(0%);
}

div.timenode .body .highlight figcaption {
background-color: #ffeed2;
}

div.timenode .body .highlight .gutter {
background-color: #ffedd0;
}

div.timenode:hover .meta {
color: #ff6666;
}

div.timenode:hover .meta:before {
background-color: rgba(255, 87, 34, 0.5);
}

div.timenode:hover .meta:after {
background-color: #ff5722;
}

折叠框

使用:

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 red::查看列表测试 %}

- 你好
- hello

{% endfolding %}

{% folding green::查看列表测试 %}

- 你好
- hello

{% endfolding %}

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

- 你好
- hello

{% endfolding %}

演示:

默认打开的折叠框

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

默认关闭的折叠框

这是一个默认关闭的折叠框。

查看列表测试
  • 你好
  • hello
查看列表测试
  • 你好
  • hello
查看列表测试
  • 你好
  • hello

时间线

使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% timeline 标题 %}

{% timenode 2023-10-16 %}

内容

{% endtimenode %}

{% timenode 2022-10-16 %}

内容

{% endtimenode %}

{% timenode 2021-10-16 %}

内容

{% endtimenode %}

{% endtimeline %}

演示:

标题

2023-10-16

内容

2022-10-16

内容

2021-10-16

内容

Tab 切换

我目前用的是插件版的,这个组件其实 Volantis 也有,但我懒得做适配了,所以就用了现成的。

使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs First unique name %}

<!-- tab First unique name 1 @ri:home-4-line -->

**This is Tab 1.**

<!-- endtab -->

<!-- tab Icon Test @ri:cloud-line -->

**This is Tab 2.**

<!-- endtab -->

<!-- tab -->

**This is Tab 3.**

<!-- endtab -->

{% endtabs %}

演示:

This is Tab 1.

This is Tab 2.

This is Tab 3.

更多 Volantis Tag 请查看:标签插件 - Volantis


Hexo 常用组件汇总
https://blog.xukaiyyds.cn/posts/430a879f/
作者
xukaiyyds
发布于
2021年10月16日
更新于
2024年3月16日
许可协议