文件头

Page Front-matter

写法解释
title【必需】页面标题
date【必需】页面创建日期
type【必需】标籤、分类和友情链接三个页面需要配置
updated【可选】页面更新日期
description【可选】页面描述
keywords【可选】页面关键字
comments【可选】显示页面评论模块(默认 true)
top_img【可选】页面顶部图片
mathjax【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aside【可选】显示侧边栏 (默认 true)
aplayer【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)

Post Front-matter

写法解释
title【必需】文章标题
date【必需】文章创建日期
updated【可选】文章更新日期
tags【可选】文章标籤
categories【可选】文章分类
keywords【可选】文章关键字
description【可选】文章描述
top_img【可选】文章顶部图片
cover【可选】文章缩略图(如果没有设置 top_img,文章页顶部将显示缩略图，可设为 false/图片地址/留空)
comments【可选】显示文章评论模块(默认 true)
toc【可选】显示文章 TOC(默认为设置中 toc 的 enable 配置)
toc_number【可选】显示 toc_number(默认为设置中 toc 的 number 配置)
copyright【可选】显示文章版权模块(默认为设置中 post_copyright 的 enable 配置)
copyright_author【可选】文章版权模块的文章作者
copyright_author_href【可选】文章版权模块的文章作者链接
copyright_url【可选】文章版权模块的文章连结链接
copyright_info【可选】文章版权模块的版权声明文字
mathjax【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aplayer【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)
aside【可选】显示侧边栏 (默认 true)
hide【可选】隐藏文章
sticky【可选】文章置顶，值越大越考上

外挂标签

相册

1
2
3
{% gallery %}
markdown 图片格式
{% endgallery %}
[{"url":"https://tva1.sinaimg.cn/large/832afe33ly1gbi87185y4g209g09gmy4.gif","alt":"loading5.gif"},{"url":"https://tva1.sinaimg.cn/large/832afe33ly1gbi8718jtpg20r00lc776.gif","alt":"loading1.gif"},{"url":"https://tva1.sinaimg.cn/large/832afe33ly1gbi8718495g20b40b4weq.gif","alt":"loading2.gif"},{"url":"https://tva1.sinaimg.cn/large/832afe33ly1gbi8718vdsg20ee0d4gmz.gif","alt":"loading3.gif"},{"url":"https://tva1.sinaimg.cn/large/832afe33ly1gbi87195tcg20m80godif.gif","alt":"loading4.gif"}]

相册图库

写法

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
{% note simple %}
默认 提示块标签
{% endnote %}

{% note default simple %}
default 提示块标签
{% endnote %}

{% note primary simple %}
primary 提示块标签
{% endnote %}

{% note success simple %}
success 提示块标签
{% endnote %}

{% note info simple %}
info 提示块标签
{% endnote %}

{% note warning simple %}
warning 提示块标签
{% endnote %}

