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

Myth丶恋晨 2022-12-04 02:21 19阅读 0赞

> 用数据牌 + GitHub 统计卡片美化你的 GitHub profile

### 一、在 GitHub 中发现小彩蛋 ###

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

![format_png][]

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

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

![format_png 1][]

你可以根据自己需求填写相关信息，完善属于自己的 profile。当然，也有美化 README 的方法。

### 三、认识 Shields.io ###

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

![format_png 2][]

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

### 四、静态数据牌展示 ###

静态的比较简单。

![format_png 3][]

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

![format_png 4][]

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

![format_png 5][]

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

### 五、动态数据牌展示 ###

动态展示相比静态展示，自然就更加自动化，可以实时更新数据。

这里介绍 [SpencerWoo][] 开发的 [Substats][] 小工具。使用教程可以参考开发人员写的这篇[文章][Link 2]，当然也可以自己查看[使用文档][Link 3]。

![format_png 6][]

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

![format_png 7][]

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

![format_png 8][]

然后还是复制地址栏里的地址，用 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)

就会展示以下标签了：

![format_png 9][]

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

目前支持的有这些平台：

![format_png 10][]

当然，你也可以在给标签加个**超链接**指向自己的**主页**，比如我给上面 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 里发现的如下语法：

只需要把 username 改成自己的 GitHub 用户名就可以了。

当然也可以查看[这个项目][Link 4]的[官方文档][Link 5]，进行个性化设置，比如选择[主题][Link 6]，或者自己选择相应板块颜色。

下面就是我的 GitHub 统计卡片：

![format_png 11][]

### 七、最终效果展示 ###

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

![format_png 12][]

### 八、致谢 ###

[用 Substats 和 Shields.io 为你的个人主页定制动态数据小牌子][Link 2]

[GitHub Readme Stats][Link 5]

[format_png]: /images/20221123/dd84c9b46940491ab1eebbc88216de85.png
[Typora]: https://typora.io/
[format_png 1]: /images/20221123/8b166dfcbbba4c0e99194c0440fce0ce.png
[format_png 2]: /images/20221123/62ac05dc1a87498e888d4c912f79651b.png
[Shields.io]: https://shields.io/
[format_png 3]: /images/20221123/302e5f94ee1a4b3b8628f3c1d39d3660.png
[Link 1]: https://www.sioe.cn/yingyong/yanse-rgb-16/
[format_png 4]: /images/20221123/348695e3dc614c44837232f2532be87a.png
[format_png 5]: /images/20221123/aae2b64c593d42a8bc6fa1ffa7e94137.png
[SpencerWoo]: https://github.com/spencerwooo
[Substats]: https://github.com/spencerwooo/Substats
[Link 2]: https://sspai.com/post/59593
[Link 3]: https://substats.spencerwoo.com/
[format_png 6]: /images/20221123/c3b3c127d3a04518b6680132b6ce73e8.png
[format_png 7]: /images/20221123/423749efe55848ed8603310d348b3d41.png
[format_png 8]: /images/20221123/c414b60ad1f54d70ad2e9777301822b8.png
[format_png 9]: /images/20221123/9433c7290af04e78af8711fa501bbf8b.png
[API]: https://substats.spencerwoo.com/api.html#%E5%8D%B3%E5%88%BB-jike-app
[format_png 10]: /images/20221123/20f66219b1354e3ab3786b554b0d3a8c.png
[Joway]: https://github.com/joway/joway
[Link 4]: https://github.com/anuraghazra/github-readme-stats
[Link 5]: https://github.com/anuraghazra/github-readme-stats/blob/master/docs/readme_cn.md
[Link 6]: https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md
[format_png 11]: /images/20221123/e1375aedd72e4500b0c9ca8c7e69de11.png
[format_png 12]: /images/20221123/ca069cf196f0400697264137fdaca06c.png