跑步汇总页面

跑步汇总页面

看到 @yihong06181 的跑步页面很是好看，也可以自己部署。那就折腾一下吧。

参考官方文档，部署步骤如下（使用了Vercel 做托管）：

1. github 上 fork https://github.com/yihong0618/running_page.git 项目（之所以fork，是想以后如果修复bug或新版本，方便做代码合并）；
2. 本地安装依赖如下（后面的数据抓取和图生产都会依赖一些Python的库）

pip3 install -r requirements.txt
yarn install

1. 修改个性化选项
   1. 替换 Mapbox Token
   2. 左上角头像
   3. 右上角默认的 Blog 及 About
   4. 页面标题和网站链接
2. 下载跑步数据，目前支持 Keep，JoyRun，Codoon，Garmin，Runtastic，Nice Run，Strava，如果都没法自动化下载，那就下载默认的GPX文件，并本地生成对应数据。

python3 scripts/gpx_sync.py

1. 生成 total 页面的可视化 SVG

## 生成 Grid Poster
python3 scripts/gen_svg.py --from-db --type grid --use-localtime
## 生成 Circular Poster
python3 scripts/gen_svg.py --from-db --type circular --use-localtime
## 生成 github Poster
python3 scripts/gen_svg.py --from-db --type github --use-localtime

注意：以上生成的文件名为 poster.svg，如果需要在页面正常显示，还需要改名（例如：github 的 就改为 github.svg ），并将文件挪到assets 文件夹下（如同名文件已存在，请直接覆盖）。

最后成品在此：➡️ 我的跑步页面

PS：如果有多种运动习惯的朋友，可以参考这2个代码： GeekPlux 和 13en_29 。

Reference：

• yihong的 Github