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

658c7da90257905643c155f953400fc1.png

一、在 GitHub 中发现小彩蛋

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

5e388b1e2e80bec2933eb0fefa6832ee.png

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

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

5001c6d1c19b15f2660821138bf46642.png

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

三、认识 http://Shields.io

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

486fae8421dfa775813a9f63494f0589.png

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

四、静态数据牌展示

静态的比较简单。

72e7fecec4230fe11abba9836185b30a.png
  • label 写要展示的名字,比如:CSDN。
  • message 可以写展示数据,比如:全国前 4K 名。
  • color 选择一个颜色(当然,也可以到这里找喜欢的颜色,输入对应的十六进制代码)。

e9a9f0ab956c05628f871e1909fd4120.png

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

8a7ee04708a6cb7d577bad1887a8f497.png

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

五、动态数据牌展示

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

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

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

9d8586e41d5957eb6b425f9b12d2303b.png

然后点击 Make Badge,可以看到以下界面:

566ca5060f1a95506acd890645e7a8ec.png

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

就会展示以下标签了:

cc7f112d68c62911f971cad1fa8661ba.png

当然,有些平台的用户名并不是你的用户名而是一串独特的数字(比如微博),具体请参考 API 文档。

目前支持的有这些平台:

7cab0e847dab0be3a4b1ba4bc1038575.png

当然,你也可以在给标签加个超链接指向自己的主页,比如我给上面 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="right" src="https://github-readme-stats.vercel.app/api?username=joway&show_icons=true&icon_color=CE1D2D&text_color=718096&bg_color=ffffff&hide_title=true" />

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

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

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

0153579037ed398cfe03c3f623fadff3.png

七、最终效果展示

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

705629c77965bc139b8f47d72106511e.png

八、致谢

用 Substats 和 Shields.io 为你的个人主页定制动态数据小牌子​sspai.com
a128613555c019fca5967b455db2ba12.png
GitHub Readme Stats​github.com
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值