企业官网建设流程全解析

如何用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.8+
• Node.js 18+
• pnpm（推荐）或npm

安装项目依赖：

pip3 install -r requirements.txt pnpm install

第三步：配置数据同步

根据你使用的主要运动应用，选择对应的同步脚本。例如，如果你使用Strava：

1. 在Strava开发者平台创建应用，获取Client ID和Client Secret
2. 复制config-example.yaml为config.yaml
3. 填入你的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图表生成方式：

1. 网格样式：类似日历的热力图，展示全年跑步频率
2. 圆形样式：艺术化的轨迹展示，适合社交媒体分享
3. GitHub贡献图样式：模仿GitHub贡献图的时间线展示

🔧 高级功能：打造专业级跑步档案馆

自动化数据同步

通过GitHub Actions，你可以设置定时任务自动同步数据：

# .github/workflows/run_data_sync.yml name: Sync Running Data on: schedule: - cron: '0 2 * * *' # 每天凌晨2点运行 workflow_dispatch: # 支持手动触发

多平台数据整合

如果你使用多个运动应用，running_page支持从以下平台同步数据：

• Strava
• Garmin
• Nike Run Club
• Keep
• 悦跑圈
• 咕咚
• 佳速度

数据同步脚本位于run_page/目录下，如strava_sync.py、garmin_sync.py等。

数据库管理与升级

当项目更新时，可能需要更新数据库结构：

python run_page/db_updater.py

这个命令会自动处理数据库迁移，确保你的数据与新版本兼容。

🌐 部署选项：选择最适合你的平台

Vercel部署（推荐）

Vercel提供免费的CDN加速和自动SSL证书，部署简单快捷：

1. Fork项目到你的GitHub账户
2. 在Vercel中导入项目
3. 配置环境变量
4. 自动部署完成

GitHub Pages部署

适合希望完全免费的用户：

1. 在项目设置中启用GitHub Pages
2. 配置GitHub Actions工作流
3. 设置自定义域名（可选）

本地服务器部署

对于需要完全控制权的用户：

1. 配置Nginx或Apache
2. 设置SSL证书
3. 配置自动更新脚本

🛡️ 隐私与安全：完全掌控你的数据

隐私保护设置

如果你担心位置信息泄露，可以启用隐私模式：

const PRIVACY_MODE = true; // 仅显示轨迹，不显示地图

数据本地存储

所有跑步数据都存储在本地SQLite数据库中，完全由你控制：

• 数据文件：activities.db
• 备份文件：activities.db.backup
• GPX原始数据：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加速
• 优化图片大小
• 考虑分页加载数据

性能优化建议

1. 数据库优化：定期清理无效数据
2. 图片压缩：优化生成的SVG文件大小
3. 缓存策略：合理设置HTTP缓存头

🎯 最佳实践：让跑步主页更专业

定期更新与维护

建议每周至少同步一次数据，保持主页信息的时效性。同时，关注项目更新，及时应用新功能和修复。

数据备份策略

虽然running_page会自动备份数据，但建议你：

1. 定期导出CSV备份
2. 备份GPX原始文件
3. 使用Git管理配置文件

社区参与与贡献

running_page拥有活跃的开源社区，你可以：

• 提交问题报告
• 贡献代码改进
• 分享你的使用经验
• 帮助翻译文档

🌟 开始你的跑步数字之旅

running_page不仅仅是一个工具，它是你跑步历程的数字见证。每一次跑步，每一段轨迹，每一次突破，都被精心记录和展示。从今天开始，用running_page打造属于你的跑步数字档案馆，让每一次奔跑都有迹可循。

记住，最好的跑步主页不是最复杂的，而是最能反映你跑步故事的那一个。现在就开始动手，创建你的专属跑步主页吧！每一步都值得被记录，每一次奔跑都值得被看见。

你的跑步故事，从这里开始书写。🏃‍♀️📈

【免费下载链接】running_pageMake your own running home page项目地址: https://gitcode.com/gh_mirrors/ru/running_page