Hexo编写文章时所用的标签集合,已整理在下方

使用了Tab标签-点击按钮可展开

Hexo 编写文章格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
---
title: //标题
date: //例如:2020-03-02 21:31
updated: //更新时间
tags: [ , ] //便签
categories: //分类
keywords: //关键词
description: //文章描述
top_img: //顶部图片
comments: //评论
cover: //封面图
toc:
toc_number : false /true
copyright: //版权
highlight_shrink: //表示代码框是否收缩,默认“false”
auto_open: toc
sticky: 置顶操作数值越大越靠前
---
keyvalue
title标题
date发表日期
updated文章更新日期
type类型,tags,link,categories 分别是“标签”,“友链”,“分类” 加“”引号
comments是否显示评论,默认 true
description描述
top_img顶部图
mathjax数学公式
katex数学公式
asidetrue 表示显示右边信息卡片,默认值;false 表示不显示
highlight_shrink代码高亮是否收缩,默认“false”

Note标签写法

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
<div class="note default icon flat"><p>default</p></div>
{% note default icon %}
default
{% endnote %}

<div class="note primary icon flat"><p>primary</p></div>
{% note primary icon %}
primary
{% endnote %}

<div class="note success icon flat"><p>success</p></div>
{% note success icon %}
success
{% endnote %}

<div class="note info icon flat"><p>info</p></div>
{% note info icon %}
info
{% endnote %}

<div class="note warning icon flat"><p>warning</p></div>
{% note warning icon %}
warning
{% endnote %}

<div class="note danger icon flat"><p>danger</p></div>
{% note danger icon %}
danger
{% endnote %}

<div class="note primary no-icon flat"><p>primary</p></div>
{% note primary no-icon%}
无icon
{% endnote %}

default

default

primary

primary

success

success

info

info

warning

warning

danger

danger

primary

无icon

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
/* 链接 */
<div
class="note icon font5 fa-fw fa fa-link"
style="background: #eef7fa;border-left-color: #428bca;"
>
<p>info</p>
</div>
/* 小喇叭 */
<div
class="note icon font5 fas fa-bullhorn"
style="background: #fcf1f2;border-left-color: #d9534f;"
>
<p>info</p>
</div>
/* BUG */
<div
class="note icon font5 fas fa-bug"
style="background: #fcf1f2;border-left-color: #d9534f;"
>
<p>info</p>
</div>
/* idea */
<div
class="note icon font5 far fa-lightbulb"
style="background: #fdf8ea;border-left-color: #f0ad4e;"
>
<p>info</p>
</div>
/* 小喇叭 */

info

/* BUG */

info

/* idea */

info

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="snote red"><p>默认red</p></div>
<div class="snote quote"><p>quote</p></div>
<div class="snote info"><p>info</p></div>
<div class="snote done"><p>done</p></div>
<div class="snote success"><p>success</p></div>
<div class="snote danger"><p>danger</p></div>
<div class="snote error"><p>error</p></div>
<div class="snote radiation"><p>radiation</p></div>
<div class="snote bug"><p>bug</p></div>
<div class="snote idea yellow"><p>idea-yellow</p></div>
<div class="snote link blue"><p>link- blue</p></div>
<div class="snote paperclip"><p>paperclip</p></div>
<div class="snote todo"><p>todo</p></div>
<div class="snote msg cyan"><p>msg cyan</p></div>
<div class="snote guide"><p>guide</p></div>
<div class="snote download"><p>download</p></div>
<div class="snote up"><p>up</p></div>
<div class="snote undo"><p>undo</p></div>
/* 引用 */
<div class="snote quote"><p class='p subtitle'>小标题</p>

这是个引用

</div>

默认red

quote

info

done

success

danger

error

radiation

bug

idea-yellow

paperclip

todo

msg cyan

guide

download

up

undo

/* 引用 */

小标题

这是个引用

