一次对 Github 卡片的研究

2024 年 1 月 11 日 星期四(已编辑)
6
这篇文章上次修改于 2024 年 1 月 11 日 星期四,可能部分内容已经不适用,如有疑问可询问作者。

一次对 Github 卡片的研究

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


0x00 起因

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

og/wei/socialify

og/wei/socialify

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

0x01 使用 Github Socialify

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

项目地址在线体验

生成的图片就像这样:

socialify/wei/socialify

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}

::: tip 提示 这里来谈谈变量,如果你的项目使用 f-string 你可以照抄。如果不是,语义化命名还是可以帮助到你的。 :::

就怕有人不知道变量指的是什么,所以我还是写下吧。 - {UserName}: Github 用户名 - {RepoName}: Github 仓库名 - {AvatarUrl}: 用户头像,可以通过 API 或者拼接链接获取 `https://github.com/{UserName}.png`

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

0x02 官方接口

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

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

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

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

0x03 小结

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

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...