原生 Butterfly 主题不支持部分标签外挂，若想使用，参考 Tag Plugins Plus

Front-matter

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)

标签外挂

标签外挂是 Hexo 独有的功能，并不是标准的 Markdown 格式。

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

自定义 icon

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

2022 年快到了….

小心开车 安全至上

这是三片呢？还是四片？

该充电了哦！

剪刀石頭布

前端最討厭的瀏覽器

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

你是刷 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 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
<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>

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

小标签自定义颜色

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

边框颜色

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

上边框

右边框

下边框

左边框

边框自定义颜色

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

全边框及自定义颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

全边框

全边框

绿色

红色

黄色

灰色

蓝色

上标标签 tip

1
{% tip [参数，可选] %}文本内容{% endtip %}
  1. 样式：success、error、warning、bolt、ban、home、sync、cogs、key、bell
  2. 自定义图标：支持 fontawesome。

默认情况

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

1
2
3
4
5
6
7
8
9
10
11
12
{% tip %}默认情况{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}
{% tip fa-atom %}自定义font awesome图标{% endtip %}

动态标签 anima

1
{% tip [参数，可选] %}文本内容{% endtip %}

更多详情请参看 font-awesome-animation文档

  1. 将所需的CSS类添加到图标（或DOM中的任何元素）。
  2. 对于父级悬停样式，需要给目标元素添加指定CSS类，同时还要给目标元素的父级元素添加CSS类faa-parent animated-hover。（详情见示例及示例源码）
    You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow
  3. 可以通过给目标元素添加CSS类faa-fast或faa-slow来控制动画快慢。
On DOM load
当页面加载时
显示动画		On hover
当鼠标悬停时
显示动画		On parent hover
当鼠标悬停
在父级元素时
显示动画
 faa-wrench animated faa-wrench animated-hover faa-wrench
 faa-ring animated faa-ring animated-hover faa-ring
 faa-horizontal animated faa-horizontal animated-hover faa-horizontal
 faa-vertical animated faa-vertical animated-hover faa-vertical
 faa-flash animated faa-flash animated-hover faa-flash
 faa-bounce animated faa-bounce animated-hover faa-bounce
 faa-spin animated faa-spin animated-hover faa-spin
 faa-tada animated faa-tada animated-hover faa-tada
 faa-pulse animated faa-pulse animated-hover faa-pulse
 faa-shake animated faa-shake animated-hover faa-shake
 faa-tada animated faa-tada animated-hover faa-tada
 faa-passing animated faa-passing animated-hover faa-passing
 faa-passing-reverse animated faa-passing-reverse animated-hover faa-passing-reverse
 faa-burst animated faa-burst animated-hover faa-burst
 faa-falling animated faa-falling animated-hover faa-falling
 faa-rising animated faa-rising animated-hover faa-rising

  1. On DOM load（当页面加载时显示动画）

    warning

    ban

  2. 调整动画速度。

    warning

    ban

  3. On hover（当鼠标悬停时显示动画）

    warning

    ban

  4. On parent hover（当鼠标悬停在父级元素时显示动画）

    warning

    ban

  1. On DOM load（当页面加载时显示动画）

    1
    2
    {% tip warning faa-horizontal animated %}warning{% endtip %}
    {% tip ban faa-flash animated %}ban{% endtip %}

  2. 调整动画速度

    1
    2
    {% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
    {% tip ban faa-flash animated faa-slow %}ban{% endtip %}

  3. On hover（当鼠标悬停时显示动画）

    1
    2
    {% tip warning faa-horizontal animated-hover %}warning{% endtip %}
    {% tip ban faa-flash animated-hover %}ban{% endtip %}

  4. On parent hover（当鼠标悬停在父级元素时显示动画）

    1
    2
    {% tip warning faa-parent animated-hover %}<p class="faa-horizontal">warning</p>{% endtip %}
    {% tip ban faa-parent animated-hover %}<p class="faa-flash">ban</p>{% endtip %}

复选列表 checkbox

1
{% checkbox 样式参数（可选）, 文本（支持简单md） %}
  1. 样式: plus, minus, times
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 选中状态: checked

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

1
2
3
4
5
6
7
8
9
10
{% 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

1
{% radio 样式参数（可选）, 文本（支持简单md） %}
  1. 颜色: red,yellow,green,cyan,blue,gray
  2. 选中状态: checked

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

1
2
3
4
5
6
7
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}

文本相关

行内文本样式 text

1
2
3
4
5
6
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}
  1. 带 下划线 的文本
  2. 带着重号的文本
  3. 带波浪线的文本
  4. 带 删除线 的文本
  5. 键盘样式的文本 command + D
  6. 密码样式的文本：这里没有验证码
