Note标签的用法

文章目录

下为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/