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

/* 小喇叭 */

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

link- blue

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/留空
Harryの心阁 Harryの心阁 Harryの心阁 Harryの心阁 Harryの心阁 Harryの心阁 Harryの心阁

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/[email protected]/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/[email protected]/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/[email protected]/Hexo/img/loading.gif
      data-src="https://cdn.jsdelivr.net/gh/Rr210/[email protected]/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/[email protected]/Hexo/img/loading.gif
                data-src='https://cdn.jsdelivr.net/gh/Rr210/[email protected]/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/[email protected]/img/api/phone/558c3dfea39cb752.jpg 图片描述。 %}

指定宽度：

{% image https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/api/phone/558c3dfea39cb752.jpg 300px %}

指定宽度并添加描述：

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

{% fancybox %}
![图片描述](https://cdn.jsdelivr.net/gh/Rr210/[email protected]/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/[email protected]/img/api/phone/181329e200ba1c11.jpg)
![](https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/api/phone/26836dd87c0d57a5.jpg)
![](https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/api/phone/2ae5b713777378e1.jpg)
![](https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/api/phone/1106c2f5b3431d2a.jpg)
![](https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/api/phone/181329e200ba1c11.jpg)
![](https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/api/phone/26836dd87c0d57a5.jpg)
![](https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/api/phone/2ae5b713777378e1.jpg)
![](https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/api/phone/1106c2f5b3431d2a.jpg)
{% endfancybox %}








视频-video写法

  • 100% 宽度
1
{% video https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/video/1.mp4 %}
  • 50% 宽度
1
2
3
4
5
6
{% videos, 2 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/[email protected]/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/[email protected]/img/video/1.mp4%}
{% video https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/[email protected]/img/video/1.mp4 %}
{% video https://cdn.jsdelivr.net/gh/Rr210/[email protected]/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图库的描述
注意事项加引号使用

查看图片测试