主页
Featured image of post 富文本按钮测试……

富文本按钮测试……

主要用来展示人员列表的……

文章字数:1447
预计阅读时长: 分钟

富文本按钮(名片展示)

测试

移植的富文本按钮,用来展示人员名单……
因此这里命名为“名片展示”。

显示头像、名称以及描述,
目前额外支持利用QQ号进行展示的模式。

QQ显示模式

【这群家伙是这里的亲友们,不希望去打扰哦_(:зゝ∠)_……

直接显示模式

【这样式好看,好看啊!.jpg……

使用说明

{ {< btns layout="gird6" >} }

{ {< btn/cell type="direct" title="..." describe="..." image="/img/null.jpg" url="..." >} }

{ {< btns/cell type="QQ" QQ="..." describe="..." private="1" >} }

{ {< /btns >} }

外层:

  • layout - 展示方式(默认为gird6):
    选项 含义
    fill 填充布局,自动铺满至少一行,多了会换行。
    center 居中,按钮之间是固定间距。
    around 居中分散
    grid2 等宽最多 2 列,屏幕变窄会适当减少列数。
    grid3 等宽最多 3 列,屏幕变窄会适当减少列数。
    grid4 等宽最多 4 列,屏幕变窄会适当减少列数。
    grid5 等宽最多 5 列,屏幕变窄会适当减少列数。
    grid6 等宽最多 6 列,屏幕变窄会适当减少列数。

内层:

  • type - 名片种类,目前只有以下两种(默认为direct
    1. QQ - 按照 QQ 号进行展示,按钮会唤起 QQ 查看个人资料,含有以下参数:
      • QQ - 设置 QQ 号
      • describe - 名片的描述
      • private - 是否设置隐私模式(不展示 QQ 号,点击也不会唤起 QQ)
    2. direct - 直接设置展示,含有以下参数:
      • title - 名片的名称
      • contact - 名片的联系方式(字符串直接展示)
      • describe - 名片的描述
      • image - 头像地址(本地或 URL)
      • url - 点击后跳转的页面

跳转可能用到的url:

  • 唤起 QQ 名片 - https://tenapi.cn/qqzlk/?qq=QQ号
  • 添加 QQ 好友 - tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=QQ号
  • 唤起邮件应用 - mailto:邮箱地址

扩展记录

我觉得有必要记录下怎么扩展的功能,不然好久回来都忘了orz……

首先 CSS 依然来自于“DreamyTZK”的「Hexo 博客之 butterfly 主题优雅魔改系列」里的 CSS
找到含有.btns的样式,复制下来就是这个标签的样式。
然后在custom.scss里引入添加的 CSS。

然后 Shortcode 可能是自己要动手写吧,也不麻烦参考下之前写的东西就行。

如果需要添加TypeScript,在assets/ts里写好后,要在/layouts/partials/footer/components/script.html里添加引入。
需要注意调用 API 时的“CROS”跨域问题,目前只能找支持 CROS 响应头的 API 使用。

最后再改下 CSS 的适配,记得多用主题的变量。

然后就成了!……

感谢“DreamyTZK”在「Hexo 博客之 butterfly 主题优雅魔改系列」提供的 CSS,
以及“Volantis”提供的样式和用法参考

问题与计划

  • 目前的 API 获取 QQ 昵称速度太慢,以后考虑更换为 QQ 互联
  • 当嵌套在note中时,头像的显示不正常(负值的上margin未呈现)
  • 可以根据需要考虑支持微信模式、Bilibili 模式等……