- 颜色
1
clear, light, gray, red, yellow, green, cyan, blue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class='tip faa-horizontal animated'><p>默认情况<p></div>
<div class='tip info faa-horizontal animated'><p>info<p></div>
<div class='tip success faa-horizontal animated'><p>success<p></div>
<div class='tip error faa-horizontal animated'><p>error<p></div>
<div class='tip warning faa-horizontal animated'><p>warning<p></div>
<div class='tip font5 fas fa-atom faa-horizontal animated'><p>自定义font5图标<p></div>
<div class='tip custom icon-QQ2 faa-horizontal animated'><p>自定义iconfont图标<p></div>
<div class="tip wtgo font5 fas fa-bolt faa-horizontal animated"><p>文字</p><p></p></div>
<div class="tip ban font5 fas fa-ban faa-horizontal animated"><p>文字</p><p></p></div>
<div class="tip home font5 fas fa-home faa-horizontal animated"><p>文字</p><p></p></div>
<div class="tip important font5 fas fa-home faa-horizontal animated"><p>魔改标签4</p><p></p></div>
<div class="tip ref font5 fas fa-sync faa-horizontal animated"><p>魔改标签5</p><p></p></div>
<div class="tip ffa font5 fas fa-cogs faa-horizontal animated"><p>魔改标签6</p><p></p></div>
<div class="tip key font5 fas fa-key faa-horizontal animated"><p>魔改标签7</p><p></p></div>
<div class="tip socd font5 fas fa-bell faa-horizontal animated"><p>魔改标签8</p><p></p></div>
<div class="tip qq font5 fab fa-qq faa-horizontal animated"><p>魔改标签9</p><p></p></div>

默认情况

info

success

error

warning

自定义font5图标

自定义iconfont图标

文字

文字

文字

魔改标签4

魔改标签5

魔改标签6

魔改标签7

魔改标签8

魔改标签9

语法
红色小标签
绿色小标签
蓝色小标签
黄色小标签
灰色小标签

1
2
3
4
5
6
7
<span class="inline-tag [red|green|blue|yellow|grey]">语法</span>
<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>
<span class="inline-tag" style="--Color:#881B12">自定义颜色小标签</span>

行内小标签

下划线

1
<u>下划线</u>

着重线

1
<emp>着重线</emp>

波浪线

1
<wavy>波浪线</wavy>

删除线

1
<del>删除线</del>

command

1
<kbd>command</kbd>

这里没有验证码

1
<psw>这里没有验证码</psw>

隐藏内容写法

隐藏属性含义
content文本内容
dispaly按钮显示的文字(可选)
bg按钮的颜色
color按钮文字的颜色(可选)
inline只限文字
hideblock可以隐藏图片,代码块等
1
2
3
4
5
{% hideInline content,display,bg,color %}

{% hideBlock display,bg,color %}
content
{% endhideBlock %}
  • 实例
  1. 隐藏inline内容
    display
  2. 隐藏代码块
    1
    content
属性文本内容
content文本内容
display显示的文字(可选)
bg背景颜色(可选)
color文字颜色(可选)
display

content

文字

默认效果

Checkbox & Radio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% 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 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}
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
<div class="checkbox">
<input type="checkbox" />
<p>纯文本测试</p>
</div>

<div class="checkbox checked">
<input type="checkbox" checked />
<p>
支持简单的
<a
href="https://guides.github.com/features/mastering-markdown/"
target="_blank"
rel="noopener"
>markdown</a
>
语法
</p>
</div>

<div class="checkbox red">
<input type="checkbox" />
<p>支持自定义颜色</p>
</div>

<div class="checkbox green checked">
<input type="checkbox" checked />
<p>绿色 + 默认选中</p>
</div>

<div class="checkbox yellow checked">
<input type="checkbox" checked />
<p>黄色 + 默认选中</p>
</div>

<div class="checkbox cyan checked">
<input type="checkbox" checked />
<p>青色 + 默认选中</p>
</div>

<div class="checkbox blue checked">
<input type="checkbox" checked />
<p>蓝色 + 默认选中</p>
</div>

