Pro 背景React
facebook/react
02现有问题
用一个 GitHubCard 链接替换多项 README 嵌入。
手写个人主页 README 时，统计、语言、连续贡献、贡献记录、活动和技能，可能需要六个嵌入组件、五项服务和几十个 URL 参数。GitHubCard 在同一份设计里展示这些实时数据，README 只需一个链接。
README.md
@@ -1,29 +1,6 @@# Hi, I'm Alex 👋Full-stack developer building useful products.<!-- Profile and repository stats --><!-- Top languages --><a href="https://github.com/you?tab=repositories"><img height="165" src="https://github-readme-stats.vercel.app/api/top-langs?username=you&layout=compact&theme=tokyonight" alt="Top languages" /></a><!-- Commit streak --><p align="center"><img width="48%" src="https://streak-stats.demolab.com?user=you&theme=tokyonight&hide_border=true" alt="Commit streak" /></p><!-- Contribution heatmap (light / dark) --><picture><source media="(prefers-color-scheme: dark)" srcset="https://ghchart.rshah.org/2f81f7/you" /><img src="https://ghchart.rshah.org/40c463/you" alt="Contribution heatmap" /></picture><!-- Activity graph -->[](https://github.com/you)<!-- Tech skills -->## Featured projects
# Hi, I'm Alex 👋Full-stack developer building useful products.## Featured projects
03组件
挑选你的组件。
GitHub 统计卡片、贡献热力图、连续贡献、语言和技术栈、常用语言卡片、热门仓库和 Star History。挑选组件，放上画布，统一设置主题。
20 多种组件中的 8 种 · 悬停暂停
语言环形图
语言排名条形图
个人统计
连续贡献统计
贡献热力图
Star 趋势
仓库提交
仓库代码频率
语言环形图
语言排名条形图
个人统计
连续贡献统计
贡献热力图
Star 趋势
仓库提交
仓库代码频率
04使用方法
三个步骤，无需配置。
和实际编辑流程一样：选择卡片、设计、发布。
06对比
画布与单一用途工具对比。
对比编辑流程、最终效果和维护成本。
01结论
工作流程
从可视化编辑到最终卡片，都在 GitHubCard 的同一张画布上完成。
- GitHubCard
- 布局、数据和组件都在同一个编辑流程中完成。
- 单一用途工具
- 单一用途工具需要在不同生成器中分别配置。
可视化编辑器一张画布减少拼接
02结论
输出
最终得到一张风格统一的卡片。
- GitHubCard
- 个人信息、仓库和统计组件使用同一套视觉风格。
- 单一用途工具
- 其他工具通常分别导出卡片、图表或链接。
统一风格最终排版可直接导出
03结论
维护
少一些依赖，也就少一些令牌、定时任务和手动刷新步骤。
- GitHubCard
- 卡片根据 GitHub 数据刷新，缓存行为明确可预期。
- 单一用途工具
- 可靠性通常取决于托管、定时任务或 API 限制。
减少配置自动刷新明确的限制
对比的是工具类别，不针对具体品牌。
07价格
免费开始，想用 Pro 时一次付费。
免费设计和预览。Pro Lifetime 一次支付 19 美元，即可使用高级背景、字体，以及无水印和 4 倍分辨率导出，无需订阅。
一次付款 · 无需订阅 · 7 天退款保证。 查看完整价格
08常见问题
发布前，你可能想问。
GitHubCard 是什么？
GitHubCard 是一款可视化 GitHub 个人主页 README 生成器。将 GitHub 数据排成个人或仓库卡片，用于 README、作品集或社交帖子。
如何使用 GitHubCard？
将个人或仓库链接中的 github.com 改为 githubcard.com，例如 githubcard.com/torvalds 或 githubcard.com/facebook/react。打开画布编辑器即可自定义卡片。
需要登录吗？
无需登录即可预览默认卡片。使用 GitHub 登录后，可保存、发布、更新或删除自定义设计。
如何把卡片嵌入 README？
复制 SVG 链接（例如 githubcard.com/username.svg），作为图片添加到 Markdown 文件中。卡片会显示 GitHub 的实时数据。
如何创建 GitHub 个人主页 README？
创建与 GitHub 用户名同名的仓库，再添加 README.md 文件。仓库公开且名称正确时，GitHub 就会在你的个人主页显示这份 README。
GitHub 个人主页 README 指南卡片会自动更新吗？
是的。卡片显示 GitHub 的实时数据。为保持性能，我们会缓存数据，因此更新可能需要最多一小时才能显示。
可以自定义卡片吗？
可以。在画布编辑器中拖拽 20 多种数据组件，调整布局，再导出 SVG 或 PNG。
GitHubCard 可以免费使用吗？
核心功能免费使用。Pro Lifetime 一次支付 19 美元，无需订阅，即可使用高级背景、字体，以及无水印和高分辨率（4 倍）导出。