现在是八月十二日，到今日夕格已经用Running_Page记录跑步及各项运动数据已一个多月了，前两天终于把运动独立页面完美折腾完毕，达到了个人相当满意的1.0版，后续当让有可能继续完善，就像石头厝博客主题一样，完善到几乎重写，没有一点原作者的影子。

今天，夕格终于可以对外宣布：跑起来啦，不是Running_page和独立页面无错的跑起来，关键是不再需要外力、不再需要坚持，夕格终于把跑步这个习惯捡起来啦。

为了这一天，石头厝的会员们都知道，夕格做了许多尝试，无数次失败无数次继续折腾，这个运动页面我折腾不下十次，这次成功得益于我对AI的使用，但这次折腾也花了三四天，花这么时间又是因为AI的垃圾。

不管怎样，跑起来了，按习惯是时候汇总记录下，算是给将要折腾的友友一些启发，夕格呼吁大家都跑起来。

相关资源

个人博客圈大牛很多，比如写文章我最欣赏莫比乌斯，虽然与他有过几次争论，虽然我很少看他的文章，不是他的文章不好，是现在的我实在没时间精力去阅读一些暂时与我无关的内容，他理论积累、知识输出能力，个人博客圈一绝。

回到运动页面，夕格最佩服的是Conge：https://conge.livingwithfcs.org/，这应该是我比较早接触到的运动页面博主，他的阅读，他的跑步，全是我想坚持和学习的哈。

他的运动页面：https://conge.livingwithfcs.org/running_page/

再后来说空白，这是个颜值博主，他颜值怎样未知，但是他的博客各种页面颜值完全在我的审美上，他升级后的跑步页面很绝：https://koobai.com/exercise/

再后来是小十，又是个颜值博主，他的个人博客不仅功能丰富，且颜值很高，他的足迹我是复刻，他近期复刻的空白的运动页面，相当不错，成了我这次复刻的对象。

他的运动页面：https://www.xiaoten.com/pages/exercise/

这次我的折腾是从空白的源代码开始，复刻小十的页面，然后再个性化扩展了些功能。数据来源是KEEP，数据采集转化同步工具是用Docker的，参考仓库：https://github.com/yihong0618/running_page

完美页面：https://www.shitoucuo.com/exercise.html

第一步 数据服务

这步是最难的，对我来说。因为之前我尝试过几次全失败，甚至连Github完全照着教程部署我都失败了许多次，不知道为什么。

数据服务的部署一年多前就开始折腾了，但一直未成功，这次依然一样。首先从网络检索资料，采用compose来部署，代码丢给AI，按我的标准化格式来部署，端口文件路径等近来我都格式化，方便后续管理。

结果是遇到了超级多的问题，部署的时候各种环境问题，各种数据问题，之前有让AI总结过部分折腾记录，花了几天的业余时间折腾，结果是部署上了，但是数据不同步，又翻来覆去的检查，最终没有结果。

最后，不得不放弃，还好独立页面正常，仅Docker部署的页面不正常，索性就来折腾独立页面了。

没想到过几天自己好了，这个数据服务部署到现在我还是搞不清的，遇到了至少三四十个问题，每个问题都是我无法解决的，全给AI，多数时间是AI浪费的，绕来绕去的解决，结果多数时候我看到了问题所在，让AI再修改完成。

完全依靠AI，Docker部署应该不成问题，我这种纯小白都OK，大家肯定就没问题了，我的成功部署后的极简页面：https://sp.sangushui.com/

第二步 空白基础

从空白的Github仓库博客代码里筛选出运动页面代码：https://github.com/koobai/blog，这一步步太难，翻翻就能搞定。

因为有后续数据整合需求，所以最开始我是在这个博客，即Typecho系统下部署，以独立页面模板的形式存在，后来移动到了石头厝，有了上面的页面。

刚开始我是同步了头部底部等博客主题，结果出现了大量的JS、CSS冲突，费了些时间无法完美解决，最终丢掉头部和底部，干掉了主题的CSS、引用，这一步操作后空白的代码正常了。

再遇到的问题是Mapbox地图的问题，空白的API正常换成我的不正常了，多次尝试新增API无法解决，后来多次刷新后突然就好了。

