我把 GitHub 主页改造成赛博朋克控制台，用提交记录建了一座城
来源：dev.to — 2026-10-01
📋 概述
作者本想做一个简单的自定义 GitHub 主页，结果越做越大：主页被改造成一台赛博朋克风格的控制台，城市天际线由他过去一年的提交记录生成，每天自动重绘。真正的难点在于 GitHub 的 README 不允许运行 JavaScript，作者利用「SVG 只是一张图片」的漏洞——Markdown 会保留 SVG 内嵌的 CSS 动画与 SMIL，从而实现无需脚本的动效。整个控制台被切成 23 张堆叠的 SVG 图片，靠统一外框与扫描线伪装成一块屏幕，并由 GitHub Action 每天定时更新。
🔑 核心要点
- GitHub 的 README 不能运行 JavaScript：脚本、canvas、WebGL 与点击事件都会被剥离。
- 突破口是「SVG 只是一张图片」：声明式 CSS 动画与 SMIL 会随 SVG 一起被保留。
- 整个控制台其实是 23 张堆叠的独立 SVG，靠统一外框、扫描线等公共元素消除接缝。
- 城市天际线直接由提交记录生成，每天由 GitHub Action 自动重绘，无需手动维护。
💡 金句
我本想做一个简单的自定义主页，结果把它彻底做过头了。
👍 0
👎 0
← 返回 dev.to 首页