用 Shields.io 数据牌 + GitHub 统计卡片美化你的 GitHub profile_ZNDS问答

cuike0728

一、在 GitHub 中发现小彩蛋

首先，在 GitHub 中创建和账号同名的一台 repository，就会发现这个小彩蛋。

二、编写 README，完善属于自个的 profile

用 Typora 打开创建完的这个项目下的 README 文件，可以看到如下界面。

你可以根据自个需求填写相关信息，完善属于自个的 profile。当然，也有美化 README 的方法。
三、认识 http://Shields.io

在浏览 GitHub 项目的时候，经常可以发现下图所示的数据牌展示。我们完全可以使用数据牌进行美化自个的 profile。

Shields.io 就可以完成我们的这个需求，它其实就是一台「牌子渲染服务」。里面分为静态展示数据牌和动态展示数据牌。
四、静态数据牌展示

静态的比较简单。

label 写要展示的名字，比如：CSDN。
message 可以写展示数据，比如：全国前 4K 名。
color 选择一台颜色（当然，也可以到这里找喜欢的颜色，输入对应的十六进制代码）。

然后点右边的 Make Badage，就会看到效果展示了：

然后复制地址栏里的地址，直接使用 Markdown 的插入图片语法：![](这里粘贴地址栏地址)，就可以展示出来了。但是需要注意的是，这种方法是静态展示，如果数据改变了，需要自个手动更新，不够自动化。
五、动态数据牌展示

动态展示相比静态展示，自然就更加自动化，可以实时更新数据。
这里介绍 SpencerWoo 开发的 Substats 小工具。使用教程可以参考开发人员写的这篇文章，当然也可以自个查看使用文档。

简单来说，就是先找到自个想展示的 API URL，比如我的 GitHub URL 就是：https://api.spencerwoo.com/substats/?source=github&queryKey=Wonz5130。一般都只需要修改 source 后面的目标服务器以及 queryKey 后面的请求数据标签，前者一般都是平台名，后者一般都是用户名。
data type 选择 json 。
label 选择数据牌左侧你想展示的东西，比如我想展示的是 GitHub。
query 填： $.data.totalSubs。
color 填写一台十六进制的颜色代码。
剩下两个分别是数据牌右侧展示数据的前缀和后缀，我一般会填一台后缀关注数。

然后点击 Make Badge，可以看到以下界面：

然后或是复制地址栏里的地址，用 Markdown 的插入图片语法：
![](https://img.shields.io/badge/dynamic/json?color=000000&label=GitHub&query=%24.data.totalSubs&suffix=%20followers&url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dgithub%26queryKey%3DWonz5130)就会展示以下标签了：

当然，有些平台的用户名并不是你的用户名而是一串独特的数字（比如微博），具体请参考 API 文档。
目前支持的有这些平台：

当然，你也可以在给标签加个超链接指向自个的主页，比如我给上面 GitHub 就加了一台自个的主页，代码如下：
[![](https://img.shields.io/badge/dynamic/json?color=000000&label=GitHub&query=%24.data.totalSubs&suffix=%20followers&url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dgithub%26queryKey%3DWonz5130)](https://github.com/Wonz5130)这样别人就能通过点击标签跳转到你的其他平台主页了。
六、GitHub 统计卡片

当然，还可以再加一台 GitHub 统计卡片。
下面我是在即刻员工 Joway 的 profile 里发现的如下语法：
<img align=&#34;right&#34; src=&#34;https://github-readme-stats.vercel.app/api?username=joway&show_icons=true&icon_color=CE1D2D&text_color=718096&bg_color=ffffff&hide_title=true&#34; />只需要把 username 改成自个的 GitHub 用户名就可以了。
当然也可以查看这个项目的官方文档，进行个性化设置，比如选择主题，或者自个选择相应板块颜色。
下面就是我的 GitHub 统计卡片：

七、最终效果展示

红色方框里的就是最终效果展示：

八、致谢

		自动登录	找回密码
密码			立即注册

用 Shields.io 数据牌 + GitHub 统计卡片美化你的 GitHub profile

相关问题更多>

最新回答