富文本按钮(名片展示)
测试
移植的富文本按钮,用来展示人员名单……
因此这里命名为“名片展示”。
显示头像、名称以及描述,
目前额外支持利用QQ号进行展示的模式。
QQ显示模式
QQ: 1021889213
负责博客的建立与运营……
名称加载中_(:зゝ∠)_……QQ: 1072205920
负责跟我吃烧烤……
名称加载中_(:зゝ∠)_……QQ: 1105895619
负责在床上跳……
名称加载中_(:зゝ∠)_……QQ: 812083429
负责带我apex……
名称加载中_(:зゝ∠)_……QQ: 1326213837
负责带我bf……
名称加载中_(:зゝ∠)_……QQ: 2501536935
负责在群里说怪话……
名称加载中_(:зゝ∠)_……QQ: 1499597214
负责催我ff主线orz……
【这群家伙是这里的亲友们,不希望去打扰哦_(:зゝ∠)_……
直接显示模式
小天使!……
M14……指挥官,M14,不会让您失望的!……
测试!……测试一个短内容……
测试!……唯一指定邮箱: mrQuin33@live.com
测试一个长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长内容……
【这样式好看,好看啊!.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
)
describe
- 名片的描述private
- 是否设置隐私模式(不展示 QQ 号,点击也不会唤起 QQ)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 模式等……