<div class="checkbox plus green checked">
<input type="checkbox" checked />
<p>增加</p>
</div>

<div class="checkbox minus yellow checked">
<input type="checkbox" checked />
<p>减少</p>
</div>

<div class="checkbox times red checked">
<input type="checkbox" checked />
<p></p>
</div>

<div class="checkbox">
<input type="radio" />
<p>纯文本测试</p>
</div>

<div class="checkbox checked">
<input type="radio" checked />
<p>
支持简单的
<a
href="https://guides.github.com/features/mastering-markdown/"
target="_blank"
rel="noopener"
>markdown</a
>
语法
</p>
</div>

<div class="checkbox red">
<input type="radio" />
<p>支持自定义颜色</p>
</div>

<div class="checkbox green">
<input type="radio" />
<p>绿色</p>
</div>

<div class="checkbox yellow">
<input type="radio" />
<p>黄色</p>
</div>

<div class="checkbox cyan">
<input type="radio" />
<p>青色</p>
</div>

<div class="checkbox blue">
<input type="radio" />
<p>蓝色</p>
</div>

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% 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/留空

Folding写法

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
{% folding 查看图片测试 %}

![](https://cdn.jsdelivr.net/gh/Rr210/hexofixed@1.07.01/img/api/phone/5031c5f90d9148b9.jpg)

{% endfolding %}

{% folding cyan open, 查看默认打开的折叠框 %}

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

{% endfolding %}

{% folding green, 查看代码测试 %}

{% endfolding %}

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

- haha
- hehe

{% endfolding %}

{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

嘿嘿 <span><img src='https://cdn.jsdelivr.net/gh/Rr210/hexofixed@1.07.01/img/api/phone/5031c5f90d9148b9.jpg' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}
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
<details>
<summary>
<p>查看图片测试</p>
</summary>
<div class="content">
<p>
<img
src=https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/loading.gif
data-src="https://cdn.jsdelivr.net/gh/Rr210/hexofixed@1.07.01/img/api/phone/5031c5f90d9148b9.jpg"
alt="" />
</p>
</div>
</details>

<details cyan open>
<summary>
<p>查看默认打开的折叠框</p>
</summary>
<div class="content">
<p>这是一个默认打开的折叠框。</p>
</div>
</details>

<details green>
<summary>
<p>查看代码测试</p>
</summary>
<div class="content"></div>
</details>

<details yellow>
<summary>
<p>查看列表测试</p>
</summary>
<div class="content">
<ul>
<li>haha</li>
<li>hehe</li>
</ul>
</div>
</details>

<details red>
<summary>
<p>查看嵌套测试</p>
</summary>
<div class="content">
<details blue>
<summary>
<p>查看嵌套测试2</p>
</summary>
<div class="content">
<details>
<summary>
<p>查看嵌套测试3</p>
</summary>
<div class="content">
<p>
hahaha
<span
><img
src=https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/loading.gif
data-src='https://cdn.jsdelivr.net/gh/Rr210/hexofixed@1.07.01/img/api/phone/5031c5f90d9148b9.jpg'
style='height:24px'></span
>
</p>
</div>
</details>
</div>
</details>
</div>
</details>

查看图片测试

查看默认打开的折叠框

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

查看列表测试

  • haha
  • hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

嘿嘿

媒体写法

图片-Photo 视频-video 音频-Audio

图片-Photo写法

  • 第一种
1
2
3
4
5
6
7
8
9
{% image https://cdn.jsdelivr.net/gh/Rr210/hexofixed@1.07.01/img/api/phone/558c3dfea39cb752.jpg 图片描述。 %}

指定宽度:

{% image https://cdn.jsdelivr.net/gh/Rr210/hexofixed@1.07.01/img/api/phone/558c3dfea39cb752.jpg 300px %}

指定宽度并添加描述:

{% image https://cdn.jsdelivr.net/gh/Rr210/hexofixed@1.07.01/img/api/phone/558c3dfea39cb752.jpg 300px 图片描述。 %}
  • 第二种
1
2
3
4

{% fancybox %}
![图片描述](https://cdn.jsdelivr.net/gh/Rr210/hexofixed@1.07.01/img/api/phone/558c3dfea39cb752.jpg)
{% endfancybox %}
1
2
3
4
5
{% fancybox %}
![图片描述](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![图片描述](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
![图片描述](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg)
{% endfancybox %}
1
2
3
4
5
6
7
8
9
10
11

{% fancybox stretch, 4 %}
![](https://cdn.jsdelivr.net/gh/Rr210/hexofixed@1.07.01/img/api/phone/181329e200ba1c11.jpg)
![](https://cdn.jsdelivr.net/gh/Rr210/hexofixed@1.07.01/img/api/phone/26836dd87c0d57a5.jpg)
![](https://cdn.jsdelivr.net/gh/Rr210/hexofixed@1.07.01/img/api/phone/2ae5b713777378e1.jpg)
![](https://cdn.jsdelivr.net/gh/Rr210/hexofixed@1.07.01/img/api/phone/1106c2f5b3431d2a.jpg)
![](https://cdn.jsdelivr.net/gh/Rr210/hexofixed@1.07.01/img/api/phone/181329e200ba1c11.jpg)
![](https://cdn.jsdelivr.net/gh/Rr210/hexofixed@1.07.01/img/api/phone/26836dd87c0d57a5.jpg)
![](https://cdn.jsdelivr.net/gh/Rr210/hexofixed@1.07.01/img/api/phone/2ae5b713777378e1.jpg)
![](https://cdn.jsdelivr.net/gh/Rr210/hexofixed@1.07.01/img/api/phone/1106c2f5b3431d2a.jpg)
{% endfancybox %}

视频-video写法

  • 100% 宽度
1
{% video https://cdn.jsdelivr.net/gh/Rr210/hexofixed@3.06/img/video/1.mp4 %}
  • 50% 宽度
1
2
3
4
5
6
{% videos, 2 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/hexofixed@3.06/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/hexofixed@3.06/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/hexofixed@3.06/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/hexofixed@3.06/img/video/1.mp4 %}
{% endvideos %}
  • 25% 宽度
1
2
3
4
5
6
7
8
9
10
{% videos, 4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/hexofixed@3.06/img/video/1.mp4%}
{% video https://cdn.jsdelivr.net/gh/Rr210/hexofixed@3.06/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/hexofixed@3.06/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/hexofixed@3.06/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/hexofixed@3.06/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/hexofixed@3.06/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/hexofixed@3.06/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/hexofixed@3.06/img/video/1.mp4 %}
{% endvideos %}
  • 单个视频
1
{% video 视频链接 %}
  • 多个视频
1
2
3
4
5
{% videos 对齐方向, 列数 %}
{% video 视频链接 %}
{% video 视频链接 %}
{% video 视频链接 %}
{% endvideos %}

对齐方向:left, center, right

列数:逗号后面直接写列数,支持 1 ~ 4 列。

音频-Audio

1
{% audio https://cdn.mr90.top/music/tazhishijingguo.mp3 %}
1
2
3
4
5
6
7
<audio controls="" preload="" __idm_id__="269361153">
<source
src="https://cdn.mr90.top/music/tazhishijingguo.mp3"
type="audio/mp3"
/>
Your browser does not support the audio tag.
</audio>
1
{% audio 音频链接 %}

任意元素动画

相册图库写法

1
2
3
{% gallery %}
图片使用md格式
{% endgallery %}
1
2
3
4
<div class="gallery-group-main">
{% galleryGroup name description link img-url %} {% galleryGroup name
description link img-url %} {% galleryGroup name description link img-url %}
</div>
属性含义
name图库的名称
link链接对应的相册地址可以是页面也可以是文章页(或者其他图库地址)
img-url图片封面的地址
description图库的描述
注意事项加引号使用

查看图片测试