Running Page Total 页面修复完整教程

一、问题描述

• Docker 部署的 running_page 项目，Total 页面一直显示作者 Yihong0618 的示例数据（2012-2026 共 13381km），不显示自己的 Keep 数据。
• 但数据已正常同步到 src/static/activities.json，页面其他模块（如年份菜单、地图）均正常。

二、排查过程

1. 检查数据文件：cat ./src/static/activities.json | head -20，确认有 6 条记录（2025 年 1 条，2026 年 5 条）。
2. 检查 SVG 文件：head -20 ./assets/github.svg，发现只包含 2025 年数据。
3. 检查生成命令：python run_page/gen_svg.py --help，发现默认 --min-distance 1.0。
4. 计算 2026 年活动距离：0.81km、0.65km、0.25km、0.34km、0.80km，全部 <1km。
5. 结论：2026 年所有活动被 --min-distance 1.0 过滤，导致 Total 页面只显示 2025 年数据。

三、根因分析

• gen_svg.py 使用 gpxtrackposter 库生成 SVG，默认过滤 <1km 的活动。
• 用户 Keep 数据中 2026 年活动均为短距离（<1km），被默认过滤。
• Total 页面加载 github.svg，该文件由 gen_svg.py 生成，需包含所有年份数据。

四、解决方案

4.1 手动修复（复制整段执行）

cd /wwwroot/running_page_official/running_page && source venv/bin/activate && python run_page/gen_svg.py --from-db --type github --year all --min-distance 0 --output ./assets/github.svg && deactivate && grep -c "2026" ./assets/github.svg && docker cp ./assets/github.svg running-page-official:/usr/share/nginx/html/assets/github.svg && docker restart running-page-official && curl -s http://localhost:8085/assets/github.svg | grep -c "2026"

• --min-distance 0：不限制最小距离，保留所有活动。
• grep -c "2026"：验证 SVG 包含 2026 数据，返回 1 表示成功。
• docker cp：复制 SVG 到容器。
• curl：验证容器内 SVG 已更新。

4.2 配置自动更新（复制整段执行）

cat > /wwwroot/running_page_official/running_page/update.sh << 'EOF'
#!/bin/bash
cd /wwwroot/running_page_official/running_page
source venv/bin/activate
python run_page/keep_sync.py 17508880159 wenZhao520
docker cp src/static/activities.json running-page-official:/usr/share/nginx/html/assets/activities-DQ6mP_-C.json
python run_page/gen_svg.py --from-db --type github --year all --min-distance 0 --output ./assets/github.svg
docker cp ./assets/github.svg running-page-official:/usr/share/nginx/html/assets/github.svg
docker restart running-page-official
deactivate
echo "✅ 数据更新完成！刷新页面即可查看。"
EOF
chmod +x /wwwroot/running_page_official/running_page/update.sh && (crontab -l 2>/dev/null | grep -v update.sh; echo "0 3 * * * cd /wwwroot/running_page_official/running_page && ./update.sh >> /var/log/running_page.log 2>&1") | crontab -

• 每天凌晨 3 点自动同步 Keep 数据并生成 SVG。
• 合并了 Keep 同步 + SVG 生成，避免手动操作。

五、验证方法

1. 浏览器访问 http://你的IP:8085/total。
2. 强制刷新（Ctrl+F5）。
3. Total 页面应显示 2025 和 2026 两个年份的数据。
4. 检查统计数据：总里程应为 5.0km（2025 的 2.1km + 2026 的 2.85km）。

六、经验教训

6.1 排查思路

• 先检查数据源：确认数据已同步（activities.json）。
• 再检查生成工具：查看 gen_svg.py 的默认参数。
• 最后检查渲染：确认 SVG 文件内容。

6.2 常见陷阱

• --min-distance 默认值 1.0km，会过滤短距离活动。
• --year all 需要配合 --min-distance 0 才能包含所有活动。
• 前端构建后 activities.json 文件名带 hash（如 activities-DQ6mP_-C.json），update.sh 中需指定正确文件名。

6.3 容器操作注意事项

• docker cp 复制文件到容器前，确保容器挂载目录为读写模式（rw）。
• 修改容器内 nginx 配置时，语法错误会导致容器无法启动。
• 容器重启后需等待几秒才能正常访问。

6.4 后续维护

• 新增 Keep 数据后，执行 ./update.sh 手动更新，或等待次日凌晨 3 点自动更新。
• 定期检查 /var/log/running_page.log 确认 cron 任务执行正常。
• 如 activities.json 文件名变化，及时更新 update.sh 中的文件名。

七、最终状态