Butterfly常用外挂标签语法

这里是纯自用,方便自己写的时候查看这些语法,都是常用的,但是不完全

行内文本样式 text

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

段落文本 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
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 %}
  • 彩色文字
    在一段话中方便插入各种颜色的标签,包括:

    红色

    黄色

    绿色

    青色

    蓝色

    灰色

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

    A Wonderful Theme for Hexo

引用note

最新版 butterfly 标签支持引用 fontawesome V5 图标,效果上已经优于 volantis 的 note 标签。故不再额外引入 volantis 的 note 样式。

1
2
3
4
5
6
7
8
9
10
11
12
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: simple
icons: false
border_radius: 3
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0
1
2
3
4
5
6
7
8
# 自带icon
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
# 外部icon
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
  1. 自带icon
参数用法
class【可选】标识,不同的标识有不同的配色( default / primary / success / info / warning / danger )
no-icon【可选】不显示 icon
style【可选】可以覆盖配置中的 style(simple/modern/flat/disabled)
  1. 外部icon
参数用法
class【可选】标识,不同的标识有不同的配色( default / primary / success / info / warning / danger )
no-icon【可选】可配置自定义 icon (只支持 fontawesome 图标,也可以配置 no-icon)
style【可选】可以覆盖配置中的 style(simple/modern/flat/disabled)
自带icon
1. simple 样式
1
2
3
4
5
6
7
{% 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 %}
2. modern 样式
1
2
3
4
5
6
7
{% 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 %}
3. flat 样式
1
2
3
4
5
6
7
{% 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 %}
4. disabled 样式
1
2
3
4
5
6
7
{% 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 %}
5. no-icon 样式
1
2
3
4
5
6
7
{% 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 %}
外部icon

这里我简单做个演示,样式参照上面,这里演示对应flat,我个人比较喜欢这种样式

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

自带icon
1. simple 样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

2. modern 样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

3. flat 样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

4. disabled 样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

5. no-icon 样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

外部icon

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢?还是四片?

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

折叠框 folding

1
2
{% folding 参数(可选), 描述标题 %}
{% endfolding %}

参数如下:

  1. 颜色:blue, cyan, green, yellow, red

  2. 状态:状态填写 open 代表默认打开。
    参数之间使用空格隔开即可

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
29
30
31
32
33
34
35
36
{% folding 查看图片测试 %}

![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

{% 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/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}
查看图片测试

查看默认打开的折叠框

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

查看代码测试

假装这里有代码块(代码块没法嵌套代码块)

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

hahaha

分栏 tab

1
2
3
4
5
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name :

选项卡块标签的唯一名称,不带逗号。
将在 #id 中用作每个标签及其索引号的前缀。
如果名称中包含空格,则对于生成 #id,所有空格将由破折号代替。
仅当前帖子 / 页面的 URL 必须是唯一的!

[index]:

活动选项卡的索引号。
如果未指定,将选择第一个标签(1)。
- 如果 index 为 - 1,则不会选择任何选项卡。
可选参数。

[Tab caption]:

- 当前选项卡的标题。
如果未指定标题,则带有制表符索引后缀的唯一名称将用作制表符的标题。
如果未指定标题,但指定了图标,则标题将为空。
可选参数。

[@icon]:

FontAwesome 图标名称(全名,看起来像 “fas fa-font”)
可以指定带空格或不带空格;
例如’Tab caption @icon’ 和 ‘Tab caption@icon’.
可选参数。
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 %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

TimeLine

1
2
3
4
5
6
7
8
{% timeline 时间线标题(可选)[,color] %}
<!-- timeline 时间节点(标题) -->
正文内容
<!-- endtimeline -->
<!-- timeline 时间节点(标题) -->
正文内容
<!-- endtimeline -->
{% endtimeline %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% timeline 个人碎碎念,blue %}

<!-- timeline 2023-01-25 初四在家摆烂呢 -->

首次推上

<!-- endtimeline -->

<!-- timeline 2023-01-24 大年初三啦 -->

首次使用

<!-- endtimeline -->

<!-- timeline 2023-01-22 新年好~ -->

首次认识到timeLine
过大年啦~

<!-- endtimeline -->

{% endtimeline %}

个人碎碎念

2023-01-25 初四在家摆烂呢

首次推上

2023-01-24 大年初三啦

首次使用

2023-01-22 新年好~

首次认识到timeLine
过大年啦~

阿里图标 icon

This is Tab 1.

This is Tab 2.

This is Tab 3.