文件头

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)
sticky 【可选】文章置顶,值越大越考上
hide 【可选】隐藏文章

外挂标签

相册

{% gallery %}
markdown 图片格式
{% endgallery %}

相册图库

写法

<div class="gallery-group-main">
{% galleryGroup name description link img-url %} {% galleryGroup name
description link img-url %} {% galleryGroup name description link img-url %}
</div>
  1. name: 图库名字
  2. description: 图库描述
  3. link: 连接到对应相册的地址
  4. img-url: 图库封面的地址

示例

<div class="gallery-group-main">
{% galleryGroup name description link img-url %} {% galleryGroup name
description link img-url %} {% galleryGroup name description link img-url %}
</div>

Note

内置图标

{% 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 提示块标签

{% 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 提示块标签

{% 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 提示块标签

{% 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 提示块标签

{% 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 提示块标签

自定义图标

{% 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年快到了….

小心开车 安全至上

这是三片呢?还是四片?

该充电了哦!

剪刀石頭布

前端最討厭的瀏覽器

{% 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年快到了….

小心开车 安全至上

这是三片呢?还是四片?

该充电了哦!

剪刀石頭布

前端最討厭的瀏覽器

{% 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年快到了….

小心开车 安全至上

这是三片呢?还是四片?

该充电了哦!

剪刀石頭布

前端最討厭的瀏覽器

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

你是刷 Visa 还是是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢?还是四片?

该充电了哦!

剪刀石頭布

前端最討厭的瀏覽器

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

剪刀石头布

前端最讨厌的浏览器

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

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

自定义小标签

<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

小标题

这是个引用

渐变背景标签

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

默认情况

info

success

error

warning

需要添加css

.tip {
position: relative;
color: #fff;
background: #20a0ff;
background: -webkit-gradient(linear,left top,right top,from(#20a0ff),to(#20b8ff));
background: -webkit-linear-gradient(left,#20a0ff,#20b8ff);
background: linear-gradient(90deg,#20a0ff,#20b8ff);
padding: 6px 20px;
border-radius: 10px;
-webkit-box-shadow: 0 3px 5px rgba(32,160,255,.5);
box-shadow: 0 3px 5px rgba(32,160,255,.5);
margin-bottom: 20px
}

.tip p {
margin: 5px 0!important
}

.tip:before {
background: #20a0ff;
background: -webkit-gradient(linear,left bottom,left top,from(#0092ff),to(#20b8ff));
background: -webkit-linear-gradient(bottom,#0092ff,#20b8ff);
background: linear-gradient(0deg,#0092ff,#20b8ff);
border-radius: 50%;
color: #fff;
content: "\f129";
font-size: 12px;
position: absolute;
width: 24px;
height: 24px;
line-height: 24.5px;
left: -12px;
top: -12px;
-webkit-box-shadow: 0 0 0 2.5px #fff;
box-shadow: 0 0 0 2.5px #fff;
font-weight: 600;
font-family: "Font Awesome 5 Free";
text-align: center
}

.btn,.getit a {
position: relative
}

.well .tip:before {
-webkit-box-shadow: 0 0 0 2.5px #f7f8f9;
box-shadow: 0 0 0 2.5px #f7f8f9
}

.tip ol {
margin: 0
}

.tip.success {
background: #61be33;
background: -webkit-gradient(linear,left top,right top,from(#61be33),to(#8fce44));
background: -webkit-linear-gradient(left,#61be33,#8fce44);
background: linear-gradient(90deg,#61be33,#8fce44);
text-shadow: 0 -1px #61be33;
-webkit-box-shadow: 0 3px 5px rgba(104,195,59,.5);
box-shadow: 0 3px 5px rgba(104,195,59,.5)
}

.tip.success:before {
background: -webkit-gradient(linear,left bottom,left top,from(#52bb1d),to(#95d34b));
background: -webkit-linear-gradient(bottom,#52bb1d,#95d34b);
background: linear-gradient(0deg,#52bb1d,#95d34b);
content: "\f00c";
text-shadow: 0 -1px #61be33
}

.tip.warning {
background: #ff953f;
background: -webkit-gradient(linear,left top,right top,from(#ff953f),to(#ffb449));
background: -webkit-linear-gradient(left,#ff953f,#ffb449);
background: linear-gradient(90deg,#ff953f,#ffb449);
text-shadow: 0 -1px #ff953f;
-webkit-box-shadow: 0 3px 5px rgba(255,154,73,.5);
box-shadow: 0 3px 5px rgba(255,154,73,.5)
}

.tip.warning:before {
background: -webkit-gradient(linear,left bottom,left top,from(#ff8f35),to(#ffc149));
background: -webkit-linear-gradient(bottom,#ff8f35,#ffc149);
background: linear-gradient(0deg,#ff8f35,#ffc149);
content: "\f12a";
text-shadow: 0 -1px #ff953f
}

.tip.error {
background: #ff4949;
background: -webkit-gradient(linear,left top,right top,from(#ff4949),to(#ff7849));
background: -webkit-linear-gradient(left,#ff4949,#ff7849);
background: linear-gradient(90deg,#ff4949,#ff7849);
text-shadow: 0 -1px #ff4949;
-webkit-box-shadow: 0 3px 5px rgba(255,73,73,.5);
box-shadow: 0 3px 5px rgba(255,73,73,.5)
}

.tip.error:before {
background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ff7849));
background: -webkit-linear-gradient(bottom,#ff3838,#ff7849);
background: linear-gradient(0deg,#ff3838,#ff7849);
content: "\f00d";
text-shadow: 0 -1px #ff4949
}

/*夜间适配*/
[data-theme="dark"] .tip {
filter: brightness(0.7);
}

/* snote夜间模式 */
[data-theme="dark"] .tip{
color: #4c4948;
}

小标签及颜色

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

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

边框颜色

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

上边框

右边框

下边框

左边框

全边框及自定义颜色

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

全边框

绿色

红色

黄色

灰色

蓝色

行内小标签

<u>下划线</u>

下划线

<emp>着重线</emp>

着重线

<wavy>波浪线</wavy>

波浪线

<del>删除线</del>

删除线

<kbd>command</kbd>

command

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

这里没有验证码

{% Link 标题,链接,图片 %}
{% link 米奇不妙屋, https://bestlm.tk/, https://cdn.jsdelivr.net/gh/Bestlm/[email protected]/img/QQ图片20210210145158.jpg %}

隐藏内容

隐藏一些内容,需要点击才能查看
inline在文本里面添加按钮隐藏内容,只限文字
(content不能包含当引号,可用')
block独立的block隐藏内容,可以隐藏很多内容,包括图片,代码块等等

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

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

示例:

隐藏block内容

print(666)

隐藏inline的内容

content

hideToggle

{% 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 文档

写法

{% mermaid %}
内容
{% endmermaid %}

示例

{% mermaid %}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{% endmermaid %}

Checkbox & Radio

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

参数列表

  • 颜色

    red,yellow,green,cyan,blue

  • 样式

    plus,minus,times

  • 选中状态

    checked

tag标签格式

{% 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格式

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

支持自定义颜色

绿色

黄色

青色

蓝色

按钮

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

demo1

{% btn 'https://bestlm.tk/',米奇不妙屋 %}
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right %}
{% btn 'https://bestlm.tk/',米奇不妙屋,,outline %}
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,outline %}
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,larger %}
<a class="btn-beautify button--animated " href="https://bestlm.tk/" target="_blank" rel="noopener" title="米奇不妙屋">米奇不妙屋 </a>

<a class="btn-beautify button--animated " href="https://bestlm.tk/" target="_blank" rel="noopener" title="米奇不妙屋"><i class="far fa-hand-point-right fa-fw"></i> 米奇不妙屋 </a>

<a class="btn-beautify button--animated outline" href="https://bestlm.tk/" target="_blank" rel="noopener" title="米奇不妙屋">米奇不妙屋 </a>

<a class="btn-beautify button--animated outline" href="https://bestlm.tk/" target="_blank" rel="noopener" title="米奇不妙屋"><i class="far fa-hand-point-right fa-fw"></i> 米奇不妙屋 </a>

<a class="btn-beautify button--animated larger" href="https://bestlm.tk/" target="_blank" rel="noopener" title="米奇不妙屋"><i class="far fa-hand-point-right fa-fw"></i> 米奇不妙屋 </a>
米奇不妙屋 米奇不妙屋 米奇不妙屋 米奇不妙屋 米奇不妙屋

demo2

{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,block %}
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,block center larger %}
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,block right outline larger %}
<a class="btn-beautify button--animated block" href="https://bestlm.tk/" title="米奇不妙屋"><i class="far fa-hand-point-right fa-fw"></i> 米奇不妙屋 </a>

<a class="btn-beautify button--animated block center larger" href="https://bestlm.tk/" title="米奇不妙屋"><i class="far fa-hand-point-right fa-fw"></i> 米奇不妙屋 </a>

<a class="btn-beautify button--animated block right outline larger" href="https://bestlm.tk/" title="米奇不妙屋"><i class="far fa-hand-point-right fa-fw"></i> 米奇不妙屋 </a>
米奇不妙屋 米奇不妙屋 米奇不妙屋

demo3

{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,larger %}
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,blue larger %}
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,pink larger %}
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,red larger %}
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,purple larger %}
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,orange larger %}
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,green larger %}
米奇不妙屋 米奇不妙屋 米奇不妙屋 米奇不妙屋 米奇不妙屋 米奇不妙屋 米奇不妙屋

demo4

<div class="btn-center">
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,outline larger %}
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,outline blue larger %}
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,outline pink larger %}
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,outline red larger %}
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,outline purple larger %}
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,outline orange larger %}
{% btn 'https://bestlm.tk/',米奇不妙屋,far fa-hand-point-right,outline green larger %}
</div>

富文本按钮

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

参数列表:

  • 圆角样式

    rounded,circle

  • 布局方式

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

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

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

    {% btns circle grid5 %}
    {% cell Bestlm, https://bestlm.tk/, https://cdn.jsdelivr.net/gh/Bestlm/[email protected]/img/QQ图片20210210145158.jpg %}
    {% cell Bestlm, https://bestlm.tk/, https://cdn.jsdelivr.net/gh/Bestlm/[email protected]/img/QQ图片20210210145158.jpg %}
    {% cell Bestlm, https://bestlm.tk/, https://cdn.jsdelivr.net/gh/Bestlm/[email protected]/img/QQ图片20210210145158.jpg %}
    {% cell Bestlm, https://bestlm.tk/, https://cdn.jsdelivr.net/gh/Bestlm/[email protected]/img/QQ图片20210210145158.jpg %}
    {% cell Bestlm, https://bestlm.tk/, https://cdn.jsdelivr.net/gh/Bestlm/[email protected]/img/QQ图片20210210145158.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/qq/id444934666'>
    <i class='fa fa-apple'></i>
    <b>QQ</b>
    {% p red, 专业版 %}
    <img src='https://bestlm.tk/, https://cdn.jsdelivr.net/gh/Bestlm/[email protected]/img/QQ图片20210210145158.jpg'>
    </a>
    <a href='https://apps.apple.com/cn/app/qq/id444934666'>
    <i class='fa fa-apple'></i>
    <b>QQ</b>
    {% p green, 免费版 %}
    <img src='https://bestlm.tk/, https://cdn.jsdelivr.net/gh/Bestlm/[email protected]/img/QQ图片20210210145158.jpg'>
    </a>
    {% endbtns %}

Tab

{% 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 [email protected]'.
Optional parameter.
  • tab-id

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

  • tab-name

    标签文本

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

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

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

{% 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:没有预设值

{% 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名

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

{% folding 参数(可选), 标题 %}

![](https://cdn.jsdelivr.net/gh/Bestlm/[email protected]/img/QQ图片20210210145158.jpg)

{% endfolding %}

html格式语法

<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/Bestlm/[email protected]/img/QQ图片20210210145158.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/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代表默认打开

{% folding 查看图片测试 %}

![](https://cdn.jsdelivr.net/gh/Bestlm/[email protected]/img/QQ图片20210210145158.jpg)

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

查看图片测试

查看默认打开的折叠框

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

查看代码测试

print(666);

查看列表测试

  • haha
  • hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

Fancybox

{% 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 来时图片放大填充。

单张图片

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

一行多张图片(不换行)

<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张图片)

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

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

简单示例

{% meting "308811616" "netease" "playlist" %}

进阶示例

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

不需要自动播放可以不添加以下代码

autoplay

Audio

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

BiliBili视频播放器

安装hexo-tag-bilibili

npm install --save hexo-tag-bilibili

示例

使用方法

display不能包含英文逗号,可用

只能写 AV 号 如 av57505556 av_id 写 57505556

哔哩哔哩 AV/BV 互转 https://tool.liumingye.cn/avbv/

{% bilibili [av_id] %}
or
{% bilibili [av_id] [page] %}
{% bilibili 628844556 %}