下为Note标签插件的一些用法示例:
PS:需要注意的是,SVG图标需要重载才可更新,刷新是无法正确应用代码的。
小技巧这是一个技巧提示示例,用于辅助信息
信息说明这是一条普通信息提示,用于中性通知
注意事项需要特别注意的内容,用于预防性提醒
严重警告高风险操作,用于可能造成损失的场景
核心要点关键性信息提示,用于强调重点的内容
常规说明通用型信息提示,适合大部分基础场景
操作成功流程完成提示,用于确认性成功的反馈
自定义标题Note标签本质上只是预设了样式的CSS代码,通过手动添加SVG图标就可以实现自定义效果
{% note tip 小技巧 %}
这是一个技巧提示示例,用于辅助信息
{% endnote %}
{% note info 信息说明 %}
这是一条普通信息提示,用于中性通知
{% endnote %}
{% note caution 注意事项 %}
需要特别注意的内容,用于预防性提醒
{% endnote %}
{% note warning 严重警告 %}
高风险操作,用于可能造成损失的场景
{% endnote %}
{% note important 核心要点 %}
关键性信息提示,用于强调重点的内容
{% endnote %}
{% note default 常规说明 %}
通用型信息提示,适合大部分基础场景
{% endnote %}
{% note success 操作成功 %}
流程完成提示,用于确认性成功的反馈
{% endnote %}
{% note tip %}
<div class="blockquote-note__header">
<div class="blockquote-note__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17">
<path fill-rule="evenodd" d="M13 0H3a3.1 3.1 0 0 0-3 3v6a3.1 3.1 0 0 0 3 3h1v3l3-3h6a3.1 3.1 0 0 0 3-3V3a3.1 3.1 0 0 0-3-3m-1.3 6.7-2 2A.9.9 0 0 1 9 9H8V7H4V5h4V3h1a.9.9 0 0 1 .7.3l2 2a1 1 0 0 1 0 1.4"/>
</svg>
</div>
自定义标题
</div>
Note标签本质上只是预设了样式的CSS代码,通过手动添加SVG图标就可以实现自定义效果<br>
{% endnote %}本文作者:晝行燈
版权声明:本文采用 CC BY-NC 4.0 协议授权
转载需注明作者及原文链接: https://mansifield.pages.dev/1l434p/