GitHub年度贡献图可用SVG高度仿制，需按7×52网格用<rect>绘制、UTC日期对齐、5级固定色值映射、viewBox响应式缩放，并通过GitHub API获取合规数据。
GitHub 年度贡献图（Contribution Graph）是 SVG 渲染的静态快照，无法直接用纯 HTML/CSS 完全复现其动态交互和精确算法，但可以高度仿制视觉效果——关键在格子布局、颜色映射、响应式缩放和日期对齐。
用 svg + <rect> 模拟原始网格结构
GitHub 的贡献图本质是 7×52 的 SVG 矩形阵列（7 行=周日到周六，52 列=全年周数），每格宽高固定（如 10×10 px），间距 3 px。纯 CSS Grid 虽能铺出类似布局，但无法精准控制“某天对应第几列”——因为每年 1 月 1 日的星期几不同，首列起始日期必须动态计算。
实操建议：
- 先用 JavaScript 计算目标年份的
firstDayOfYear（比如 2023 年 1 月 1 日是星期日 → 第一列从周日开始） - 生成 365/366 个日期对象，按
getDay()和getWeekNumber()映射到行列索引 - 用
svg手动绘制<rect>，x/y基于列号×(width+gap) 和行号×(height+gap) 计算 - 避免用
<div>堆叠：CSS 盒模型受字体、行高、margin 折叠干扰，格子易错位
fill 颜色必须按 GitHub 的 5 级贡献强度映射
GitHub 使用 #ebedf0（无贡献）到 #161b22（最高频）共 5 种色值，对应贡献次数分段：0、1–9、10–19、20–49、50+。不是线性渐变，也不能简单用 hsl() 插值——用户截图或 DevTools 提取的色值必须原样复用，否则一眼假。
立即学习“前端免费学习笔记（深入）”；
GInstall OneClick — 一键安装 GitHub 项目：规划、克隆、安装 Node 依赖、运行开发脚本。适用于想要获取 GitHubNode.js 项目的用户。
常见错误现象：
- 用
lighten()Sass 函数生成中间色 → 色相偏移，灰度不匹配 - 把「当天提交数」直接当色阶 → 必须归一化到年度最大值再分桶（否则单日爆仓就全绿）
- 忽略时区：GitHub 统计用 UTC，本地
new Date()可能跨天，要用getUTCDate()系列方法
响应式缩放要靠 viewBox，不是 width/height
GitHub 图在小屏上会整体缩小但保持格子比例，用 CSS width: 100% 硬缩放会导致矩形压扁、文字糊成一片。正确做法是固定 svg 的 viewBox="0 0 720 110"（示例值），让容器用 max-width 控制显示尺寸，SVG 内部坐标系自动缩放。
使用场景：
- 嵌入博客页：父容器
max-width: 600px，svg自适应 - 打印 PDF：加
@media print { svg { width: 100% !important; } }防止截断 - 避免用
transform: scale()：会模糊stroke边框且影响点击区域
数据来源只能靠 GitHub API，别硬编或爬页面
GitHub 不提供前端直接读取个人年度统计的公开接口，/users/{username}/contributions 是私有端点。唯一合规路径是调用 https://api.github.com/users/{username}/events（需 token），过滤 PushEvent，按 created_at 归组统计。注意：
- 免费 token 每小时限 5000 次请求，一次拉全年事件要分页（
per_page=100） - 返回时间是 ISO8601 字符串（如
"2023-06-15T08:23:12Z"），必须用new Date(str).toUTCString()解析，不能直接split('T')[0] - 「贡献」定义以 GitHub 为准：仅 public repo 的 push、pull request、issue comment 等，fork 或 private 活动不计入
最易被忽略的点：GitHub 的「年度」从当年 1 月 1 日 UTC 开始，但你的本地机器可能用系统时区解析日期，导致 12 月 31 日晚上的提交被算进下一年——所有日期处理必须显式走 UTC 路径，少一个 UTC 就错一周。