{% note danger simple %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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
{% note modern %}
默认 提示块标签
{% endnote %}

{% note default modern %}
default 提示块标签
{% endnote %}

{% note primary modern %}
primary 提示块标签
{% endnote %}

{% note success modern %}
success 提示块标签
{% endnote %}

{% note info modern %}
info 提示块标签
{% endnote %}

{% note warning modern %}
warning 提示块标签
{% endnote %}

{% note danger modern %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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
{% note flat %}
默认 提示块标签
{% endnote %}

{% note default flat %}
default 提示块标签
{% endnote %}

{% note primary flat %}
primary 提示块标签
{% endnote %}

{% note success flat %}
success 提示块标签
{% endnote %}

{% note info flat %}
info 提示块标签
{% endnote %}

{% note warning flat %}
warning 提示块标签
{% endnote %}

{% note danger flat %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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
{% note disabled %}
默认 提示块标签
{% endnote %}

{% note default disabled %}
default 提示块标签
{% endnote %}

{% note primary disabled %}
primary 提示块标签
{% endnote %}

{% note success disabled %}
success 提示块标签
{% endnote %}

{% note info disabled %}
info 提示块标签
{% endnote %}

{% note warning disabled %}
warning 提示块标签
{% endnote %}

{% note danger disabled %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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
{% note no-icon %}
默认 提示块标签
{% endnote %}

{% note default no-icon %}
default 提示块标签
{% endnote %}

{% note primary no-icon %}
primary 提示块标签
{% endnote %}

{% note success no-icon %}
success 提示块标签
{% endnote %}

{% note info no-icon %}
info 提示块标签
{% endnote %}

{% note warning no-icon %}
warning 提示块标签
{% endnote %}

{% note danger no-icon %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

自定义图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' simple %}
你是刷 Visa 还是是 UnionPay
{% endnote %}
{% note red 'fas fa-bullhorn' simple %}
2021 年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' simple %}
小心开车 安全至上
{% endnote %}
{% note green 'fas fa-fan' simple%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' simple %}
该充电了哦！
{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}
剪刀石頭布
{% endnote %}
{% note blue 'fab fa-internet-explorer' simple %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 还是是 UnionPay

2021 年快到了…

小心开车 安全至上

这是三片呢？还是四片？

该充电了哦！

剪刀石頭布

前端最討厭的瀏覽器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' modern %}
你是刷 Visa 还是是 UnionPay
{% endnote %}
{% note red 'fas fa-bullhorn' modern %}
2021 年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' modern %}
小心开车 安全至上
{% endnote %}
{% note green 'fas fa-fan' modern%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' modern %}
该充电了哦！
{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}
剪刀石頭布
{% endnote %}
{% note blue 'fab fa-internet-explorer' modern %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 还是是 UnionPay

2021 年快到了…

小心开车 安全至上

这是三片呢？还是四片？

该充电了哦！

剪刀石頭布

前端最討厭的瀏覽器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' flat %}
你是刷 Visa 还是是 UnionPay
{% endnote %}
{% note red 'fas fa-bullhorn' flat %}
2021 年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' flat %}
小心开车 安全至上
{% endnote %}
{% note green 'fas fa-fan' flat%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' flat %}
该充电了哦！
{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}
剪刀石頭布
{% endnote %}
{% note blue 'fab fa-internet-explorer' flat %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 还是是 UnionPay

2021 年快到了…

小心开车 安全至上

这是三片呢？还是四片？

该充电了哦！

剪刀石頭布

前端最討厭的瀏覽器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' disabled  %}
你是刷 Visa 还是是 UnionPay
{% endnote %}
{% note red 'fas fa-bullhorn' disabled  %}
2021 年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' disabled  %}
小心开车 安全至上
{% endnote %}
{% note green 'fas fa-fan' disabled %}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' disabled  %}
该充电了哦！
{% endnote %}
{% note purple 'far fa-hand-scissors' disabled  %}
剪刀石頭布
{% endnote %}
{% note blue 'fab fa-internet-explorer' disabled  %}
前端最討厭的瀏覽器
{% endnote %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue no-icon %}
2021 年快到了....
{% endnote %}
{% note pink no-icon %}
小心开车 安全至上
{% endnote %}
{% note red no-icon %}
这是三片呢？还是四片？
{% endnote %}
{% note orange no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple no-icon %}
剪刀石头布
{% endnote %}
{% note green no-icon %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021 年快到了…

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

小标签及边框颜色

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

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
臣亮言：{% label 先帝 %}創業未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此誠{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈於內；{% label 忠志之士 purple %}，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。
宮中、府中，俱為一體；陟罰臧否，不宜異同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。
1
{% label text color %}
参数解释
text文字
color可选背景颜色，默认default
default/blue/pink/red/purple/orange/green

上边框

右边框

下边框

左边框

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>

预设颜色分别为red、green、blue、yellow、grey也就是小标签的五种颜色

自定义颜色

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
{% timeline 时间节点标题,颜色 %}

<!-- timeline 时间节点 -->

正文内容

<!-- endtimeline -->

{% endtimeline %}
1
2
3
4
5
6
7
8
9
{% timeline 2022,red %}

<!-- timeline 01-02 -->

這是測試頁面

<!-- endtimeline -->

{% endtimeline %}

2022

01-02

這是測試頁面

隐藏内容

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

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

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

按钮

1
2
This is my website, click the button {% btn 'https://butterfly.js.org',Butterfly %}
This is my website, click the button {% btn 'https://butterfly.js.org',Butterfly,,outline%}

This is my website, click the button Butterfly
This is my website, click the button Butterfly

1
2
3
This is my website, click the button {% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,block larger %}
This is my website, click the button {% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,block center larger %}
This is my website, click the button {% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,block right blue larger %}

This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly

1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,blue larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,pink larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,red larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,purple larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,orange larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,green larger %}
</div>
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline blue larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline pink larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline red larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline purple larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline orange larger %}
{% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,outline green larger %}
</div>
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly

富文本按钮

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://blog.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% cell Dreamy.TZK, https://blog.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% cell Dreamy.TZK, https://blog.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% cell Dreamy.TZK, https://blog.antmoe.com, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}
{% cell Dreamy.TZK, https://blog.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 %}
Dreamy.TZK Dreamy.TZK Dreamy.TZK Dreamy.TZK Dreamy.TZK
下载源码 查看文档
心率管家

专业版

 心率管家

免费版

Tab

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
{% 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
14
15
16
17
18
19
20
21
{% 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
14
15
16
17
18
19
20
21
{% 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
14
15
16
17
18
19
20
21
{% 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
14
15
16
17
18
19
20
21
{% 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
<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 %}
-->

图片描述 图片描述

图片描述 图片描述

图片描述 图片描述

文章内音乐

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>