Shields.io 给个人主页定制动态数据小牌子

发布于 2022-04-20  21 次阅读


如果你浏览过一些 GitHub 的开源项目,你一定见过很多 README 文档中都会出现的五颜六色、各式各样的「小牌子」。

经常出现在 GitHub 项目里面的小牌子经常出现在 GitHub 项目里面的小牌子

最初,这些「小牌子」的主要作用是为了显示「某个 GitHub 项目」的「某种状态」,比如项目的编译是否成功、文档是否更新至最新、软件的下载数量有多少……不过,从原理的角度来说,这些「小牌子」都是通过我们给「牌子渲染服务器」提供一些数据后,服务器返回给我们一个 SVG 格式的图片来工作的。我们将返回的 SVG 图片嵌入到 GitHub 的 README 文档或其他网页里面,就完成了一个「小牌子」的制作。

因此,我们不仅可以将这些「小牌子」用在 GitHub 里,如果你拥有自己的「个人主页」、「博客」或其他展示个人资料的地方,只要你可以控制网页的 HTML,能自己向其中插入一些自定义代码,你就可以借助于「小牌子服务器」来自制一些好看又能实时更新的「个人资料展示牌」、「订阅地址标识牌」等等。

Shields.io 的基本用法

简单定制静态小牌子

Shields.io 就是一个我们开头提到的「牌子渲染服务」。事实上,GitHub 上面大部分「小牌子」都是用 Shields.io 来渲染的。我们可以借助于 Shields.io 服务定制一些个性化的「小牌子」。一个最简单的例子就是:https://img.shields.io/badge/少数派-SpencerWoo-da282a,这一请求可以渲染得到如下效果的小牌子。

少数派-SpencerWoo-da282a少数派-SpencerWoo-da282a

可以发现,简单定制小牌子非常方便,最最基础的语法规则就是:

https://img.shields.io/badge/{左半部分标签}-{右半部分标签}-{右半部分颜色}

另外,在 Shields.io 的官网上面有非常方便的「小牌子生成器」,我们可以直接用它来构造一个「小牌子」,只需要按照下图的样子:填入左半边标签、填入右半边标签,再定义右半边的颜色,点击 Make Badge 即可生成。其中,右半边的颜色我们可以用官方提供的几种预设颜色名称(下方 Colors)或者我们自己提供十六进制颜色代码都可以。

shieldsShields.io 的静态小牌子生成器

我们按照上面的方法构造一个链接,就制作完成我们的小牌子啦!这样得到的链接是一个 SVG 图片链接,我们可以直接用插入图片的语法规则加到我们的 Markdown 文本文件中或 HTML 里面。

当然也可以构造一个动态实时更新的小牌子,本文不再赘述,以上教程来自于:

link1 - 用 Substats 和 Shields.io 为你的个人主页定制动态数据小牌子 - 少数派 (sspai.com)


为了艾泽拉斯!