Markdown + butterfly + Volantis 主题标签移植

tabs

第一个Tab内容

第二个Tab内容

第三个Tab内容

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs 页面内不重复的ID %}
<!-- tab 第一个Tab -->
**第一个Tab内容**
<!-- endtab -->

<!-- tab 第二个Tab -->
**第二个Tab内容**
<!-- endtab -->

<!-- tab 第三个Tab -->
**第三个Tab内容**
<!-- endtab -->
{% endtabs %}

高亮文本

使用一对反引号能使行内部分文字高亮

1
`html` `css` `javascript`

html css javascript

span

各种颜色的文字，包括：灰色、蓝色、粉色、红色、紫色、橘色、绿色。

超大号文字：

A Wonderful Theme for Hexo 
1
{% span 属性::文本内容 %}
属性 可选值
颜色 gray，blue，pink，red，purple，orange，green
大小 small, h4, h3, h2, h1, large, huge, ultra
对齐方向 left, center, right

label

各种颜色的文字标签，包括：默认、蓝色、粉色、红色、紫色、橘色、绿色。

1
2
3
{% lable 可选背景颜色::文本内容 %}

可选背景颜色：默认 `default`，blue，pink，red，purple，orange，green

checkbox

默认

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

radio

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

1
{% checkbox 属性::文本内容 %}
属性 可选值
选中状态 checked
颜色 red, green，yellow, cyan, blue
样式(仅checkbox) plus, minus, times

引用文本

1
2
3
> 引用文本
> >嵌套引用文本
> > >套中套。。。

引用文本

嵌套引用文本

套中套。。。

note

flat提示块标签

你是刷 Visa 还是 UnionPay

2021 年快到了…

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

no-icon 提示块标签

你是刷 Visa 还是 UnionPay

2021 年快到了…

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

示例代码：

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 'fab fa-cc-visa' flat %}
你是刷 Visa 还是 UnionPay
{% endnote %}

{% note blue 'fas fa-bullhorn' flat %}
2021 年快到了....
{% endnote %}

{% note pink 'fas fa-car-crash' flat %}
小心开车 安全至上
{% endnote %}

{% note red 'fas fa-fan' flat%}
这是三片呢？还是四片？
{% endnote %}

{% note orange 'fas fa-battery-half' flat %}
你是刷 Visa 还是 UnionPay
{% endnote %}

{% note purple 'far fa-hand-scissors' flat %}
剪刀石头布
{% endnote %}

{% note green 'fab fa-internet-explorer' flat %}
前端最讨厌的浏览器
{% endnote %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{% 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 %}

tag-hide

如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标签外挂。

门里站着一个人? 闪
哪个英文字母最酷？ 因为西装裤(C装酷)

示例代码：

1
2
门里站着一个人? {% hideInline 闪,点击显示 %}
哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}

傻子，怎么可能有答案
哈哈哈哈哈！

示例代码：

1
2
3
4
{% hideBlock 查看答案 %}
傻子，怎么可能有答案
哈哈哈哈哈！
{% endhideBlock %}
Butterfly安装方法

在你的博客根目录里

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

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

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

示例代码：

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

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

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

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

{% endhideToggle %}

Button

行内按钮
只有链接,文字的 按钮 适合融入段落中 行内按钮

实心按钮

Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly

居中：

Butterfly

空心按钮

Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly

居中：

Butterfly 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
**行内按钮**
只有`链接,文字`的 按钮 适合融入段落中 {% btn 'https://butterfly.js.org/',行内按钮 %}

**实心按钮**
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,green larger %}
居中：
{% btn 'https://butterfly.js.org/',Butterfly,fa-solid fa-download,block center green larger %}

**空心按钮**
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline green larger %}
居中：
{% btn 'https://butterfly.js.org/',Butterfly,fa-solid fa-download,block center outline green larger %}
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/留空

inlineImg

主题中的图片都是默认以块级元素显示，如果你想以内联元素显示，可以使用这个标签外挂

你怎么那么好看 

1
2
3
![](https://s1.imagehub.cc/images/2024/07/29/a06310af4d7a9e27d4cac9e16c0219ff.png)

你怎么那么好看 {% inlineImg https://s1.imagehub.cc/images/2024/07/29/b30408eba6f82383d22b6eae2d36bd68.png 150px %}
1
2
3
4
{% inlineImg [src] [height] %}

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

表格

制作表格使用 |来分隔不同的单元格，使用-来分隔表头和其他行

1
2
3
4
|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |
表头 表头
单元格 单元格
单元格 单元格

对齐方式：

  • -: 设置内容和标题栏居右对齐
  • :- 设置内容和标题栏居左对齐
  • :-: 设置内容和标题栏居中对齐
1
2
3
4
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
左对齐 右对齐 居中对齐
单元格 单元格 单元格
单元格 单元格 单元格