Butterfly 标签外挂语法速查

参考：Butterfly 官方文档

1. 行内文本样式 text

语法：

1
2
3
4
5
6
{% u 下划线文本 %}
{% emp 着重号文本 %}
{% wavy 波浪线文本 %}
{% del 删除线文本 %}
{% kbd 键盘样式 %}
{% psw 密码文本 %}

效果：

  1. 带 下划线 的文本
  2. 带 着重号 的文本
  3. 带 波浪线 的文本
  4. 带 删除线 的文本
  5. 键盘样式的文本 Ctrl + C
  6. 密码样式的文本：这里没有验证码

2. 行内文本 span

语法：

1
{% span 样式参数(参数以空格划分), 文本内容 %}

参数：

  • 字体: logo, code
  • 颜色: red, yellow, green, cyan, blue, gray
  • 大小: small, h4, h3, h2, h1, large, huge, ultra
  • 对齐: left, center, right

效果：

彩色文字：红色、黄色、绿色、青色、蓝色、灰色

超大号文字：

A Wonderful Theme for Hexo

3. 段落文本 p

语法：

1
{% p 样式参数, 文本内容 %}

效果：

红色段落文本

居中大号文本

右对齐蓝色文本

4. 上标标签 tip

语法：

1
{% tip [样式] %}文本内容{% endtip %}

样式选项： success, error, warning, bolt, ban, home, sync, cogs, key, bell 或自定义 fontawesome 图标

效果：

默认情况

success 成功

error 错误

warning 警告

bolt 闪电

ban 禁止

home 首页

5. 折叠框 folding

语法：

1
2
3
{% folding [颜色] [open], 标题 %}
内容...
{% endfolding %}

颜色选项： blue, cyan, green, yellow, red
状态： open 表示默认打开

效果：

查看图片测试

这里可以放图片或其他内容

查看默认打开的折叠框

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

查看列表测试
  • 列表项 1
  • 列表项 2
  • 列表项 3
查看嵌套测试
嵌套折叠框

嵌套内容

6. 注释 notation

语法：

1
{% nota 注释词汇 , 悬停显示的注解内容 %}

效果：

把鼠标移动到我上面试试

7. 复选框 checkbox

语法：

1
2
3
4
{% checkbox, 未完成的任务 %}
{% checkbox checked, 已完成的任务 %}
{% checkbox red, 红色复选框 %}
{% checkbox green checked, 绿色已完成 %}

颜色选项： red, green, yellow, cyan, blue

效果：

未完成的任务

已完成的任务

红色复选框

绿色已完成

黄色复选框

青色复选框

8. 单选框 radio

语法：

1
2
3
{% radio, 选项一 %}
{% radio checked, 选项二（默认选中） %}
{% radio cyan, 选项三 %}

效果：

选项一

选项二（默认选中）

选项三

选项四

选项五

9. 标签 label

语法：

1
{% label 文字 颜色 %}

颜色选项： default, blue, pink, red, purple, orange, green

效果：

默认 蓝色 粉色 红色 紫色 橙色 绿色

10. 进度条 progress

语法：

1
2
{% progress 80 green 下载进度 80% %}
{% progress 50 blue 处理中... %}

颜色选项： blue, green, yellow, red, cyan, gray

效果：

下载进度

处理中…

等待中

任务完成

11. 选项卡 tabs

语法：

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡ID %}

<!-- tab 选项1名称 -->
选项1内容
<!-- endtab -->

<!-- tab 选项2名称 -->
选项2内容
<!-- endtab -->

{% endtabs %}

效果：

这是选项一的内容

  • 支持 Markdown
  • 支持代码块

这是选项二的内容

1
console.log("Hello World");

这是选项三的内容

12. 按钮组 btns

语法：

1
2
3
{% btns center %}
{% cell 按钮文字, https://链接地址, 图标类名 %}
{% endbtns %}

布局选项： center, around, grid2, grid3, grid4, rounded, circle

效果：

GitHub Google

语法：

1
2
{% link 标题, https://链接地址 %}
{% link 标题, https://链接地址, 图标地址 %}

效果：

GitHub

https://github.com

Google

https://google.com

14. 时间线 timeline

语法：

1
2
3
4
5
6
7
8
9
10
11
{% timeline 标题, 颜色 %}

<!-- timeline 时间点1 -->
内容1
<!-- endtimeline -->

<!-- timeline 时间点2 -->
内容2
<!-- endtimeline -->

{% endtimeline %}

颜色选项： default, blue, pink, red, purple, orange, green

效果：

2024

01-01

项目正式启动，开始需求分析

02-15

完成核心功能开发

03-01

Beta 版本发布

04-01

正式版本上线

15. 徽章 badge

语法：

1
{% bdage 右侧文字,左侧文字,logo||颜色 %}

效果：

16. 网站卡片组 sitegroup

语法：

1
2
3
{% sitegroup 分组标题 %}
{% site 网站名, url=地址, screenshot=截图, description=描述 %}
{% endsitegroup %}

效果：

推荐网站

GitHub代码托管平台
Google搜索引擎

💡 提示： 点击工具栏的「🏷️ 标签外挂」按钮可以快速插入各种标签！

17. Note 提示块

语法：

1
2
3
4
5
6
{% note default %}默认提示{% endnote %}
{% note primary %}主要提示{% endnote %}
{% note success %}成功提示{% endnote %}
{% note info %}信息提示{% endnote %}
{% note warning %}警告提示{% endnote %}
{% note danger %}危险提示{% endnote %}

效果：

This is my website, click the button