Hexo 常用组件汇总

Fluid 组件

行内标签

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

便签

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
{% 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 文件。

例如，创建一个 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 %}

时间线

标题

2023-10-16

内容

2022-10-16

内容

2021-10-16

内容

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

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日
许可协议