成功部署上还是不容易的，基础功能正常后，有好几个小功能怎么都修复不好，最终舍弃了。空白的基础完成了基础修复扩展。

第一项是深浅色，没了主题独立写了模块，返回顶部也是。第二项是吸顶地图的生成海报问题，因为随页面滚动，生成地图难看，尝试AI解决，没有成功，多次尝试不行，索性做个功能判断，地图滚动吸顶不显示生成海报按钮。

第三项是地图视野，有可能是我修改出错，地图不能自动缩放显示全部运动轨迹，AI修复轻松实现。第四项是地图中心，刚布局没有教程，多次浏览才注意到地图中心是杭州西湖附近，而小十的郑州附近，这才意识到这个中心应该是写死的，丢给AI分析确实是写死的，再给位置让AI给出位置经纬度码，填上问题解决。

第四项地图调用配速，有可能是因为我用的KEEP，没能自动显示配速，KEEP的数据获取里也没有配速，索性让AI根据里程和用时来算配速。

到这里，基础的运动页面已成型。

第三步 复刻小十

这是个复刻牛人，比如他的足迹是从之前我买的王叨叨的足迹参考复刻而来，他复刻的足迹和叨叨的完全不一样，而我又在小十基础上复刻足迹，我的足迹又牛叉了许多，这次的运动页面也是这样。

第一项，类型图标，列表每条项目前都有个图标，刚开始以为是写死的图标，多看几次发现每个都不一样，原来是写死和动态结合，有轨迹的生成轨迹图标，没轨迹的写死，费了些时间，但还算完美复刻，目前一些图标还在挑选。

第二项，鼠标HOVER，鼠标划过列表条目上方显示配速心率用时，刚开始我想完美复刻，但是遇到问题没成功，最后改为CSS覆盖模式，鼠标划过在条目时间位置显示配速、心率、用时，效果还不错。

第三项，地图显示优化，没有轨迹的地图卡片上就不显示地图，相应调用卡片及类型。

第四项，地图放大缩小，这是自带的，空白没有启用，恢复下AI来搞很简单，左侧下部部署放大缩小按钮，同时支持鼠标滚轮。

第四部步个性扩展

第一项，个性项目同步，与他们不一样，我的这个页面完全依赖KEEP，有完整的训练和运动体系，但是他们的训练步太适合我，自己定制了项目，没有KEEP依赖数据无法同步。

但脑子还算灵光，想到了让代码读取MD的野路子。

运动完在Obsidian里的运动记录里按格式记录，记录完OB插件自动同步到七牛，当访问运动页面时页面自动读取最新记录并添加到运动记录，且与列表合并。

第二项，筛选，小十做了年份、月份筛选，我认为还不够，还必须有类型筛选。经过几次的反复优化，我的运动页面实现同时按年、月筛选，整个页面包括地图、统计、列表，右侧的年份和月份一切换，数据全部切换。

页面仅显示当前年当前月数据或者是选定年选定月数据。

第三项，热力图，默认右侧有当前月的日历图，当时不够，为了让看起来更有成就感，索性做成12个月的，让AI独立写太差劲，最后直接让其抄石头厝的热力，方块颜色为各种运动或训练类型颜色的深色版，好看了。

第四项，统计，按年按月按全部按类型的汇总统计，有目标设置，有完成进度，为了体验好，还增加了收起展开按钮，默认收起。

第五项，发布Memos，生成海报页新增一键发布，一键带运动轨迹图、运动数据的短微博轻松就发了，发布按钮受网站的权限控制，仅管理员登录后才能看见，这是使用typecho的福利，要是纯独立页面权限控制搞起来就麻烦了。

第六项，中文语言，空白和小十的地图里的标记都是英文的，突发奇想，没想到一行代码全变成了中文很酷。

因时间精力有限，这次内容就这么短暂的记录，懒得截图具体效果自行到上面我的运动页面网址查看，空白代码仓库和复刻的网址页面底部有，如果你也用typecho或者愿意折腾，需要我这个页面的全部代码，给我发邮件 shitoucuo@126.com，我打包给你。