本文将通过对开源项目的 Github Card 研究得出如何绘制/获取现成的 Card。

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 是变量，上文已经提到，不再赘述。

这里感谢这个项目，快去 Star 它

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

0x03 小结

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