在Github个人主页设置统计面板

1,134 阅读1分钟

吃罢饭像往常一样听音乐刷着Github,瞄见了个骚气的头像,点进去发现有一些统计信息:访客多少、提交多少、PR有多少、综合评分等,挺有趣的,于是就研究了一下给自己也搞了一个。

新建一个同名仓库

截屏2022-02-09 上午10.29.15.png

这里,github已经提示了:您发现了一个秘密,这是一个特殊的仓库,可以配置READEME.md到你的个人主页。

添加README.md文件

我们再添加一个README.md文件 截屏2022-02-09 上午10.30.15.png

输入以下内容(替换一下您的账户名):

### ![visitors count](https://visitors-by-url-pls-dont-use-this-in-your-repo.vercel.app/`您的账户名`-github-readme)
<img src="https://github-readme-stats.vercel.app/api?username=`您的账户名`&show_icons=true&icon_color=0366d6&text_color=24292e&bg_color=fff&hide_title=false

保存即可看到效果:

image.png

工作原理及局限性

先看访客数据,url上就已经挑明了:https://visitors-by-url-....,这个数据是跟这个url挂钩的:这个url请求一次就累加一次,只能统计配置这个面板以后的数据,所以它是不准确的。

再看面板的其他部分:像一幅图片,打开才发现是一个svg:

image.png

这个不难理解:调用API查询用户的公开数据,将这些数据拼接称XML格式的svg图形返回,image元素也可以展示svg