上周在浏览技术资讯时，我注意到 Google 发布了一个令人兴奋的新工具——Chrome DevTools MCP。作为一个常年和浏览器打交道的前端开发者，这个工具立刻引起了我的兴趣。它让 AI 编码助手能够直接控制 Chrome 浏览器，实现自动化测试、性能分析和深度调试。 什么是 MCP？在介...

最近在博客中集成了 AI 聊天功能，包含两种交互方式：右下角的小窗（widget）和点击”新窗口打开”后的全屏页面。然而，在测试时发现一个令人头疼的问题：小窗里的聊天记录无法同步到大窗。 问题现象 用户在右下角小窗与 AI 对话，发送了几条消息 点击”新窗口打开”按钮，期望在大窗中继续对话 大窗打开...

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

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

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