本文抄录自：

文本相关

行内文本样式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 这里没有验证码 %}

文本标签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 %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

行内文本span

1
{% span 样式参数(参数以空格划分), 文本内容 %}
  1. 字体：logo, code
  2. 颜色：红色、黄色、绿色、青色、蓝色、灰色
  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 %}

折叠框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 不能包含英文逗号，可用 ‚ )

1
2
3
{% hideToggle display,bg,color %}
content
{% 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 %}

标签外挂

标签外挂是 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

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

剪刀石头布

前端最讨厌的浏览器

上标标签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来控制动画快慢
  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 %}

单选列表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, 蓝色 %}

复选列表checkbox

1
{% checkbox 样式参数（可选）, 文本（支持简单md） %}
1
2
3
1. 样式：plus, minus, times
2. 颜色：{% span red, red %}、{% span yellow, yellow %}、{% span green, green %}、{% span cyan, cyan %}、{% span blue, blue %}、{% span gray, 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, 叉 %}

诗词标签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 %}

进度条 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 进度条样式预览 %}

时间轴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 %}

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。

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

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

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

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

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

基本参数,定义徽标左右文字和图标 
1
{% 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 %}

网站卡片sites

1
2
3
4
{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% endsitegroup %}
追逐笔记欢迎来到我的博客
追逐笔记欢迎来到我的博客
追逐笔记
追逐笔记
追逐笔记欢迎来到我的博客
追逐笔记欢迎来到我的博客
追逐笔记欢迎来到我的博客
1
2
3
4
5
6
7
8
9
{% sitegroup %}
{% site 追逐笔记, url=https://blog.zhuizhutime.com, screenshot=https://img.zhuizhutime.com/imgs/blog/hexo/common/other/blogscreenshot.png, avatar=https://img.zhuizhutime.com/imgs/blog/hexo/themes/butterfly/head.jpg, description=欢迎来到我的博客 %}
{% site 追逐笔记, url=https://blog.zhuizhutime.com, screenshot=https://img.zhuizhutime.com/imgs/blog/hexo/common/other/blogscreenshot.png, description=欢迎来到我的博客 %}
{% site 追逐笔记, url=https://blog.zhuizhutime.com, screenshot=https://img.zhuizhutime.com/imgs/blog/hexo/common/other/blogscreenshot.png, avatar=https://img.zhuizhutime.com/imgs/blog/hexo/themes/butterfly/head.jpg %}
{% site 追逐笔记, url=https://blog.zhuizhutime.com, screenshot=https://img.zhuizhutime.com/imgs/blog/hexo/common/other/blogscreenshot.png %}
{% site 追逐笔记, url=https://blog.zhuizhutime.com, screenshot=https://img.zhuizhutime.com/imgs/blog/hexo/common/other/blogscreenshot.png, avatar=https://img.zhuizhutime.com/imgs/blog/hexo/themes/butterfly/head.jpg, description=欢迎来到我的博客 %}
{% site 追逐笔记, url=https://blog.zhuizhutime.com, screenshot=https://img.zhuizhutime.com/imgs/blog/hexo/common/other/blogscreenshot.png, avatar=https://img.zhuizhutime.com/imgs/blog/hexo/themes/butterfly/head.jpg, description=欢迎来到我的博客 %}
{% site 追逐笔记, url=https://blog.zhuizhutime.com, screenshot=https://img.zhuizhutime.com/imgs/blog/hexo/common/other/blogscreenshot.png, avatar=https://img.zhuizhutime.com/imgs/blog/hexo/themes/butterfly/head.jpg, description=欢迎来到我的博客 %}
{% endsitegroup %}
1
{% link 标题, 链接, 图片链接（可选） %}

追逐笔记

https://blog.zhuizhutime.com

1
{% link 追逐笔记, https://blog.zhuizhutime.com, https://img.zhuizhutime.com/imgs/blog/hexo/themes/butterfly/bijiicon.png %}

媒体

行内图片inlineimage

1
{% inlineimage 图片链接, height=高度（可选） %}
  1. 高度：height=20px

这是 一段话。
这又是 一段话。

1
2
这是 {% inlineimage https://img.zhuizhutime.com/imgs/blog/hexo/common/other/0000.gif %} 一段话。
这又是 {% inlineimage https://img.zhuizhutime.com/imgs/blog/hexo/common/other/5150.gif, height=40px %} 一段话。

哈哈，这是内置的效果

  • 语法

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

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

  • 示例源码

    1
    哈哈，这是内置的效果 {% inlineImg https://img.zhuizhutime.com/imgs/blog/hexo/common/other/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://img.zhuizhutime.com/imgs/draw/0b841bd49307134495428.webp, alt=每天下课回宿舍的路，没有什么故事。 %}
  2. 指定宽度：
    1
    {% image https://img.zhuizhutime.com/imgs/draw/0b841bd49307134495428.webp, width=400px %}
  3. 指定宽度并添加描述：
    1
    {% image https://img.zhuizhutime.com/imgs/draw/0b841bd49307134495428.webp, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}
  4. 设置占位背景色：
    1
    {% image https://img.zhuizhutime.com/imgs/draw/0b841bd49307134495428.webp, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}

相册gallery

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

  1. gallerygroup 相册图库
    1
    2
    3
    4
    5
    <div class="gallery-group-main">
    {% galleryGroup name description link img-url %}
    {% galleryGroup name description link img-url %}
    {% galleryGroup name description link img-url %}
    </div>
  2. gallery 相册
    1
    2
    3
    {% gallery %}
    markdown 图片格式
    {% endgallery %}
  1. gallerygroup 相册图库
    参数名 释义
    name 图库名字
    description 图库描述
    link 链接到对应相册的地址
    img-url 图库封面

思维拓展一下，相册图库的实质其实就是个快捷方式，可以自定义添加描述、封面、链接。那么我们未必要把它当做一个相册，完全可以作为一个链接卡片，链接到视频、QQ、友链都是不错的选择。

  1. grallery相册
    区别于旧版的 Gallery 相册，新的 Gallery 相册会自动根据图片长度进行排版，书写也更加方便，与 markdown 格式一样。可根据需要插入到相应的 md。无需再自己配置长宽。建议在粘贴时故意使用长短、大小、横竖不一的图片，会有更好的效果。（尺寸完全相同的图片只会平铺输出，效果很糟糕）
  1. gallerygroup 相册图库
    Group Image Gallery
    壁纸

    这可以是一个描述！

  2. grallery相册
    [{"url":"https://img.zhuizhutime.com/imgs/draw/0ad9631f5443502486458.webp","alt":"images","title":""},{"url":"https://img.zhuizhutime.com/imgs/draw/0afe2adc2106519915938.webp","alt":"images","title":""},{"url":"https://img.zhuizhutime.com/imgs/draw/0b841bd49307134495428.webp","alt":"images","title":""},{"url":"https://img.zhuizhutime.com/imgs/draw/0ba6f2bc9593769684349.webp","alt":"images","title":""},{"url":"https://img.zhuizhutime.com/imgs/draw/0c1e79b30722782295761.webp","alt":"images","title":""}]
  1. gallerygroup 相册图库
    1
    2
    3
    <div class="gallery-group-main">
    {% galleryGroup '壁纸' '这可以是一个描述！' 'https://img.zhuizhutime.com' https://img.zhuizhutime.com/imgs/draw/0c3495988920325766044.webp %}
    </div>
  2. grallery相册
    1
    2
    3
    4
    5
    6
    7
    {% gallery %}
    ![images](https://img.zhuizhutime.com/imgs/draw/0ad9631f5443502486458.webp)
    ![images](https://img.zhuizhutime.com/imgs/draw/0afe2adc2106519915938.webp)
    ![images](https://img.zhuizhutime.com/imgs/draw/0b841bd49307134495428.webp)
    ![images](https://img.zhuizhutime.com/imgs/draw/0ba6f2bc9593769684349.webp)
    ![images](https://img.zhuizhutime.com/imgs/draw/0c1e79b30722782295761.webp)
    {% endgallery %}

音频audio

1
{% audio 音频链接 %}
1
{% audio https://img.zhuizhutime.com/imgs/blog/hexo/common/music/周蕙-约定.mp3 %}

视频video

1
{% video 视频链接 %}

注意非100%宽度视频标签需要顶格写，不能有空格等内容

  1. 对其方向：left, center, right
  2. 列数：逗号后面直接写列数，支持 1 ～ 4 列。
  1. 100% 宽度
  1. 50% 宽度
  1. 25% 宽度
  1. 100% 宽度
    1
    {% video https://img.zhuizhutime.com/imgs/blog/hexo/common/video/i0345yo0pth.mp4 %}
  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 视频链接 %}
    {% video 视频链接 %}
    {% video 视频链接 %}
    {% video 视频链接 %}
    {% video 视频链接 %}
    {% video 视频链接 %}
    {% video 视频链接 %}
    {% video 视频链接 %}
    {% endvideos %}

更新

更新步骤

制作更新docker
后续所有动作均在edit中完成，run下不需要操作

1
2
3
4
5
6
7
8
9
# 初始化hexo
hexo init .
npm install

# 安装butterfly主题
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
npm install hexo-renderer-pug hexo-renderer-stylus hexo-butterfly-tag-plugins-plus hexo-generator-search --save

# 对比更新配置文件

其他操作

1
2
3
hexo new xxx
hexo g
hexo clean
  • 如果需要置顶博客，加入sticky: 1即可，数字代表置顶排序
  • 如果需要不想博客被搜索，加入indexing: false即可