从 GitHub 快速打开
安装 Chrome 扩展，即可从仓库页面直接打开 GitHubCard。
安装 Chrome 扩展仓库卡片工作台
GitHub 仓库卡片生成器
设计包含 Star History、语言、贡献者和提交活动的仓库卡片。修改 GitHub 链接即可开始，再导出 SVG、PNG 或实时嵌入。
02设计画布
让你的仓库更容易被理解。
让读者在一张卡片中看懂项目内容、价值和活跃程度。
可展示的仓库信息
- Star、Fork、Watch、Issue 和 Pull Request
- 语言占比、主题、许可证和链接
- 贡献者头像和仓库所有者
- Star History、提交活动和代码变动频率
- 用于发布说明或项目介绍的自定义文字
设计画布
画布编辑器
在画布上排列仓库组件，用一张卡片清楚介绍项目。
仓库数据
10 多种数据组件
展示 Star、提交、语言、贡献者、主题和许可证等项目数据。
嵌入方式
SVG、PNG、iframe
在 README、文档、发布文章、作品集和内部看板中使用同一张卡片。
03导出与嵌入
把仓库卡片嵌入任何地方。
在 Markdown 中使用 SVG，在文档中使用实时 iframe，或用 React 组件放入作品集。
Markdown README 嵌入
用 SVG 将清晰的项目卡片放入 README、文档和静态网站。
作品集和博客预览
为项目展示、发布文章、社交预览和作品集导出固定 PNG 图片。
iframe 嵌入
通过 iframe 将实时项目卡片嵌入文档、发布文章或内部看板。
<iframe
src="https://githubcard.com/facebook/react"
title="React GitHub repo card"
loading="lazy"
></iframe>React 组件
把 SVG 包装成小型组件，方便控制项目展示或作品集中的尺寸。
function RepoCard() {
return (
<img
src="https://githubcard.com/facebook/react.svg"
alt="React GitHub repo card"
loading="lazy"
/>
);
}04示例
从真实仓库卡片开始。
打开公开项目卡片，再在上方输入你自己的 owner/repo，生成使用实时项目数据的卡片。
查看真实仓库卡片
通过这些示例，看看项目资料、活动和所有者在卡片中的实际呈现效果。
05使用方法
三步把 GitHub 链接变成嵌入卡片。
第 01 步
在链接中添加 card
打开公开 GitHub 仓库链接，在 github 后加上 card，或直接输入 owner/repo。
第 02 步
调整项目展示内容
选择活动、增长趋势、语言、所有者和状态等信息。
第 03 步
嵌入卡片
导出 SVG 或 PNG，或把实时仓库卡片嵌入文档、作品集或发布文章。
06常见问题
仓库卡片常见问题
什么是 GitHub 仓库卡片生成器？
它为公开仓库生成可视化卡片，展示项目名称、简介、Star、Fork、语言、贡献者和活动等信息。
可以把仓库卡片嵌入网站或 README 吗？
可以。将卡片导出为 SVG 或 PNG，放入 README、文档、个人网站、发布文章或项目作品集。
GitHubCard 可以展示哪些仓库数据？
仓库卡片支持 Star、Fork、Watch、语言占比、主题、许可证、贡献者、Star History、每周提交和代码变动频率。
所有公开仓库都能使用吗？
GitHubCard 支持公开 GitHub 仓库，不支持私有仓库。使用 GitHub 登录可能提高 API 请求额度。