1
2
3
4
5
6
1. 带 {% u 下划线 %} 的文本
2. 带 {% emp 着重号 %} 的文本
3. 带 {% wavy 波浪线 %} 的文本
4. 带 {% del 删除线 %} 的文本
5. 键盘样式的文本 {% kbd command %} + {% kbd D %}
6. 密码样式的文本：{% psw 这里没有验证码 %}

行内文本 span

1
{% span 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
  • 彩色文字
    在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
  • 超大号文字
    文档「开始」页面中的标题部分就是超大号文字。

    A Wonderful Theme for Hexo
1
2
3
4
5
6
- 彩色文字
在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% span center logo large, Volantis %}
{% span center small, A Wonderful Theme for Hexo %}

段落文本 p

1
{% p 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
  • 彩色文字
    在一段话中方便插入各种颜色的标签，包括：

    红色

    、

    黄色

    、

    绿色

    、

    青色

    、

    蓝色

    、

    灰色

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

    A Wonderful Theme for Hexo

1
2
3
4
5
6
- 彩色文字
在一段话中方便插入各种颜色的标签，包括：{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、{% p blue, 蓝色 %}、{% p gray, 灰色 %}。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。
{% p center logo large, Volantis %}
{% p center small, A Wonderful Theme for Hexo %}

时间轴 timeline

1
2
3
4
5
6
7
8
{% timeline 时间线标题（可选）[,color] %}
<!-- timeline 时间节点（标题） -->
正文内容
<!-- endtimeline -->
<!-- timeline 时间节点（标题） -->
正文内容
<!-- endtimeline -->
{% endtimeline %}

2020-07

2020-07-24

天气不错，适合出去约妹

2020-05-15

学习 SpringCloud Alibaba

1
2
3
4
5
6
7
8
9
{% timeline 2020-07,blue %}
<!-- timeline 2020-07-24  -->
天气不错，适合出去约妹
<!-- endtimeline -->

<!-- timeline 2020-05-15 -->
学习 SpringCloud Alibaba
<!-- endtimeline -->
{% endtimeline %}

按钮 btns

Volantis 的按钮使用的是 btn 和 btns 标签。btns 和 butterfly 的 button 不冲突，但是 btn 会被强制渲染，导致部分参数失效，而且 btn 的效果还是 butterfly 的 button 更好看些。所以就只适配了 btns。

1
2
3
4
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}
  1. 圆角样式：rounded, circle
  2. 增加文字样式：可以在容器内增加 <b>标题</b> 和 <p>描述文字</p>
  3. 布局方式：
    默认为自动宽度，适合视野内只有一两个的情况。
参数含义
wide宽一点的按钮
fill填充布局，自动铺满至少一行，多了会换行
center居中，按钮之间是固定间距
around居中分散
grid2等宽最多2列，屏幕变窄会适当减少列数
grid3等宽最多3列，屏幕变窄会适当减少列数
grid4等宽最多4列，屏幕变窄会适当减少列数
grid5等宽最多5列，屏幕变窄会适当减少列数

  1. 一组含有头像的链接：

    GitHub 哔哩哔哩 Pixiv YouTube 今日热榜

  2. 含有图标的按钮：

    下载源码 查看文档

  3. 圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

    心率管家

    专业版

     心率管家

    免费版

  1. 一组含有头像的链接：

    1
    2
    3
    4
    5
    6
    7
    {% btns circle grid5 %}
    {% cell GitHub, https://github.com/, https://jsd.onmicrosoft.cn/gh/cpddo/p_img@450ea647ca67bd386416a689f3eb1bc6a508b3b9/2021/01/23/f7ac7b26db76ada1704f6af09bedacbe.webp %}
    {% cell 哔哩哔哩, https://www.bilibili.com/, https://jsd.onmicrosoft.cn/gh/cpddo/p_img@e642ee265c8ae2bbd0994716aa12b3adbe07f2c4/2021/01/23/2ceca69a212d3b9988bbd2c41edc636c.webp %}
    {% cell Pixiv, https://www.pixiv.net/, https://jsd.onmicrosoft.cn/gh/cpddo/p_img@5c4fc20944c706aa452c31d1bddbdcc672e8c6ab/2021/01/23/7658d06315d32bcf0c954b3d8e8879e0.webp %}
    {% cell YouTube, https://www.youtube.com/, https://jsd.onmicrosoft.cn/gh/cpddo/p_img@ff4781678ea6227f5824e3c8bfd5cc27441db4da/2021/01/23/f4e292c780275465c9150eb3cb0785a4.webp %}
    {% cell 今日热榜, https://tophub.today/, https://jsd.onmicrosoft.cn/gh/cpddo/p_img@11fff6ed270722d709eb0ac88ce47f468c21d2ba/2021/01/23/cd22cd9d34d7d7bd58114d7d7a195822.webp %}
    {% endbtns %}

  2. 或者含有图标的按钮：

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

  3. 圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    {% btns circle center grid5 %}
    <a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
      <i class='fab fa-apple'></i>
      <b>心率管家</b>
      {% p red, 专业版 %}
      <img src='https://jsd.onmicrosoft.cn/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='fab fa-apple'></i>
      <b>心率管家</b>
      {% p green, 免费版 %}
      <img src='https://jsd.onmicrosoft.cn/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
    </a>
    {% endbtns %}

github 卡片 ghcard

ghcard 使用了 github-readme-stats 的 API，支持直接使用 markdown 语法来写。

1
2
{% ghcard 用户名, 其它参数（可选） %}
{% ghcard 用户名/仓库, 其它参数（可选） %}

更多参数可以参考：

使用,分割各个参数。写法为：参数名=参数值
以下只写几个常用参数值。

参数名取值释义
hidestars,commits,prs,issues,contribs隐藏指定统计
count_privatetrue将私人项目贡献添加到总提交计数中
show_iconstrue显示图标
theme请查阅Available Themes主题
  1. 用户信息卡片
  1. 仓库信息卡片

  1. 用户信息卡片

    1
    2
    3
    4
    5
    | {% ghcard jerryc127 %}               | {% ghcard Zfour, theme=vue %}              |
    | ------------------------------------ | ------------------------------------------ |
    | {% ghcard Akilarlxh, theme=buefy %}  | {% ghcard ruanyf, theme=solarized-light %} |
    | {% ghcard philwebb, theme=onedark %} | {% ghcard zjwo, theme=solarized-dark %}    |
    | {% ghcard vpavic, theme=algolia %}   | {% ghcard bclozel, theme=calm %}           |

  2. 仓库信息卡片

    1
    2
    3
    4
    5
    | {% ghcard spring-projects/spring-boot %}                 | {% ghcard mybatis/mybatis-3, theme=vue %}               |
    | -------------------------------------------------------- | ------------------------------------------------------- |
    | {% ghcard jerryc127/hexo-theme-butterfly, theme=buefy %} | {% ghcard alibaba/fastjson, theme=solarized-light %}    |
    | {% ghcard alibaba/druid, theme=onedark %}                | {% ghcard alibaba/arthas, theme=solarized-dark %}       |
    | {% ghcard Tencent/weui, theme=algolia %}                 | {% ghcard volantis-x/hexo-theme-volantis, theme=calm %} |

github 徽标 ghbdage

1
{% bdage [right],[left],[logo]||[color],[link],[title]||[option] %}
  1. left：徽标左边的信息，必选参数。
  2. right: 徽标右边的信息，必选参数，
  3. logo：徽标图标，图标名称详见simpleicons，可选参数。
  4. color：徽标右边的颜色，可选参数。
  5. link：指向的链接，可选参数。
  6. title：徽标的额外信息，可选参数。主要用于优化SEO，但object标签不会像a标签一样在鼠标悬停显示title信息。
  7. option：自定义参数，支持shields.io的全部API参数支持，具体参数可以参看上文中的拓展写法示例。形式为name1=value2&name2=value2。

本外挂标签的参数分为三组，用||分割。

基本参数

信息参数

拓展参数

本外挂标签的参数分为三组，用||分割。

基本参数,定义徽标左右文字和图标

1
2
{% bdage Theme,Butterfly %}
{% bdage Frame,Hexo,hexo %}

信息参数，定义徽标右侧内容背景色，指向链接

1
2
3
{% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %}
// 如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割
{% bdage Source,GitHub,GitHub||,https://github.com/ %}

拓展参数，支持shields的API的全部参数内容

1
2
3
{% bdage Hosted,Vercel,Vercel||brightgreen,https://vercel.com/,本站采用双线部署，默认线路托管于Vercel||style=social&logoWidth=20 %}
// 如果是跨顺序省略可选参数组，仍然需要写双竖线||用作分割
{% bdage Hosted,Vercel,Vercel||||style=social&logoWidth=20&logoColor=violet %}

行内图片 inlineimage

这是 一段话。

这又是 一段话。

1
{% inlineimage 图片链接, height=高度（可选） %}
  1. 高度：height=20px
1
2
3
这是 {% inlineimage https://jsd.onmicrosoft.cn/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。

这又是 {% inlineimage https://jsd.onmicrosoft.cn/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段话。

你看我长得漂亮不

我觉得很漂亮

语法：

1
2
3
4
{% inlineImg [src] [height] %}

[src]      :    图片链接
[height]   ：   图片高度限制【可选】

示例源码：

1
2
3
你看我长得漂亮不

我觉得很漂亮 {% inlineImg https://jsd.onmicrosoft.cn/gh/volantis-x/cdn-emoji/aru-l/0000.gif 80px %}

单张图片 image

1
{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}

  1. 图片宽度高度：width=300px, height=32px

  2. 图片描述：alt=图片描述（butterfly需要在主题配置文件中开启图片描述）

  3. 占位背景色：bg=#f2f2f2

  1. 添加描述：

    每天下课回宿舍的路，没有什么故事。
    每天下课回宿舍的路，没有什么故事。

  2. 指定宽度：

  3. 指定宽度并添加描述：

    每天下课回宿舍的路，没有什么故事。
    每天下课回宿舍的路，没有什么故事。

  4. 设置占位背景色：

    优化不同宽度浏览的观感
    优化不同宽度浏览的观感

  1. 添加描述：

    1
    {% image https://jsd.onmicrosoft.cn/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt=每天下课回宿舍的路，没有什么故事。 %}

  2. 指定宽度：

    1
    {% image https://jsd.onmicrosoft.cn/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %}

  3. 指定宽度并添加描述：

    1
    {% image https://jsd.onmicrosoft.cn/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}

  4. 设置占位背景色：

    1
    {% image https://jsd.onmicrosoft.cn/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}

音频 audio

1
{% audio 音频链接 %}
1
2
{% audio https://音乐链接.mp3 %}
{% audio https://音乐链接.mp3 %}

视频 video

1
{% video 视频链接 %}
  1. 对其方向：left, center, right
  2. 列数：逗号后面直接写列数，支持 1 ～ 4 列。

  1. 100% 宽度

  2. 50% 宽度

  3. 25% 宽度

  1. 100% 宽度

    1
    {% video 视频链接 %}

  2. 50% 宽度

    1
    2
    3
    4
    5
    6
    {% videos, 2 %}
    {% video 视频链接 %}
    {% video 视频链接 %}
    {% video 视频链接 %}
    {% video 视频链接 %}
    {% endvideos %}

  3. 25% 宽度

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {% videos, 4 %}
    {% video https://www.w3school.com.cn/example/html5/mov_bbb.mp4 %}
    {% video https://www.w3school.com.cn/example/html5/mov_bbb.mp4 %}
    {% video https://www.w3school.com.cn/example/html5/mov_bbb.mp4 %}
    {% video https://www.w3school.com.cn/example/html5/mov_bbb.mp4 %}
    {% video https://www.w3school.com.cn/example/html5/mov_bbb.mp4 %}
    {% video https://www.w3school.com.cn/example/html5/mov_bbb.mp4 %}
    {% video https://www.w3school.com.cn/example/html5/mov_bbb.mp4 %}
    {% video https://www.w3school.com.cn/example/html5/mov_bbb.mp4 %}
    {% endvideos %}

以下为 Butterfly 自带的 gallery 标签写法。相册图库和相册配合使用。

折叠框 folding

1
2
3
{% folding 参数（可选）, 标题 %}
哈哈哈哈
{% endfolding %}
  1. 颜色：blue, cyan, green, yellow, red
  2. 状态：状态填写 open 代表默认打开。
查看图片测试

images

查看默认打开的折叠框

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

查看代码测试
1
2
3
public class Test {

}
查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha😜

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
{% folding 查看图片测试 %}
![images](https://jsd.onmicrosoft.cn/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

{% folding cyan open, 查看默认打开的折叠框 %}
这是一个默认打开的折叠框。
{% endfolding %}

{% folding green, 查看代码测试 %}
​```java
public class Test {

}
​```
{% endfolding %}

{% folding yellow, 查看列表测试 %}
- haha
- hehe
{% endfolding %}

{% folding red, 查看嵌套测试 %}
{% folding blue, 查看嵌套测试2 %}
{% folding 查看嵌套测试3 %}
hahaha😜
{% endfolding %}
{% endfolding %}
{% endfolding %}

语法：

( display 不能包含英文逗号，可用 &sbquo; )

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}
Butterfly 安装方法

在你的博客根目录里

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安装比较新的 dev 分支，可以

1
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly{% endhideToggle %}

示例源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% hideToggle Butterfly 安装方法 %}
在你的博客根目录里

​```sh
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
​```

如果想要安装比较新的 dev 分支，可以

​```sh
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly{% endhideToggle %}
​```

{% endhideToggle %}

分栏 tab

1
2
3
4
5
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
  1. Unique name :
    • 选项卡块标签的唯一名称，不带逗号。
    • 将在#id中用作每个标签及其索引号的前缀。
    • 如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。
    • 仅当前帖子/页面的URL必须是唯一的！
  2. [index]:
    • 活动选项卡的索引号。
    • 如果未指定，将选择第一个标签（1）。
    • 如果index为-1，则不会选择任何选项卡。
    • 可选参数。
  3. [Tab caption]:
    • 当前选项卡的标题。
    • 如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。
    • 如果未指定标题，但指定了图标，则标题将为空。
    • 可选参数。
  4. [@icon]:
    • FontAwesome图标名称（全名，看起来像“ fas fa-font”）
    • 可以指定带空格或不带空格；
    • 例如’Tab caption @icon’ 和 ‘Tab caption@icon’.
    • 可选参数。

Demo 1 - 预设选择第一个【默认】

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 2 - 预设选择tabs

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 3 - 没有预设值

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 4 - 自定义 Tab 名 + 只有 icon + icon 和 Tab 名

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

Demo 1 - 预设选择第一个【默认】


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

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

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

Demo 2 - 预设选择tabs


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

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

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

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

Demo 4 - 自定义 Tab 名 + 只有 icon + icon 和 Tab 名


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

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

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

诗词标签 poem

1
2
3
{% poem [title],[author] %}
诗词内容
{% endpoem %}
  1. title：诗词标题
  2. author：作者，可以不写
水调歌头
苏轼

明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？
转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。

1
2
3
4
5
6
7
8
9
10
11
12
{% poem 水调歌头,苏轼 %}
丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？

转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。
{% endpoem %}

label

适用于 Butterfly 3.7.5 及以上版本

1
{% label text color %}
参数解释
text文字
color【可选】背景颜色，默认为 default
default / blue / pink / red / purple / orange / green

臣亮言：先帝 创业未半，而中道崩殂 。今天下三分，益州疲敝 ，此诚危急存亡之秋 也！然侍衞之臣，不懈于内；忠志之士 ，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有作奸 、犯科 ，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

1
2
臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

进度条 progress

1
{% progress [width] [color] [text] %}

width：0 到 100 的阿拉伯数字
color：颜色，取值有 red、yellow、green、cyan、blue、gray
text：进度条上的文字内容

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

1
2
3
4
5
6
{% progress 10 red 进度条样式预览 %}
{% progress 30 yellow 进度条样式预览 %}
{% progress 50 green 进度条样式预览 %}
{% progress 70 cyan 进度条样式预览 %}
{% progress 90 blue 进度条样式预览 %}
{% progress 100 gray 进度条样式预览 %}