GitHubCard 使用 Tips

整理了 7 个最常用的组件尺寸与排版技巧，方便你在 README、个人博客和社交媒体里直接套用。

Tip 01 — Comprehensive Stats（综合统计组件）

展示你的整体开源产出：获得的总 Star 数、Commit、PR、Issue 以及公开仓库数量。竖向排版（Vertical Layout）在 README 里最受欢迎，信息层级清楚，可视为 github-readme-stats 的画布升级版。

GitHub Banner 700 × 200

Tip 02 — Streak（连续贡献组件）

展示当前连续打卡天数、历史最长连续天数和总贡献次数。尺寸同样是 700 × 200，很适合跟上面的综合统计组件上下叠放。

GitHub Banner 700 × 200

Tip 03 — Language（编程语言占比组件）

汇总你公开仓库里主要使用的编程语言，用来展示技术栈构成。提供环形图（Donut）、排行条形图（Ranked Bar）和堆叠条形图（Stacked Bar）等样式，可根据画布剩余空间切换。

• Donut 环形图样式：

GitHub Compact 340 × 200

• Ranked Bar 排行条形图样式：

GitHub Compact 340 × 200

Tip 04 — TopRepo（代表作仓库组件）

不用在 README 里单独贴四五张仓库卡片，用 TopRepo 组件就能在一个框里列出你 Star 最多的项目。内置三种常见布局：

• List 列表样式（适合保留完整项目简介）：

Minimal 800 × 400

• Grid 网格样式（双列紧凑排布）：

Minimal 800 × 400

• Compact 精简样式（适合放进侧边栏或双栏布局）：

GitHub Compact 340 × 200

Tip 05 — 别只放在 GitHub README 里

生成的卡片本质上是标准 SVG / PNG 链接，除了放进 GitHub 主页，还可以直接嵌进个人博客、Notion 简历或个人作品集网站。可以看看其他开发者是如何在博客里嵌入 GitHubCard 的。

Tip 06 — 直接当作社交分享预览图

把 https://githubcard.com/<你的用户名> 或 https://githubcard.com/<owner>/<repo> 贴到 Twitter/X、即刻或 Reddit 时，平台会自动抓取 1200 × 630 的 Open Graph 预览图，省去每次手动截图的麻烦。

Tip 07 — 在同一块画布里自由组合

上面提到的所有小部件都可以拖进同一张画布里。比如选一个 OG Standard (1200 × 630) 画布，把头像、综合统计、语言占比、贡献热力图和代表作排在一起，最后只导出成一条图片链接：

OG Standard (1200 × 630)

动手试试

打开 GitHub 个人名片生成器 或 GitHub 仓库卡片生成器，输入你的用户名就能直接预览上述布局。

---

GitHubCard Team