Hexo标签CallOut使用方法

简单讲解，就是有颜色有icon的注释，在hexo下该主题中的使用方法。

找到主题官方的介绍了。

实例

info

{% message color:info size:default icon:"fa-brands fa-github" title:INFO的提示框 %}
这是info的颜色。
{% endmessage %}

INFO的提示框

这是info的颜色。

Success

{% message color:success icon:"fa-solid fa-check-circle" title:成功 %}
操作成功，数据已保存。
{% endmessage %}

成功

操作成功，数据已保存。

Warning

{% message color:warning icon:"fa-solid fa-exclamation-triangle" title:警告 %}
请检查输入内容是否完整。
{% endmessage %}

警告

请检查输入内容是否完整。

Danger

{% message color:danger icon:"fa-solid fa-times-circle" title:错误 %}
系统发生错误，请联系管理员。
{% endmessage %}

错误

系统发生错误，请联系管理员。

Icon可选

从Font Awesome中选择

图标	类名（完整）	用途示例
	fa-solid fa-info-circle	信息提示
	fa-solid fa-check-circle	操作成功
	fa-solid fa-times-circle	操作失败
	fa-solid fa-exclamation-triangle	警告提示
	fa-solid fa-lightbulb	小贴士 / 灵感
	fa-solid fa-star	推荐 / 收藏
	fa-solid fa-book	教程 / 文档
	fa-solid fa-code	代码 / 技术相关
	fa-brands fa-github	GitHub 链接
	fa-brands fa-google	Google 品牌图标
	fa-solid fa-terminal	命令行 / 编程
	fa-solid fa-pen-nib	写作 / 编辑
	fa-solid fa-comment-dots	评论 / 留言
	fa-solid fa-link	链接地址
	fa-solid fa-envelope	邮箱 / 联系方式

---

标签切换

格式：

{% tabs size:<大小> align:<对齐> style:<样式> %}
<!-- tab id:<标签ID> icon:<图标> title:<标签标题> active -->
<标签内容>
<!-- endtab -->
<!-- tab id:<标签ID> icon:<图标> title:<标签标题> -->
<标签内容>
<!-- endtab -->
...
{% endtabs %}

基本用法

{% tabs  style:boxed %}
<!-- tab id:1 icon:icon:fa-brands fa-github title:Github active -->
这个是Github的tab
<!-- endtab -->
<!-- tab id:2 icon:con:fa-brands fa-node-js title:Node.js -->
这是Node.js的tab
<!-- endtab -->
{% endtabs %}

• Github
• Node.js

这个是Github的tab

这是Node.js的tab