本文将通过对开源项目的 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，如果你还有什么不明白的，欢迎留言～