md文件头部

Page Front-matter

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

Post Front-matter

key value
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 的配置)

文本文字

彩色文字：

在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。

超大文字

文档「开始」页面中的标题部分就是超大文字。

A Wonderful Theme for Hexo

行内文本

1
{% span 样式参数, 文本内容 %}

独立段落

1
{% p 样式参数, 文本内容 %}

样式参数位置可以写颜色、大小和对齐方向，多个样式参数用空格隔开。

字体

1
logo, code

颜色

1
red, yellow, green, cyan, blue, gray

大小

1
small, h4, h3, h2, h1, large, huge, ultra

对齐方向

1
left, center, right
1
2
3
4
5
6
在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。

文档「开始」页面中的标题部分就是超大文字。

{% p center logo large, Volantis %}
{% p center small, A Wonderful Theme for Hexo %}

tab容器

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

tab容器所展示的内容

1
2
3
4
5
6
7
8
{% tabs tab-id %}
<!-- tab 标签名 -->
tab容器所展示的内容
<!-- endtab -->
<!-- tab 标签名 -->
这里面写内容，支持的语法格式有限，请尽量<u>不要</u>写太过复杂的东西。
<!-- endtab -->
{% endtabs %}

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

tab-name

标签文本。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% tabs tab-id %}
<!-- tab tab-name -->

{% note success %}
这里这里面写内容，支持的语法格式有限，请尽量<u>不要</u>写太过复杂的东西。
{% endnote %}

<!-- endtab -->
<!-- tab tab-name -->

tab容器所展示的内容

<!-- endtab -->
{% endtabs %}

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

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
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

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

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

