文件头

Page Front-matter

keyvalue
title标题
date日期
updated文章更新日期
type类型,tags,link,categories 这三个页面需要配置
comments是否显示评论,默认 true
description描述
top_img顶部图
mathjax数学公式
katex数学公式
asidetrue 表示显示右边信息卡片,默认值;false 表示不显示
aplayer在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)

Post Front-matter

keyvalue
title标题
date时间
updated文章更新日期
tags标签
categories分类
keywords关键字
description描述
top_img顶部图,除非特定需要,可以不写
comments是否显示评论(除非设置 false,可以不写)
cover缩略图
toc是否显示 toc (除非特定文章设置,可以不写)
toc_number是否显示 toc 数字 (除非特定文章设置,可以不写)
auto_open是否自动打开TOC(默认为设置中toc的auto_open配置)
copyright是否显示版权 (除非特定文章设置,可以不写)
mathjax数学公式
katex数学公式
hide(hidden)是否隐藏(true,false)
sticky文章置顶,数值越大越靠前
aplayer在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)

外挂标签

相册

1
2
3
{% gallery %}
markdown 图片格式
{% 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:图库名字
  • description:图库描述
  • link:连接到对应相册的地址
  • img-url:图库封面的地址

示例

1
2
3
4
5
6
7
8
<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper'
https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %} {% galleryGroup '漫威'
'关于漫威的图片' '/Gallery/marvel'
https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %} {% galleryGroup 'OH MY
GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl'
https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>

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

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

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

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

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

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

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

default

primary

success

info

warning

danger

primary

自定义图标(阿里图标)及颜色

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
/* default */
<div
class="note icon custom iconfont icon-QQ2"
style="background: #f7f7f7;border-left-color: #777;"
>
<p>default</p>
</div>
/* success */
<div
class="note icon custom iconfont icon-QQ2"
style="background: #eff8f0;border-left-color: #5cb85c;"
>
<p>success</p>
</div>
/* primary */
<div
class="note icon custom iconfont icon-QQ2"
style="background: #f5f0fa;border-left-color: #6f42c1;"
>
<p>primary</p>
</div>
/* info */
<div
class="note icon custom iconfont icon-QQ2"
style="background: #eef7fa;border-left-color: #428bca;"
>
<p>info</p>
</div>
/* warning */
<div
class="note icon custom iconfont icon-QQ2"
style="background: #fdf8ea;border-left-color: #f0ad4e;"
>
<p>warning</p>
</div>
/* danger */
<div
class="note icon custom iconfont icon-QQ2"
style="background: #fcf1f2;border-left-color: #d9534f;"
>
<p>danger</p>
</div>

default

success

primary

info

warning

danger

自定义图标(fontawesome5 图标)及颜色

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

info

自定义小标签

默认red

quote

info

done

success

danger

error

radiation

bug

idea-yellow

paperclip

todo

msg cyan

guide

download

up

undo

引用框

引用内容

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>

关于颜色及标记控制

  • 彩色图标

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    quote, info, warning, done/success, error/danger

    quote 蓝色引号
    info 蓝色叹号
    warning 黄色叹号
    done 绿色打钩
    success 绿色打钩
    error 红色禁止
    danger 红色打叉

  • 灰色图标

    也可以指定颜色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    radiation, bug, idea, link, paperclip, todo, msg, guide, download, up, undo

    radiation 核标记
    bug 爬虫
    idea 电灯泡
    link 锁链
    paperclip 回形针
    todo 勾选框
    msg 向右箭头
    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'><p>默认情况<p></div>
<div class='tip info'><p>info<p></div>
<div class='tip success'><p>success<p></div>
<div class='tip error'><p>error<p></div>
<div class='tip warning'><p>warning<p></div>
<div class='tip font5 fas fa-atom'><p>自定义font5图标<p></div>
<div class='tip custom icon-QQ2'><p>自定义iconfont图标<p></div>
<div class="tip wtgo font5 fas fa-bolt"><p>文字</p><p></p></div>
<div class="tip ban font5 fas fa-ban"><p>文字</p><p></p></div>
<div class="tip home font5 fas fa-home"><p>文字</p><p></p></div>
<div class="tip important font5 fas fa-home"><p>魔改标签4</p><p></p></div>
<div class="tip ref font5 fas fa-sync"><p>魔改标签5</p><p></p></div>
<div class="tip ffa font5 fas fa-cogs"><p>魔改标签6</p><p></p></div>
<div class="tip key font5 fas fa-key"><p>魔改标签7</p><p></p></div>
<div class="tip socd font5 fas fa-bell"><p>魔改标签8</p><p></p></div>
<div class="tip qq font5 fab fa-qq"><p>魔改标签9</p><p></p></div>

默认情况

info

success

error

warning

自定义fontawesome5图标

自定义fontawesome5图标

自定义iconfont图标

文字

文字

文字

魔改标签4

魔改标签5

魔改标签6

魔改标签7

魔改标签8

魔改标签9

小标签及边框颜色

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

1
2
3
4
5
6
<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>

自定义颜色

1
<span class="inline-tag" style="--Color:#881B12">自定义颜色小标签</span>

上边框

右边框

下边框

左边框

1
2
3
4
5
6
7
<p class="div-border [left|right|top|bottom] [red|green|blue|yellow|grey]">
语法
</p>
<p class="div-border top red">上边框</p>
<p class="div-border right red">右边框</p>
<p class="div-border bottom red">下边框</p>
<p class="div-border left red">左边框</p>

预设颜色分别为redgreenblueyellowgrey也就是小标签的五种颜色

自定义颜色

1
<p class="div-border left style="--Color:#881B12"">左边框</p>

全边框及自定义颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<p
class="div-border"
style="background-color: rgba(82,196,26,.1);border: 1px solid #52c41a;border-radius: 0.4rem;"
>
全边框
</p>
/* 或者如下写法 */
<p
style="background-color: rgba(82,196,26,.1);border: 1px solid #52c41a;border-radius: 0.4rem;display: block;padding: 10px;"
>
全边框
</p>
/* 内置样式 */
<p class="div-border green">绿色</p>
<p class="div-border red">红色</p>
<p class="div-border yellow">黄色</p>
<p class="div-border grey">灰色</p>
<p class="div-border blue">蓝色</p>

全边框

绿色

红色

黄色

灰色

蓝色

行内小标签

1
<u>下划线</u>

下划线

1
<emp>着重线</emp>

着重线

1
<wavy>波浪线</wavy>

波浪线

1
<del>删除线</del>

删除线

1
<kbd>command</kbd>

command

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

这里没有验证码

时间线

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

{% timenode 时间节点(标题) %}

正文内容

{% endtimenode %}

{% timenode 时间节点(标题) %}

正文内容

{% endtimenode %}

{% endtimeline %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% timeline 碎碎念 %}

{% timenode 2020-08-06 [连接测试](https://xiaokang.me) %}

今天是2020-08-06

{% endtimenode %}

{% timenode 2020-08-05 [连接测试](https://xiaokang.me) %}

今天是2020-08-05

{% endtimenode %}

{% endtimeline %}

碎碎念

2020-08-06 连接测试

今天是2020-08-06

2020-08-05 连接测试

今天是2020-08-05

隐藏内容

隐藏一些内容,需要点击才能插看

inline 在文本里面添加按钮隐藏内容,只限文字

( content 不能包含当引号,可用 &apos;)

block 独立的 block 隐藏内容,可以隐藏很多内容,包括图片,`代码块等等

1
2
3
4
5
{% hideInline content,display,bg,color %}

{% hideBlock display,bg,color %}
content
{% endhideBlock %}
  • content: 文本内容
  • display: 按钮显示的文字 (可选)
  • bg: 按钮的背景颜色 (可选)
  • color: 按钮文字的颜色 (可选)

示例:

隐藏 inline 内容 这是隐藏内容

隐藏 block 内容

1
print(666)

hideToggle

1
2
3
4
5
6
{% hideToggle display,bg,color %}
content
{% endhideToggle %}

<div class="hide-toggle"><div class="hide-button toggle-title" style=""><i class="fa fa-caret-right fa-fw"></i><span>文字</span></div>
<div class="hide-content"><p>默认效果</p></div></div>
  • content: 文本内容
  • display: 显示的文字 (可选)
  • bg: 背景颜色 (可选)
  • color: 文字的颜色 (可选)
文字

默认效果

mermaid

使用 mermaid 标签可以绘制 Flowchart(流程图)、Sequence diagram(时序图 )、Class Diagram(类别图)、State Diagram(状态图)、Gantt(甘特图)和 Pie Chart(圆形图),具体可以查看mermaid 文档

写法

1
2
3
{% mermaid %}
内容
{% endmermaid %}

示例

1
2
3
4
5
6
7
8
{% mermaid %}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{% endmermaid %}

Checkbox & Radio

1
{% checkbox 样式参数(可选), 文本(支持简单md) %}

参数列表:

  • 颜色

    red, yellow, green, cyan, blue

  • 样式

    plus, minus, times

  • 选中状态

    checked

tag 标签格式

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, 蓝色 %}

html 格式

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
17
{% 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/留空

demo1

1
2
3
4
5
This is my website, click the button {% btn 'http://www.antmoe.com',小康博客 %}
This is my website, click the button {% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right %}
This is my website, click the button {% btn 'http://www.antmoe.com',小康博客,,outline %}
This is my website, click the button {% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,larger %}
1
2
3
4
5
6
7
8
9
<a class="btn-beautify button--animated " href="http://www.antmoe.com" target="_blank" rel="noopener" title="小康博客">小康博客 </a>

<a class="btn-beautify button--animated " href="http://www.antmoe.com" target="_blank" rel="noopener" title="小康博客"><i class="far fa-hand-point-right fa-fw"></i> 小康博客 </a>

<a class="btn-beautify button--animated outline" href="http://www.antmoe.com" target="_blank" rel="noopener" title="小康博客">小康博客 </a>

<a class="btn-beautify button--animated outline" href="http://www.antmoe.com" target="_blank" rel="noopener" title="小康博客"><i class="far fa-hand-point-right fa-fw"></i> 小康博客 </a>

<a class="btn-beautify button--animated larger" href="http://www.antmoe.com" target="_blank" rel="noopener" title="小康博客"><i class="far fa-hand-point-right fa-fw"></i> 小康博客 </a>

小康博客

小康博客

小康博客

小康博客

小康博客

demo2

1
2
3
{% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,block %}
{% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,block center larger %}
{% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,block right outline larger %}
1
2
3
4
5
<a class="btn-beautify button--animated block" href="http://www.antmoe.com" title="小康博客"><i class="far fa-hand-point-right fa-fw"></i> 小康博客 </a>

<a class="btn-beautify button--animated block center larger" href="http://www.antmoe.com" title="小康博客"><i class="far fa-hand-point-right fa-fw"></i> 小康博客 </a>

<a class="btn-beautify button--animated block right outline larger" href="http://www.antmoe.com" title="小康博客"><i class="far fa-hand-point-right fa-fw"></i> 小康博客 </a>

小康博客

小康博客

小康博客

demo3

1
2
3
4
5
6
7
{% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,larger %}
{% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,blue larger %}
{% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,pink larger %}
{% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,red larger %}
{% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,purple larger %}
{% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,orange larger %}
{% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,green larger %}
小康博客 小康博客 小康博客 小康博客 小康博客 小康博客 小康博客

demo4

1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,outline larger %}
{% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,outline blue larger %}
{% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,outline pink larger %}
{% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,outline red larger %}
{% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,outline purple larger %}
{% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,outline orange larger %}
{% btn 'http://www.antmoe.com',小康博客,far fa-hand-point-right,outline green larger %}
</div>

富文本按钮

1
2
3
4
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}

参数列表:

  • 圆角样式

    rounded, circle

  • 布局方式

    默认为自动宽度,适合视野内只有一两个的情况。

    参数含义
    wide宽一点的按钮
    fill填充布局,自动铺满至少一行,多了会换行。
    center居中,按钮之间是固定间距。
    around居中分散
    grid2等宽最多 2 列,屏幕变窄会适当减少列数。
    grid3等宽最多 3 列,屏幕变窄会适当减少列数。
    grid4等宽最多 4 列,屏幕变窄会适当减少列数。
    grid5等宽最多 5 列,屏幕变窄会适当减少列数。
  • 增加文字样式

    可以在容器内增加 标题描述文字

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
{% btns circle grid5 %}
{% cell Dreamy.TZK, https://www.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% cell Dreamy.TZK, https://www.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% cell Dreamy.TZK, https://www.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% cell Dreamy.TZK, https://www.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% cell Dreamy.TZK, https://www.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% endbtns %}

{% btns rounded grid5 %}
{% cell 下载源码, /, fa fa-download %}
{% cell 查看文档, /, fa fa-book %}
{% endbtns %}

{% btns circle center grid5 %}
<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
<i class='fa fa-apple'></i>
<b>心率管家</b>
{% p red, 专业版 %}
<img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'>
</a>
<a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'>
<i class='fa fa-apple'></i>
<b>心率管家</b>
{% p green, 免费版 %}
<img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}

Tab

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name : Unique name of tabs block tag without comma.
Will be used in #id's as prefix for each tab with their index numbers.
If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
Only for current url of post/page must be unique!
[index] : Index number of active tab.
If not specified, first tab (1) will be selected.
If index is -1, no tab will be selected. It's will be something like spoiler.
Optional parameter.
[Tab caption] : Caption of current tab.
If not caption specified, unique name with tab index suffix will be used as caption of tab.
If not caption specified, but specified icon, caption will empty.
Optional parameter.
[@icon] : FontAwesome icon name (full-name, look like 'fas fa-font')
Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
Optional parameter.
  • tab-id

    必填,如果一个页面有多个 tabs 时,tab-id 不能重复。

  • tab-name

    标签文本。

这里面写内容,支持的语法格式有限,请尽量不要写太过复杂的东西。

预设方案1:预设选择第一个【默认】

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

预设方案2:预设选择tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test2, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

预设方案3:没有预设值

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test3, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

预设方案4:自定义Tab名 + 只有icon + icon和Tab名

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test4 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

Folding

1
2
3
4
5
{% folding 参数(可选), 标题 %}

![](https://cdn.jsdelivr.net/gh/blogimg/picbed@master/2020/04/11/da1fc8df33522db88a79b935010a5706.png)

{% endfolding %}

html 格式语法

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/blogimg/picbed@master/2020/04/11/da1fc8df33522db88a79b935010a5706.png"
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/xaoxuu/cdn-assets/emoji/tieba/%E6%BB%91%E7%A8%BD.png'
style='height:24px'></span
>
</p>
</div>
</details>
</div>
</details>
</div>
</details>

参数位置可以填写颜色和状态,多个参数用空格隔开。

  • 颜色

    blue, cyan, green, yellow, red

  • 状态

    状态填写 open 代表默认打开。

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/blogimg/picbed@master/2020/04/11/da1fc8df33522db88a79b935010a5706.png)

{% endfolding %}

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

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

{% endfolding %}

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

{% endfolding %}

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

- haha
- hehe

{% endfolding %}

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

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

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

hahaha <span><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

查看图片测试

查看默认打开的折叠框

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

查看代码测试

查看列表测试

  • haha
  • hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

Fancybox

1
2
3
4
{% 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)
{% endfancybox %}
  • 对齐方向

    left, center, right

  • 缩放

    stretch

  • 列数

    逗号后面直接写列数,支持 2 ~ 8 列。设定列列数之后就是「多行多图」布局,此时图片默认左对齐。为了避免图片大小不一,建议搭配 stretch 来时图片放大填充。

单张图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="gallery ">
<p>
<div class="fancybox">
<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg"
alt="图片描述">
<span class="image-caption">
图片描述
</span>
</div>
</p>
</div>
<!-- TAG写法(不建议)
{% fancybox %}
![图片描述](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfancybox %}
-->

一行多个图片(不换行)

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
<div class="gallery ">
<p>
<div class="fancybox">
<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg"
alt="图片描述">
<span class="image-caption">图片描述</span>
</div><br>
<div class="fancybox">
<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg"
alt="图片描述">
<span class="image-caption">图片描述</span>
</div><br>
<div class="fancybox">
<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg"
alt="图片描述">
<span class="image-caption">图片描述</span>
</div>
</p>
</div>

<!-- TAG写法 不推荐
{% 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 %}
-->

多行多个图片(每行 2 ~ 8 个图片)

1
2
3
4
5
6
7
8
9
10
{% fancybox stretch, 4 %}
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
{% endfancybox %}

文章内音乐

Aplayer

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
{% aplayerlist %}
{
"narrow": false,// (可选)播放器袖珍风格
"autoplay": true,// (可选) 自动播放,移动端浏览器暂时不支持此功能
"mode": "random",// (可选)曲目循环类型,有 'random'(随机播放), 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放), 默认:'circulation'
"showlrc": 3,// (可选)歌词显示配置项,可选项有:1,2,3
"mutex": true,// (可选)该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停
"theme": "#e6d0b2",// (可选)播放器风格色彩设置,默认:#b7daff
"preload": "metadata",// (可选)音乐文件预载入模式,可选项: 'none' 'metadata' 'auto', 默认: 'auto'
"listmaxheight": "513px",// (可选) 该播放列表的最大长度
"music": [
{
"title": "CoCo",
"author": "Jeff Williams",
"url": "caffeine.mp3",
"pic": "caffeine.jpeg",
"lrc": "caffeine.txt"
},
{
"title": "アイロニ",
"author": "鹿乃",
"url": "irony.mp3",
"pic": "irony.jpg"
}
]
}
{% endaplayerlist %}

简单示例

1
{% meting "60198" "netease" "playlist" %}

进阶示例

1
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

Audio

1
2
3
4
5
6
7
<audio controls="" preload="" __idm_id__="269361153">
<source
src="http://music.163.com/song/media/outer/url?id=574566207.mp3"
type="audio/mp3"
/>
Your browser does not support the audio tag.
</audio>

轮播图

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
<div class="demo"></div>
<script>
function tt() {
$(".demo").slider({
imgList: [
{
img:
"https://cdn.jsdelivr.net/gh/blogimg/picbed@master/2020/04/13/2a877ea5da1292c817cbc2a254c01c31.png",
a: "跳转url地址",
},
{
img:
"https://cdn.jsdelivr.net/gh/blogimg/picbed@master/2020/04/13/5005109d1aa2ffd28984c2b02b8cbfbe.png",
a: "跳转url地址",
},
{
img:
"https://cdn.jsdelivr.net/gh/blogimg/picbed@master/2020/04/13/163a2ade4361d1ed705ed523091af67e.png",
a: "跳转url地址",
},
], //图片的列表,a属性里面存放的是网络地址,img存放的是图片地址
width: "100%", //图片的宽
height: 500, //图片的高
isAuto: false, //是否自动轮播
moveTime: 3000, //运动时间
direction: "right", //轮播的方向
btnWidth: 30, //按钮的宽
btnHeight: 30, //按钮的高
spanWidth: 10, //span按钮的宽
spanHeight: 10, //span按钮的高
spanColor: "#fff", //span按钮的颜色
activeSpanColor: "red", //选中的span颜色
btnBackgroundColor: "rgba(0, 0, 0, 0.3)", //两侧按钮的颜色
spanRadius: "50%", //span按钮的圆角程度
spanMargin: 3, //span之间的距离
});
}
window.addEventListener("DOMContentLoaded", tt);
// 或者 window.addEventListener('load',tt)
</script>