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 这里没有验证码 %}
带下划线 的文本 带着重点 的文本 带波浪线 的文本内容 带 删除线 的文本 键盘样式的文本 command + D 密码样式的文本:这里没有验证码 段落文本 p 1 {% p 样式参数(参数以空格划分), 文本内容 %}
字体: logo, code 颜色: red,yellow,green,cyan,blue,gray 大小: small, h4, h3, h2, h1, large, huge, ultra 对齐方向: 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 %}
引用note 最新版 butterfly 标签支持引用 fontawesome V5 图标,效果上已经优于 volantis 的 note 标签。故不再额外引入 volantis 的 note 样式。
1 2 3 4 5 6 7 8 9 10 11 12 note: style: simple icons: false border_radius: 3 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 %}
自带icon 参数 用法 class 【可选】标识,不同的标识有不同的配色( default / primary / success / info / warning / danger ) no-icon 【可选】不显示 icon style 【可选】可以覆盖配置中的 style(simple/modern/flat/disabled)
外部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 样式 2. modern 样式 3. flat 样式 4. disabled 样式 5. no-icon 样式 外部icon 折叠框 folding 1 2 {% folding 参数(可选), 描述标题 %} {% endfolding %}
参数如下:
颜色:blue, cyan, green, yellow, red
状态:状态填写 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 %}
查看图片测试 查看默认打开的折叠框 查看代码测试 查看列表测试 查看嵌套测试 查看嵌套测试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 %}
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 %}
阿里图标 icon