从 3 月开始健身，到现在练了快五个月。每天用 Hermes 记录训练和饮食，fitness_log.md 已经攒了 50 多 KB。但纯文本翻起来太累——想看看上个月哪天练了腿、体重趋势怎么样、哪个部位练得最多，得一行行翻 markdown。

于是趁周末在博客上搭了个健身数据可视化面板。

效果

地址：https://wenxixixi.cc/fitness/

四个 Tab：

  • 日历 — 月视图，有训练的日子标彩色圆点（红=腿、蓝=胸、绿=背、黄=肩），点日期弹出当天所有动作和饮食
  • 热力图 — GitHub 贡献图风格，一眼看出训练频率
  • 体重趋势 — 折线图，蓝色实线是实际体重，绿色虚线是目标体重
  • 统计 — 训练部位分布饼图 + 每周训练天数柱状图

最满意的功能是肌肉可视化：点开某天的详情，会显示人体正反面轮廓图，当天练到的肌肉自动变红，剩下保持灰色。比如练背日，背阔肌、大圆肌那块就红了。

技术栈

全套纯静态，零后端：

  • 数据：fitness_log.md 只读解析 → JSON
  • 前端：Alpine.js + Chart.js + 手写日历/热力图
  • 部署：Nginx 直接托管，挂在博客域名下
  • 更新：服务器 Hermes 每小时自动跑解析脚本同步

总共不到 300 行 JS + 200 行 CSS，没有 npm 没有 webpack，加载飞快。

踩坑

最大的坑是数据格式不统一。五月的记录和七月的记录写法不一样，同一日期可能分成两个 block（一个纯饮食一个训练）。解析脚本改了好几版才稳定——加了容错逻辑、自动格式检测、同日 block 合并、新动作智能映射。

另一个坑是 Hexo 的 Markdown 渲染和 Alpine.js 的模板语法打架——<div x-show> 被当成代码块渲染出来。最后干脆把健身页做成独立 HTML，绕过 Hexo。

后续

想加的功能：手机下拉刷新、肌肉群训练频率热力图、小米健康数据接入。

不过现在的版本已经够用了——训练完打开看一眼日历，就知道这周练得怎么样、明天该练哪儿。