带颜色的提示

普通引用

一般我们可以使用普通的引用来作为提示使用,例如:

1
> 这是一条普通的引用。

渲染结果

这是一条普通的引用。

但是只有这种单一的引用,看着很不舒服,于是我去搜了一下,发现还有一些,接下来就介绍一下:

Notice(普通通知)

1
2
3
4
{% note notice %}
这是普通通知提示框(notice),适用于常规说明。
支持**Markdown加粗**、[链接](https://lovone.top)等语法。
{% endnote %}

渲染结果

这是普通通知提示框(notice),适用于常规说明。
支持Markdown加粗链接等语法。

Warning(警告提示)

1
2
3
4
5
{% note warning %}
这是警告提示框(warning),适用于需要注意的事项:
1. 不要直接修改主题核心文件
2. 备份_config.yml后再调整配置
{% endnote %}

渲染结果

这是警告提示框(warning),适用于需要注意的事项:

  1. 不要直接修改主题核心文件
  2. 备份_config.yml后再调整配置

Danger(危险提示)

1
2
3
4
{% note danger %}
这是危险提示框(danger),适用于错误/风险提醒:
删除Hexo的public目录前,请确认已备份静态文件!
{% endnote %}

渲染结果

这是危险提示框(danger),适用于错误/风险提醒:
删除Hexo的public目录前,请确认已备份静态文件!

Success(成功提示)

1
2
3
4
{% note success %}
这是成功提示框(success),适用于完成/确认提醒:
文章发布成功!已自动生成静态文件并部署到服务器。
{% endnote %}

渲染结果

这是成功提示框(success),适用于完成/确认提醒:
文章发布成功!已自动生成静态文件并部署到服务器。

提示的总结

核心前提

确保你的Butterfly主题版本≥3.0(旧版本也支持基础提示框,但样式参数更少),无需额外配置,直接在文章的Markdown内容中使用即可。

基础用法(直接用)

Butterfly的提示框核心语法:

1
2
3
{% note 提示类型 可选参数 %}
提示框内的内容(支持Markdown语法)
{% endnote %}

支持的提示类型(核心)

类型 对应样式 适用场景
notice/default 蓝色(默认) 普通通知、说明
warning 黄色/橙色 警告、注意事项
danger 红色 错误、危险提示
success 绿色 成功、完成提示
info 浅蓝/青色 补充信息、小贴士
primary 深紫/深蓝 重点强调