【实用github项目】用 Substats 和 Shields.io 为你的个人主页定制动态数据小牌子
本文最后更新于 2024-04-04,
若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益, 请联系我 删除。
本站只有Telegram群组为唯一交流群组, 点击加入
文章内容有误?申请成为本站文章修订者或作者? 向站长提出申请
看到几个花花绿绿的小牌子了吗?
这些「小牌子」都是通过我们给「牌子渲染服务器」提供一些数据后,服务器返回给我们一个 SVG 格式的图片来工作的。我们将返回的 SVG 图片嵌入到 GitHub 的 README 文档或其他网页里面,就完成了一个「小牌子」的制作。
因此,我们不仅可以将这些「小牌子」用在 GitHub 里,如果你拥有自己的「个人主页」、「博客」或其他展示个人资料的地方,只要你可以控制网页的 HTML,能自己向其中插入一些自定义代码,你就可以借助于「小牌子服务器」来自制一些好看又能实时更新的「个人资料展示牌」、「订阅地址标识牌」等等。
使用Shields.io 制作静态小牌子
Shields.io 就是一个我们开头提到的「牌子渲染服务」。事实上,GitHub 上面大部分「小牌子」都是用 Shields.io 来渲染的。我们可以借助于 Shields.io 服务定制一些个性化的「小牌子」。一个最简单的例子就是:https://img.shields.io/badge/求关注-小土豆-da282a
,这一请求可以渲染得到如下效果的小牌子。
通过放置参数,我们就可以生成属于自己的小牌子
定制小牌子的语法规则是:
https://img.shields.io/badge/{左半部分标签}-{右半部分标签}-{右半部分颜色}
我们按照上面的方法构造一个链接,就制作完成我们的小牌子啦!这样得到的链接是一个 SVG 图片链接,我们可以直接用插入图片的语法规则加到我们的 Markdown 文本文件中或 HTML 里面。
也可以访问这个地址https://github.com/Naereen/badges 里面预设了一些常用的小牌子,可以直接使用。
动态实时更新的小牌子
事实上,我们前面生成的小牌子都是静态的小牌子:其中的文本内容是固定不变的,仅能用于做一个好看的标识。而事实上,Shields.io 生成的小牌子完全支持动态数据显示,比如粉丝、关注者数量、RSS 订阅者数量……
如果我们想要显示一些动态变化的数据,那么我们就需要一个受支持的数据接口,这样我们的「Shields.io 小牌子生成服务器」就会先行从这一数据接口请求相应的动态数据,并按照请求的结果将数据渲染成不同的「小牌子」。
但是,虽然 Shields.io 服务 API 的功能非常完善,能够支持许多第三方 API 节点的数据服务,但是有一些服务:
- API 接口返回复杂,无法直接用 Shields.io 简单处理
- API 访问缓慢、不稳定,经常出现超时或无法访问的情况
- 访问一些数据需要进行认证,直接访问会返回 403 无权限
- 直接不对外公开 API 接口,没有面向开发者的开放平台,无法直接请求数据
当我们想要显示这些平台的关注者数量、粉丝数量时,往往就力不从心了。因此,我使用 Substats 项目,用来专门处理这些单靠 Shields.io 不方便直接处理的疑难杂症。
- Substats 项目开源在:GitHub - spencerwooo/Substats
- Substats 的 API 地址位于:Home - Substats API
- 另外,关于如何调用 Substats API,请参照文档:Substats Documentation
下面我来简单介绍一下如何利用 Substats 配合 Shields.io 定制小牌子 ( •̀ ω •́ )✧
通过 Substats API 获取我们期望的数据
为了更好的配合 Shields.io 服务,使用 Substats 的 API 设计成简单拼接 URL 即可进行数据请求。Substats API 的语法非常简单,我们只需要关注并提供如下的两个字段即可进行请求:
- 目标服务名称
source
:你所想要请求的服务、网站和平台名(比如:sspai
、weibo
……) - 请求数据标签
queryKey
:在这一服务中查询的关注数据对应的标签或名称(比如我的github用户名是zxcAS568)
这样,我们就可以用这样的语法来拼接一个 URL(注意第一个字符是 ?
,其他用 &
拼接):
非常方便!这一 URL 会给我们返回类似下面的 JSON 结果:
{
"status": 200,
"data": {
"totalSubs": 999,
"subsInEachSource": {
"sspai": 999
},
"failedSources": {}
}
}
我们可以这样理解返回的 JSON 数据:
status
是请求是否成功,成功即为 200(表示 HTTP OK)data
就是请求返回的数据(其中totalSubs
表示总关注数量,subsInEachSource
表示每个服务请求到的粉丝数据,最后failedSources
表示请求失败的数据源。)
接下来,我们只需要告诉 Shields.io:
- 我们请求的 URL 地址
- 返回数据中所要的字段
用 Shields.io 制作最终动态小牌子
-
https://api.spencerwoo.com/substats/
简单来说,就是先找到自己想展示的 API URL,比如我的 GitHub URL 就是:
https://api.spencerwoo.com/substats/?source=github&queryKey=zxcAS568
。一般都只需要修改source
后面的目标服务器以及queryKey
后面的请求数据标签,前者一般都是平台名,后者一般都是用户名。 -
data type
选择json
。 -
label
选择数据牌左侧你想展示的东西,比如我想展示的是GitHub
。 -
query
填:$.data.totalSubs
。 -
color
填写一个十六进制的颜色代码。 -
剩下两个分别是数据牌右侧展示数据的前缀和后缀,我一般会填一个后缀
关注数
。
当然,有些平台的用户名并不是你的用户名而是一串独特的数字(比如微博),具体请参考 API 文档。
你也可以在给标签加个超链接指向自己的主页
直接使用 Markdown 的插入图片语法:![](这里粘贴地址栏地址)
你也可以使用现成的服务
直接填入你的ID就可以自动生成小牌子路径了。支持比较少,如果有别的平台需要自己调用API制作。