本文將通過對開源項目的 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，如果你還有什麼不明白的，歡迎留言～