Skip to content

一次对 Github 卡片的研究

Published: at 00:00编辑

0x00 起因

那天在 Bing 上搜索的时候,突然发现好多项目都有图片以搭配(如图 1), 我当时就在想到底这些图片都是怎么绘制出来的。

og/wei/socialify

后来我在一些开源项目的字素文件里面找到了答案———— Github Socialify

0x01 使用 Github Socialify

Github Socialify 网站使用很简单,输入自己的 用户名/仓库名, 通过一些可视化的配置,即可获取属于自己的 Github Card。

项目地址在线体验

生成的图片就像这样:

socialify/wei/socialify

再搭配上 Thum.io 的网站截图接口,链接便可以写为:

https://image.thum.io/get/width/1280/crop/640/viewportWidth/1280/png/noanimate/https://socialify.git.ci/{UserName}/{RepoName}/image?description=1&font=Rokkitt&forks=1&issues=1&language=1&name=1&owner=1&pattern=Circuit%20Board&pulls=1&stargazers=1&theme=Light&logo={AvatarUrl}

就怕有人不知道变量指的是什么,所以我还是写下吧。

既然知道了用法,我又不满足于这一点,所以我搜索了整个 Github 的仓库,希望能够找到其他的一点什么。

0x02 官方接口

果不其然,我找到了官方的接口,在不断的尝试中,我得知了他的用法:https://opengraph.githubassets.com/githubcard/{UserName}/{RepoName}

其中 UserNameRepoName 是变量,上文已经提到,不再赘述。

于是我们就可以构造出链接指向该接口获取属于你的 Github Card 了!

0x03 小结

这篇文章通过对 Github 开源项目的挖掘和利用,可以帮助你获取项目的 Github Card, 丰富你的 README.md, 如果你还有什么不明白的,欢迎留言~


上一篇
我的二月重构计划
下一篇
巧用云服务器搭建雷池网站防火墙