如何用running_page打造你的专属跑步数字档案馆从零开始到专业展示【免费下载链接】running_pageMake your own running home page项目地址: https://gitcode.com/gh_mirrors/ru/running_page想要将你的跑步数据从零散的运动应用记录转变为精美可视化的个人数字档案馆吗running_page正是这样一个开源神器它能自动同步你的跑步历史生成专业级的可视化页面。无论你是跑步新手还是资深跑者这个完整指南将带你从基础配置到高级定制一步步打造属于你的跑步数字档案。‍♂️ 为什么你需要一个跑步数字档案馆在数字化时代我们的跑步数据分散在多个应用中Strava记录轨迹、Garmin追踪心率、Nike Run Club统计里程。这些宝贵的数据往往被孤立存储难以形成完整的跑步历程记录。running_page解决了这个痛点它能够聚合多平台数据统一管理来自不同运动应用的数据可视化展示通过精美图表和地图展示你的跑步成果自动化更新利用GitHub Actions实现数据自动同步隐私可控完全掌控自己的数据无需担心第三方隐私问题 快速开始5分钟搭建你的第一个跑步主页第一步获取项目代码git clone https://gitcode.com/gh_mirrors/ru/running_page cd running_page第二步安装依赖环境项目采用Python TypeScript技术栈确保你的系统已安装Python 3.8Node.js 18pnpm推荐或npm安装项目依赖pip3 install -r requirements.txt pnpm install第三步配置数据同步根据你使用的主要运动应用选择对应的同步脚本。例如如果你使用Strava在Strava开发者平台创建应用获取Client ID和Client Secret复制config-example.yaml为config.yaml填入你的Strava认证信息第四步本地预览效果pnpm develop访问 http://localhost:5173 即可看到你的跑步主页雏形️ 个性化定制让跑步主页真正属于你地图样式定制在src/utils/const.ts文件中你可以自由调整地图的视觉效果// 选择地图提供商 const MAP_TILE_VENDOR mapcn; // 免费选项无需API密钥 // 设置地图样式 const MAP_TILE_STYLE_LIGHT osm-bright; // 明亮风格 const MAP_TILE_STYLE_DARK dark-matter; // 暗黑风格 // 轨迹线样式 const USE_DASH_LINE true; // 使用虚线轨迹 const LINE_OPACITY 0.4; // 轨迹透明度网站信息配置通过修改src/static/site-metadata.ts你可以完全自定义网站的外观const data: ISiteMetadataResult { siteTitle: 我的跑步世界, // 你的个性化标题 siteUrl: https://your-domain.com, // 你的网站地址 logo: /images/my-logo.png, // 自定义Logo description: 记录我的跑步旅程, // 网站描述 navLinks: [ { name: 年度总结, url: /summary, }, // 添加更多导航链接 ], };数据可视化选项running_page提供了多种数据展示方式你可以在配置中启用海拔爬升显示SHOW_ELEVATION_GAIN true详细活动标题RICH_TITLE true隐私模式PRIVACY_MODE true仅显示轨迹不显示地图 数据可视化从原始数据到精美图表跑步轨迹可视化running_page最强大的功能之一就是跑步轨迹的可视化展示。通过叠加多条跑步轨迹你可以清晰地看到自己的跑步习惯和路线偏好。上图展示了多条跑步轨迹的叠加效果黄色轨迹线清晰地显示了跑步者在同一区域内的多次跑步路径。这种可视化方式特别适合分析跑步习惯和路线偏好。单次跑步详细展示除了轨迹叠加你还可以查看单次跑步的详细信息包括距离、配速、时间等关键数据。这张图片展示了一次1.51公里的跑步活动包含详细的配速和时间信息。日期标注功能让你能够按时间顺序回顾每一次跑步。多种图表样式项目支持多种SVG图表生成方式网格样式类似日历的热力图展示全年跑步频率圆形样式艺术化的轨迹展示适合社交媒体分享GitHub贡献图样式模仿GitHub贡献图的时间线展示 高级功能打造专业级跑步档案馆自动化数据同步通过GitHub Actions你可以设置定时任务自动同步数据# .github/workflows/run_data_sync.yml name: Sync Running Data on: schedule: - cron: 0 2 * * * # 每天凌晨2点运行 workflow_dispatch: # 支持手动触发多平台数据整合如果你使用多个运动应用running_page支持从以下平台同步数据StravaGarminNike Run ClubKeep悦跑圈咕咚佳速度数据同步脚本位于run_page/目录下如strava_sync.py、garmin_sync.py等。数据库管理与升级当项目更新时可能需要更新数据库结构python run_page/db_updater.py这个命令会自动处理数据库迁移确保你的数据与新版本兼容。 部署选项选择最适合你的平台Vercel部署推荐Vercel提供免费的CDN加速和自动SSL证书部署简单快捷Fork项目到你的GitHub账户在Vercel中导入项目配置环境变量自动部署完成GitHub Pages部署适合希望完全免费的用户在项目设置中启用GitHub Pages配置GitHub Actions工作流设置自定义域名可选本地服务器部署对于需要完全控制权的用户配置Nginx或Apache设置SSL证书配置自动更新脚本️ 隐私与安全完全掌控你的数据隐私保护设置如果你担心位置信息泄露可以启用隐私模式const PRIVACY_MODE true; // 仅显示轨迹不显示地图数据本地存储所有跑步数据都存储在本地SQLite数据库中完全由你控制数据文件activities.db备份文件activities.db.backupGPX原始数据GPX_OUT/目录选择性数据展示你可以选择性地展示某些跑步记录或者隐藏敏感位置的跑步轨迹。 进阶技巧从用户到专家自定义跑步类型颜色在src/utils/const.ts中你可以为不同类型的运动设置不同的颜色export const RUN_COLOR #47b8e0; // 跑步颜色 export const CYCLING_COLOR rgb(51,255,87); // 骑行颜色 export const HIKING_COLOR rgb(151,51,255); // 徒步颜色年度总结生成使用内置脚本生成精美的年度跑步总结python run_page/gen_svg.py --year 2024 --type github数据导出与分析除了网页展示你还可以将数据导出为CSV格式进行深度分析python run_page/data_to_csv.py 故障排除与优化常见问题解决问题1地图无法显示检查MAP_TILE_VENDOR设置确认网络连接正常尝试切换地图提供商问题2数据同步失败检查API密钥是否正确确认运动应用权限设置查看日志文件定位问题问题3页面加载缓慢启用CDN加速优化图片大小考虑分页加载数据性能优化建议数据库优化定期清理无效数据图片压缩优化生成的SVG文件大小缓存策略合理设置HTTP缓存头 最佳实践让跑步主页更专业定期更新与维护建议每周至少同步一次数据保持主页信息的时效性。同时关注项目更新及时应用新功能和修复。数据备份策略虽然running_page会自动备份数据但建议你定期导出CSV备份备份GPX原始文件使用Git管理配置文件社区参与与贡献running_page拥有活跃的开源社区你可以提交问题报告贡献代码改进分享你的使用经验帮助翻译文档 开始你的跑步数字之旅running_page不仅仅是一个工具它是你跑步历程的数字见证。每一次跑步每一段轨迹每一次突破都被精心记录和展示。从今天开始用running_page打造属于你的跑步数字档案馆让每一次奔跑都有迹可循。记住最好的跑步主页不是最复杂的而是最能反映你跑步故事的那一个。现在就开始动手创建你的专属跑步主页吧每一步都值得被记录每一次奔跑都值得被看见。你的跑步故事从这里开始书写。‍♀️【免费下载链接】running_pageMake your own running home page项目地址: https://gitcode.com/gh_mirrors/ru/running_page创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考