0x00 起因
那天在 Bing 上搜索的时候,突然发现好多项目都有图片以搭配(如图 1), 我当时就在想到底这些图片都是怎么绘制出来的。
后来我在一些开源项目的字素文件里面找到了答案———— Github Socialify
0x01 使用 Github Socialify
Github Socialify 网站使用很简单,输入自己的 用户名/仓库名
, 通过一些可视化的配置,即可获取属于自己的 Github Card。
项目地址 | 在线体验 |
---|
生成的图片就像这样:
再搭配上 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}
就怕有人不知道变量指的是什么,所以我还是写下吧。
- {UserName}: Github 用户名
- {RepoName}: Github 仓库名
- {AvatarUrl}: 用户头像,可以通过 API 或者拼接链接获取
https://github.com/{UserName}.png
既然知道了用法,我又不满足于这一点,所以我搜索了整个 Github 的仓库,希望能够找到其他的一点什么。
0x02 官方接口
果不其然,我找到了官方的接口,在不断的尝试中,我得知了他的用法:https://opengraph.githubassets.com/githubcard/{UserName}/{RepoName}
其中 UserName
和 RepoName
是变量,上文已经提到,不再赘述。
于是我们就可以构造出链接指向该接口获取属于你的 Github Card 了!
0x03 小结
这篇文章通过对 Github 开源项目的挖掘和利用,可以帮助你获取项目的 Github Card, 丰富你的 README.md
, 如果你还有什么不明白的,欢迎留言~