预设方案 2：预设选择 tabs

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
{% tabs test2, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

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

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

预设方案 3：没有预设值

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
{% tabs test3, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

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

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

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

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

查看代码

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

复选框

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

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

颜色

1
red, yellow, green, cyan, blue

样式

1
plus, minus, times

选中状态

1
checked

checkbox

1
2
3
4
5
6
7
8
9
10
{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 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

1
2
3
4
5
6
7
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 markdown 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}

Folding折叠容器

查看图片测试

查看默认打开的折叠框

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

查看代码测试

查看列表测试
  • haha
  • hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha 

1
2
3
{% folding 参数（可选）, 标题 %}
![](https://cdn.jsdelivr.net/gh/chuchendjs/picgo/picgo/2.jpg)
{% endfolding %}

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

颜色

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

![](https://cdn.jsdelivr.net/gh/chuchendjs/picgo/picgo/2.jpg)

{% endfolding %}

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

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

{% endfolding %}

{% folding green, 查看代码测试 %}
 hello world!
{% endfolding %}

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

- hello
- world

{% endfolding %}

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

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

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

hahaha <span><img src='https://cdn.jsdelivr.net/gh/chuchendjs/picgo/picgo/2.jpg' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

{% tabs tab-id %}

按钮

普通按钮

butterfly3.0 适用

文内按钮
This is my website, click the button 初辰博客
This is my website, click the button 初辰博客
This is my website, click the button 初辰博客
This is my website, click the button 初辰博客
This is my website, click the button 初辰博客

独占一行的按钮

初辰博客 初辰博客 初辰博客

一行多个实心按钮

初辰博客 初辰博客 初辰博客 初辰博客 初辰博客 初辰博客 初辰博客

一行多个空心按钮

初辰博客 初辰博客 初辰博客 初辰博客 初辰博客 初辰博客 初辰博客 
1
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}
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/留空

文内按钮

1
2
3
4
5
This is my website, click the button {% btn 'http://chuchendjs.github.io',初辰博客 %}
This is my website, click the button {% btn 'http://chuchendjs.github.io',初辰博客,far fa-hand-point-right %}
This is my website, click the button {% btn 'http://chuchendjs.github.io',初辰博客,,outline %}
This is my website, click the button {% btn 'http://chuchendjs.github.io',初辰博客,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'http://chuchendjs.github.io',初辰博客,far fa-hand-point-right,larger %}

独占一行的按钮

1
2
3
{% btn 'http://chuchendjs.github.io',初辰博客,far fa-hand-point-right,block %}
{% btn 'http://chuchendjs.github.io',初辰博客,far fa-hand-point-right,block center larger %}
{% btn 'http://chuchendjs.github.io',初辰博客,far fa-hand-point-right,block right outline larger %}

一行多个实心按钮

1
2
3
4
5
6
7
{% btn 'http://chuchendjs.github.io',初辰博客,far fa-hand-point-right,larger %}
{% btn 'http://chuchendjs.github.io',初辰博客,far fa-hand-point-right,blue larger %}
{% btn 'http://chuchendjs.github.io',初辰博客,far fa-hand-point-right,pink larger %}
{% btn 'http://chuchendjs.github.io',初辰博客,far fa-hand-point-right,red larger %}
{% btn 'http://chuchendjs.github.io',初辰博客,far fa-hand-point-right,purple larger %}
{% btn 'http://chuchendjs.github.io',初辰博客,far fa-hand-point-right,orange larger %}
{% btn 'http://chuchendjs.github.io',初辰博客,far fa-hand-point-right,green larger %}

一行多个空心按钮

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

富文本按钮

xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu
下载源码 查看文档
QQ

初辰

 心率管家

专业版

 心率管家

免费版

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

样式参数位置可以写图片样式、布局方式，多个样式参数用空格隔开。

默认为方形

1
rounded(圆角), circle(矩形)

布局方式

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

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

增加文字样式

可以在容器内增加 标题 和

描述文字

第一排

1
2
3
4
5
6
7
{% btns circle grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% endbtns %}

第二排

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

第三排

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{% btns circle center grid5 %}
<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
   <i class='fab fa-qq'></i>
  <b>QQ</b>
  {% p red, 初辰 %}
  <img src='https://cdn.jsdelivr.net/gh/chuchendjs/picgo/picgo/qq.png'>
</a>
<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
  <i id="heartbeat" class="fa fas fa-heartbeat"></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 id="heartbeat" class="fa fas fa-heartbeat"></i>
  <b>心率管家</b>
  {% p green, 免费版 %}
  <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}

隐藏按钮

哪个英文字母最酷？ 查看答案 因为西装裤(C装酷)

门里站着一个人? Click 闪

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

( content不能包含英文逗号，可用 ‚

1
{% hideInline content,display,bg,color %}

content: 文本内容

display: 按钮显示的文字(可选)

bg: 按钮的背景颜色(可选)

color: 按钮文字的颜色(可选)

1
2
3
哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}

门里站着一个人? {% hideInline 闪 %}

隐藏块

查看答案








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

( display 不能包含英文逗号，可用‚)

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}

content: 文本内容

display: 按钮显示的文字(可选)

bg: 按钮的背景颜色(可选)

color: 按钮文字的颜色(可选)

1
2
3
4
5
6
7
8
9
10
11
12
{% hideBlock 查看答案 %}
{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% endgallery %}
{% endhideBlock %}

标签

渐变背景标签

默认情况

info

success

error

warning

自定义font5图标

自定义iconfont图标

文字

文字

文字

魔改标签4

魔改标签5

魔改标签6

魔改标签7

魔改标签8

魔改标签9

查看代码

 
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>

小标签及边框颜色

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

绿色

红色

黄色

灰色

蓝色

查看代码

 
1
2
3
4
5
6
7
8
9
10
11
12
<span class="tag red">语法</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>

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

Fancybox

一行一个图片

图片描述

一行多个图片（不换行）

图片描述
图片描述
图片描述

多行多个图片（每行2～8个图片）








1
2
3
{% fancybox 参数, 列数 %}
图片链接
{% endfancybox %}

对齐方向

1
left, center, right

缩放

1
stretch

列数

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

一行一个图片

1
2
3
{% fancybox %}
![图片描述](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% 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 %}

多行多个图片（每行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 %}

mermaid

pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5