Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

外链卡片

请将您的 Volantis 升级至 3.0 版本以上使用。

基础按钮

请将您的 Volantis 升级至 2.4 版本以上使用。

{% btn 样式参数(可选), 标题, 链接, 图标(可选) %}

可选的参数可以省略,但是前后顺序不能乱。

样式参数

regular, large, center

图标

第1个或者第2个参数包含 fa- 的那个被识别为图标。

example.md:
不设置任何参数的 {% 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 %}

行内按钮

不设置任何参数的 按钮 适合融入段落中。

空心按钮

示例博客 示例博客

示例博客 示例博客

居中:

开始使用

实心按钮

示例博客 示例博客

示例博客 示例博客

居中:

开始使用

富文本按钮

请将您的 Volantis 升级至 2.3 版本以上使用。

{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}

样式参数位置可以写图片样式、布局方式,多个样式参数用空格隔开。

圆角样式

默认为方形

rounded, circle

布局方式

默认为自动宽度,适合视野内只有一两个的情况。

参数含义
wide宽一点的按钮
fill填充布局,自动铺满至少一行,多了会换行。
center居中,按钮之间是固定间距。
around居中分散
grid2等宽最多2列,屏幕变窄会适当减少列数。
grid3等宽最多3列,屏幕变窄会适当减少列数。
grid4等宽最多4列,屏幕变窄会适当减少列数。
grid5等宽最多5列,屏幕变窄会适当减少列数。

增加文字样式

可以在容器内增加 <b>标题</b><p>描述文字</p>

如果需要显示类似「团队成员」之类的一组含有头像的链接:

example.md:
{% btns circle grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% endbtns %}

或者含有图标的按钮:

example.md:
{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbtns %}

圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

example.md:
{% 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://gcore.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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}

如果需要显示类似「团队成员」之类的一组含有头像的链接:

或者含有图标的按钮:

圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

下拉菜单

请将您的 Volantis 升级至 3.0 版本以上使用。

User Exchange Area

This is only for communication between users. If you have any questions, please go to GitHub to submit an issue. Asking questions in the comment area will not receive any response from the developer!