Hexo 常用组件汇总

Fluid 组件

以下是 Fluid 主题内置的 Tag 插件，详细使用方法请查看：Fluid 配置指南

文本颜色

primary
secondary
success
danger
warning
info

1
2
3
4
5
6
<span class="text-primary">primary</span>
<span class="text-secondary">secondary</span>
<span class="text-success">success</span>
<span class="text-danger">danger</span>
<span class="text-warning">warning</span>
<span class="text-info">info</span>

行内标签

primary
default
info
success
warning
danger

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

或者：

1
2
3
4
5
6
<span class="label label-primary">primary</span>
<span class="label label-default">default</span>
<span class="label label-info">info</span>
<span class="label label-success">success</span>
<span class="label label-warning">warning</span>
<span class="label label-danger">danger</span>

便签

primary

secondary

success

danger

warning

info

light

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

或者：

1
2
3
4
5
6
7
<p class="note note-primary">primary</p>
<p class="note note-secondary">secondary</p>
<p class="note note-success">success</p>
<p class="note note-danger">danger</p>
<p class="note note-warning">warning</p>
<p class="note note-info">info</p>
<p class="note note-light">light</p>

按钮

1
{% btn https://xukaiyyds.cn, 个人主页, XKの主页 %}

或者：

1
<a class="btn" href="https://xukaiyyds.cn" title="XKの主页">个人主页</a>

组图

风景
风景
风景
星空
星空
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 %}

折叠块

演示

primary

default

info

success

warning

danger

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% fold primary @点击查看 %}
primary
{% endfold %}
{% fold default @点击查看 %}
default
{% endfold %}
{% fold info @点击查看 %}
info
{% endfold %}
{% fold success @点击查看 %}
success
{% endfold %}
{% fold warning @点击查看 %}
warning
{% endfold %}
{% fold danger @点击查看 %}
danger
{% endfold %}

勾选框

演示

项目1 项目2
工程1
工程2

使用

1
2
3
4
{% cb 项目1, true, true %}
{% cb 项目2, false, true %}
{% cb 工程1, true, false %}
{% cb 工程2, false, false %}

Volantis 组件

这里就需要使用 Hexo 注入器了，以折叠框与时间线为例，编写注入代码：

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

例如，创建一个 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;
  cursor: auto;
}

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

折叠框

默认打开的折叠框

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

默认关闭的折叠框

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

查看列表测试
  • 你好
  • hello
查看列表测试
  • 你好
  • hello
查看列表测试
  • 你好
  • hello
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 %}

时间线

标题

2022-10-16

内容

2021-10-16

内容

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

{% timenode 2022-10-16 %}

内容

{% endtimenode %}

{% timenode 2021-10-16 %}

内容

{% endtimenode %}

{% endtimeline %}

Tab 切换

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

This is Tab 1.

This is Tab 2.

This is Tab 3.

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

更多 Volantis Tag 请查看：Volantis 标签插件

Hexo使用指南
#Hexo #Tag组件
Hexo 常用组件汇总
https://blog.xukaiyyds.cn/posts/430a879f/
作者
xukaiyyds
发布于
2021年10月16日
许可协议