小康的butterfly主题使用文档

文件头

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

外挂标签

相册

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

• name：图库名字
• description：图库描述
• link：连接到对应相册的地址
• img-url：图库封面的地址

示例

<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

内置图标

• simple
• modern
• flat
• disabled
• no-icon

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

自定义图标

• sample
• modern
• flat
• disabled
• no-icon

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

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

自定义小标签

默认red

quote

info

done

success

danger

error

radiation

bug

idea-yellow

link- blue

paperclip

todo

msg cyan

guide

download

up

undo

引用框

引用内容

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

关于颜色及标记控制

• 彩色图标

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

• 灰色图标

  也可以指定颜色

  radiation, bug, idea, link, paperclip, todo, msg, guide, download, up, undo
  
  radiation	核标记
  bug		    爬虫
  idea        电灯泡
  link        锁链
  paperclip   回形针
  todo        勾选框
  msg         向右箭头
  guide       指路牌
  download    下载标记
  up          上传标记
  undo        回转箭头标记

  • 颜色

    clear, light, gray, red, yellow, green, cyan, blue

渐变背景标签

<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

小标签及边框颜色

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

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

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

自定义颜色

<p class="div-border left style="--Color:#881B12"">左边框</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>

这里没有验证码

时间线

• 语法
• 示例
• 效果

{% timeline 时间线标题 %}

{% timenode 时间节点（标题） %}

正文内容

{% endtimenode %}

{% timenode 时间节点（标题） %}

正文内容

{% endtimenode %}

{% endtimeline %}

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

Link

• 语法
• 示例
• 效果

{% link 标题, 链接, 图片 %}

{% link 小康博客, http://www.antmoe.com/, https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg %}

小康博客

http://www.antmoe.com/

小康博客

http://www.antmoe.com/

小康博客

http://www.antmoe.com/

小康博客

http://www.antmoe.com/

小康博客

http://www.antmoe.com/

小康博客

http://www.antmoe.com/

小康博客

http://www.antmoe.com/

小康博客

http://www.antmoe.com/

隐藏内容

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

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

( content 不能包含当引号，可用 ')

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

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

{% hideBlock display,bg,color %}
content
{% endhideBlock %}

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

示例：

隐藏 inline 内容 Click这是隐藏内容

隐藏 block 内容

这是隐藏内容

print(666)

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

支持自定义颜色

绿色

黄色

青色

蓝色

按钮

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

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

<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

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

<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

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

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

小康博客 小康博客 小康博客 小康博客 小康博客 小康博客 小康博客

富文本按钮

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

参数列表：

• 圆角样式

  rounded, circle

• 布局方式

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

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

• 增加文字样式

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

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

Dreamy.TZK Dreamy.TZK Dreamy.TZK Dreamy.TZK Dreamy.TZK

下载源码 查看文档

心率管家

专业版

心率管家

免费版

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 caption@icon'.
                Optional parameter.

• tab-id

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

• tab-name

  标签文本。

• tab-name
• tab-name

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

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

{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

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

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

• test1 1
• test1 2
• test1 3

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

• test2 1
• test2 2
• test2 3

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

• test3 1
• test3 2
• test3 3

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

只有图标 没有Tab名字

名字+icon

Folding

{% folding 参数（可选）, 标题 %}

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

{% endfolding %}

html 格式语法

<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 代表默认打开。

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

{% 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 "60198" "netease" "playlist" %}

进阶示例

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

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>