标签插件使用参考
资源引入
使用参考
checkbox
{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% checkbox red, 支持自定义颜色 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 增加 %}
{% checkbox minus yellow checked, 减少 %}
{% checkbox times red checked, 叉 %}
|
radio
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}
|
按钮
不设置任何参数的 {% btn 按钮, / %} 适合融入段落中。
regular 按钮适合独立于段落之外：
{% btn regular, 示例博客, https://xaoxuu.com, fas fa-play-circle %}
large 按钮更具有强调作用，建议搭配 center 使用：
{% btn center large, 开始使用, https://volantis.js.org/v3/getting-started/, fas fa-download %}
|
不设置任何参数的 / 适合融入段落中。
regular 按钮适合独立于段落之外：
示例博客
large 按钮更具有强调作用，建议搭配 center 使用：
download
富文本按钮
{% btns circle grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% endbtns %}
|
{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbtns %}
|
圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
{% btns circle center grid5 %}
<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
<i class='fab fa-apple'></i>
<b>心率管家</b>
{% p red, 专业版 %}
<img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'>
</a>
<a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'>
<i class='fab fa-apple'></i>
<b>心率管家</b>
{% p green, 免费版 %}
<img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}
|
图片
添加描述：
{% image https:
指定宽度：
{% image https:
指定宽度并添加描述：
{% image https:
|
指定宽度：
指定宽度并添加描述：
自定义note
/* default */
<div class="note icon custom iconfont icon-QQ2" style="background: #f7f7f7;border-left-color: #777;"><p>default</p></div>
/* success */
<div class="note icon custom iconfont icon-QQ2" style="background: #eff8f0;border-left-color: #5cb85c;"><p>success</p></div>
/* primary */
<div class="note icon custom iconfont icon-QQ2" style="background: #f5f0fa;border-left-color: #6f42c1;"><p>primary</p></div>
/* info */
<div class="note icon custom iconfont icon-QQ2" style="background: #eef7fa;border-left-color: #428bca;"><p>info</p></div>
/* warning */
<div class="note icon custom iconfont icon-QQ2" style="background: #fdf8ea;border-left-color: #f0ad4e;"><p>warning</p></div>
/* danger */
<div class="note icon custom iconfont icon-QQ2" style="background: #fcf1f2;border-left-color: #d9534f;"><p>danger</p></div>
|
/* default */
/* success */
/* primary */
/* info */
/* warning */
/* danger */
另外的note
/* note语法示例 */
<p class='div-border green'>绿色</p>
<p class='div-border red'>红色</p>
<p class='div-border yellow'>黄色</p>
<p class='div-border grey'>灰色</p>
<p class='div-border blue'>蓝色</p>
/* 小tag标签语法示例 */
<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>
|
/* note语法示例 */
绿色
红色
黄色
灰色
蓝色
/* 小tag标签语法示例 */
红色小标签
绿色小标签
蓝色小标签
黄色小标签
灰色小标签
渐变note
<div class='tip' ><p>默认情况<p></div>
<div class='tip success'><p>success<p></div>
<div class='tip error'><p>error<p></div>
<div class='tip warning'><p>warning<p></div>
|
时间线
