通过json生成talk-card

融入段落中按钮

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

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

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

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

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

上述实例源码

不设置任何参数的 {% btn 按钮, / %} 适合融入段落中。

不设置任何参数的 {% btn warning, 按钮, / %} 适合融入段落中。

不设置任何参数的 {% btn info, 按钮, / %} 适合融入段落中。

不设置任何参数的 {% btn success, 按钮, / %} 适合融入段落中。

不设置任何参数的 {% btn danger, 按钮, / %} 适合融入段落中。

空心和实心按钮

示例博客 示例博客

上述实例源码

{% btn hollow, 示例博客, https://baidu.com, fa fa-qq %}
{% btn solid, 示例博客, https://baidu.com, fa fa-weixin %}

大点的按钮和样式

开始使用

上述实例源码

{% btn center large, 开始使用, https://baidu.com, fa fa-download %}

环形按钮

开始使用

上述实例源码

{% btn center large round solid, 开始使用, https://baidu.com, fa fa-download %}

warning等颜色按钮

开始使用 开始使用 开始使用 开始使用 开始使用

上述实例源码

{% btn large round solid warning, 开始使用, https://baidu.com, fa fa-download %}
{% btn large round solid info, 开始使用, https://baidu.com, fa fa-download %}
{% btn large round solid success, 开始使用, https://baidu.com, fa fa-download %}
{% btn large round solid danger, 开始使用, https://baidu.com, fa fa-download %}
{% btn large solid success, 开始使用, https://baidu.com, fa fa-download %}

warning等颜色空心按钮

开始使用 开始使用 开始使用 开始使用 开始使用

上述实例源码

{% btn large warning hollow, 开始使用, https://baidu.com, fa fa-download %}
{% btn large info hollow, 开始使用, https://baidu.com, fa fa-download %}
{% btn large success hollow, 开始使用, https://baidu.com, fa fa-download %}
{% btn large danger hollow, 开始使用, https://baidu.com, fa fa-download %}
{% btn success hollow, 开始使用, https://baidu.com, fa fa-download %}

warning等颜色空心环形居中按钮

开始使用 开始使用

{% btn large danger hollow center round, 开始使用, https://baidu.com, fa fa-download %}
{% btn danger hollow center round, 开始使用, https://baidu.com, fa fa-download %}

带有头像和名称的按钮

一行两个

草帽海贼团 小绵羊 沫兮 凯爹 阿离 韩信

上述实例源码

{% btns circle grid2 %}
  {% cell 草帽海贼团, https://baidu.com, https://img2.woyaogexing.com/2021/01/30/007e3777e7e64c4aae95ae812708a7bf!400x400.jpeg %}
  {% cell 小绵羊, https://baidu.com, https://img2.woyaogexing.com/2021/01/30/4c59f9dd4aae421fae21344aec8c7b60!400x400.jpeg %}
  {% cell 沫兮, https://baidu.com, https://img2.woyaogexing.com/2021/01/30/1b2aec116f0b49c682badc5befd43905!400x400.jpeg %}
  {% cell 凯爹, https://baidu.com, https://p.qqan.com/up/2021-1/16112058848478910.jpg %}
  {% cell 阿离, https://baidu.com, https://p.qqan.com/up/2021-1/16118869719896010.jpg %}
  {% cell 韩信, https://baidu.com, https://p.qqan.com/up/2021-1/16118869704182020.jpg %}
{% endbtns %}

一行三个

QQ头像 随机动漫头像 随机男生头像 随机女生头像 随机动漫女头像 随机动漫男头像

上述实例源码

{% btns circle grid3 %}
  {% cell QQ头像, https://baidu.com, http://q1.qlogo.cn/g?b=qq&nk=1730241541&s=640 %}
  {% cell 随机动漫头像, https://baidu.com, http://api.btstu.cn/sjtx/api.php?lx=c1&format=images %}
  {% cell 随机男生头像, https://baidu.com, http://api.btstu.cn/sjtx/api.php?lx=a1&format=images %}
  {% cell 随机女生头像, https://baidu.com, http://api.btstu.cn/sjtx/api.php?lx=b1&format=images %}
  {% cell 随机动漫女头像, https://baidu.com, http://api.btstu.cn/sjtx/api.php?lx=c2&format=images %}
  {% cell 随机动漫男头像, https://baidu.com, http://api.btstu.cn/sjtx/api.php?lx=c3&format=images %}
{% endbtns %}

一行四个

随机Github头像 随机Github头像 随机Github头像 随机Github头像 随机Github头像

上述实例源码

{% btns circle grid4 %}
  {% cell 随机Github头像, https://baidu.com, https://api.prodless.com/avatar.png %}
  {% cell 随机Github头像, https://baidu.com, https://api.prodless.com/avatar.png %}
  {% cell 随机Github头像, https://baidu.com, https://api.prodless.com/avatar.png %}
  {% cell 随机Github头像, https://baidu.com, https://api.prodless.com/avatar.png %}
  {% cell 随机Github头像, https://baidu.com, https://api.prodless.com/avatar.png %}
{% endbtns %}

一行五个

随机头像 随机头像id 随机头像id 随机头像id 随机头像id

随机风景 随机风景 随机风景 随机风景 随机风景

上述实例源码

{% btns circle grid5 %}
  {% cell 随机头像, https://baidu.com, https://picsum.photos/200 %}
  {% cell 随机头像id, https://baidu.com, https://picsum.photos/id/1/200 %}
  {% cell 随机头像id, https://baidu.com, https://picsum.photos/id/2/200 %}
  {% cell 随机头像id, https://baidu.com, https://picsum.photos/id/3/200 %}
  {% cell 随机头像id, https://baidu.com, https://picsum.photos/id/4/200 %}
{% endbtns %}

{% btns circle grid5 %}
  {% cell 随机风景, https://baidu.com,   https://api.ixiaowai.cn/gqapi/gqapi.php %}
  {% cell 随机风景, https://baidu.com,   https://api.ixiaowai.cn/gqapi/gqapi.php %}
  {% cell 随机风景, https://baidu.com,   https://api.ixiaowai.cn/gqapi/gqapi.php %}
  {% cell 随机风景, https://baidu.com,   https://api.ixiaowai.cn/gqapi/gqapi.php %}
  {% cell 随机风景, https://baidu.com,   https://api.ixiaowai.cn/gqapi/gqapi.php %}
{% endbtns %}

环形图标按钮

下载源码 查看文档

上述事例代码

{% btns rounded grid5 %}
  {% cell 下载源码, /, fa fa-download %}
  {% cell 查看文档, /, fa fa-book %}
{% endbtns %}

环形图标居中按钮

下载源码 查看文档

上述事例代码

{% btns rounded grid5 center %}
  {% cell 下载源码, /, fa fa-download %}
  {% cell 查看文档, /, fa fa-book %}
{% endbtns %}

环形图标填充按钮

下载源码 查看文档

上述事例代码

{% btns rounded grid5 fill %}
  {% cell 下载源码, /, fa fa-download %}
  {% cell 查看文档, /, fa fa-book %}
{% endbtns %}

圆形图标按钮

这个是微信

微信

这个是支付宝

支付宝

上述示例代码

{% btns circle center grid5 %}
  <a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
    <i class='fa fa-apple'></i>
    <b>这个是微信</b>
    {% p red, 微信 %}
    <img src='/medias/wx.jpg'>
  </a>
  <a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'>
    <i class='fa fa-apple'></i>
    <b>这个是支付宝</b>
    {% p green, 支付宝 %}
    <img src='/medias/zfb.jpg'>
  </a>
{% endbtns %}