最近我需要将某个运动网站（RQ Run）上的个人训练记录同步到我的 Hexo 博客中。由于该网站需要登录才能查看详细数据，并且登录过程包含验证码，因此我使用 Node.js 版的 Playwright 编写了一个自动化脚本，结合阿里云 OCR 服务识别验证码，实现了数据的自动抓取，并通过 EJS 模...

在开发基于 Web 的应用时，我们经常会遇到前端 JavaScript 代码无法读取存储在阿里云 OSS（Object Storage Service）上的资源的问题。本文将详细记录一次典型的 CORS（跨域资源共享）问题的排查过程及解决方案。 问题描述场景：我们编写了一个 Node.js 脚本抓取...

作为一名热爱跑步的程序员，我一直想把自己的马拉松经历以一种独特的方式呈现在博客上。普通的文字和静态图片虽然能记录当下，但无法还原那 21.0975 公里的心路历程。 于是，我决定在博客的首屏实现一个动态的运动轨迹可视化效果：以高德地图为画布，实时绘制 GPX 轨迹，并同步展示心率、配速、步频等专业运...

这款主题不仅拥有现代化的 UI 设计，还深度集成了运动数据可视化、AI 对话助手等硬核功能。本文将详细复盘这次 “AI 驱动开发” 的全过程，解析主题背后的技术细节。 1. 设计理念与架构规划1.1 核心目标传统的 Hexo 主题大多偏向于纯文本内容的展示，而我希望 “Awen” 主题能体现我的个人...

在博客主题的开发中，为了提升首页的视觉冲击力和互动性，我们在 Hero Splash（首屏动画）中加入了一个 “Stats Overlay”（数据统计浮层）。这个浮层用于实时显示马拉松轨迹动画过程中的关键数据（如时间、距离、配速、心率等）。 本文将深入解析这个功能的实现原理，涵盖 HTML 结构、C...