Hexo

本文介绍了作者在尝试使用 AI 工具为自己定制 Hexo 博客主题过程中遇到的诸多困难与挫败经历。作者原本计划基于 Butterfly 主题进行二次魔改，融入手绘风格、动态小玩偶、循环插图以及春夏秋冬自动切换的配色装饰，但由于自身缺乏平面设计素材和软件（如 PS、GIMP），以及 SVG 绘图能力有限，第一步就陷入停滞。随后尝试利用 AI 生成荧光手绘风格的插画，但 AI 反复输出素描图，无法理解作者所需的霓虹线条与手绘随性感。作者还吐槽了 AI 编程和绘图的现实局限——看似强大，实则无法满足具体、精细的二次修改需求。此外，作者在寻找可用的 AI 工具和 Skills 时，遭遇了大量标题党文章和广告软文，耗费时间却一无所获。最终，由于对豆包等云端生图工具的不信任和繁琐注册流程，作者的热情被消耗殆尽，主题开发暂时搁置。文章通过个人实践，揭示了当前 AI 工具在创意设计领域依然存在理解偏差、功能不匹配及生态混乱等问题。

本文介绍了作者的朋友阿普修从零编写个人博客主题，但该主题存在多项严重缺陷，导致作者不得不分支仓库并帮忙修复。首先，RSS 功能未遵循规范，将所有文章全量输出，每次更新都会让阅读器重复推送全部内容，造成极大干扰。其次，暗色模式仅覆盖首页部分元素，文章页面、说说页面、友链页面、评论区及统计页面的背景和文字颜色均被写死，在暗色模式下显示为白色或对比度极低，几乎不可用。此外，代码块背景、导航栏菜单及链接顺序也采用硬编码，无法通过配置文件修改，严重破坏了页面结构和 SEO 效果。作者对比了成熟主题的设计思路，指出写主题应使用变量分离、不破坏原始结构，并建议缺乏经验者先使用成熟框架而非自研。最后，作者讽刺地通过 RSS 阅读器得知阿普修又发布了安卓版客户端，进一步体现了其“全写死”架构带来的维护和扩展难题。

本文介绍了作者因对不蒜子统计 API 的不稳定感到困扰，并在发现网站总浏览量接近两万后，对访客来源、设备类型等数据产生强烈好奇，最终决定部署开源网站分析工具 Umami 的过程。文章详细描述了 Umami 的部署步骤：首先通过 Vercel 官方链接一键克隆仓库，创建项目并配置 Neon 数据库实现自动集成注入环境变量 DATABASE_URL，其次绑定自定义域名或使用 Vercel 提供的二级域名，然后触发重新部署。部署完成后使用默认账号 admin 和密码 umami 登录，并立即修改密码并切换界面语言为简体中文。核心环节是将博客网站添加到 Umami 统计界面，通过修改 Hexo 主题配置文件（如 _config.butterfly.yml），将 enable 设为 true，填入 serverURL 和从 Umami 控制台获取的 website_id，并可按需关闭不蒜子以避免数据冗余。最终，Umami 能提供访客国家地区地图展示、页面停留时间、访客行为等详细分析，帮助作者根据数据优化写作方向。全文强调通过 Vercel 与 Neon 的深度集成，部署过程已极为简化，即使是技术基础薄弱的用户也可按步骤完成。

本文介绍了 Butterfly 主题中首页文章列表高度不统一的问题及其解决方案。由于博客每页显示固定篇数（如 10 篇），末页文章数量不足时，列表容器高度会大幅缩减，导致底部大量空白，影响视觉一致性。为解决该问题，文章提供了一种基于 JavaScript 的动态补齐方法：通过 fillRecentPostItems 函数检测 .recent-post-items 容器内实际文章条目数，若少于目标值（如 10），则自动追加对应数量的隐藏 div 元素（visibility: hidden），使容器高度始终与满篇数保持一致。该逻辑还通过监听 pjax:complete 事件兼容 PJAX 无刷新加载，确保页面切换后自动执行补齐。同时指出，在 index_layout 参数为 4 或 6 的特殊布局下，由于文章条目高度依赖封面图片，纯隐藏标签会导致高度不一致，因此需要额外添加空封面占位元素。最后说明如何通过主题的 inject 配置将脚本注入页面底部，无需修改核心文件，便于维护升级。该方案有效解决了分页高度不一致的布局问题。

本文介绍了作者在维护个人博客网站时发现字体拥挤、段落缺乏缩进导致可读性差的问题，并借助 DeepSeek 寻求解决方案的过程。通过分析，作者确定需要针对文章正文容器（article p 和 div#article-container p）添加 text-indent: 2rem 实现首行缩进，同时为全站 body 设置 letter-spacing: 0.1rem 以增加字符间距。随后，作者在 _config.butterfly.yml 主题配置文件中正确引用了自定义的 paragraph.css 文件，并利用 GitHub Actions 自动部署更新。文章还强调了在开发者工具中验证样式是否生效、以及清除浏览器缓存或强制刷新页面等常见排查步骤，帮助读者避免因配置遗漏或缓存导致修改无效的陷阱。最终，通过精准的 CSS 选择器和统一的间距设置，网站排版获得了“书卷气”般的舒适阅读体验。

本文介绍了作者在重构网站编译模式并提交 GitHub Actions 工作流时遇到的困境。作者试图提交到官方模板仓库，却发现必须勾选一份全英文的 Pull Request 表单，其中一条要求提供图标。由于作者仅准备了代码，便尝试将 Hugo 的六角形图标修改为 Hexo 的尖角风格，但 SVG 修改失败。在求助 AI 豆包时，豆包反复复述问题却无法生成正确图片，甚至只给出空洞承诺。作者回忆豆包仅在生成角色三视图和技校填表时有用，对这次低效服务感到失望。文章探讨了 AI 工具在具体任务中的局限性及用户体验问题。

本文介绍了作者如何优化网站部署与数据管理流程，实现 Butterfly 主题的说说页面与主网站完全分离。作者首先改造了 GitHub Actions 中原本为 Next.js 设计的模板，将其适配为 Hexo 构建流程，配置了缓存、并发控制与自动部署，使每次推送代码后自动完成依赖安装、静态文件生成并部署到 GitHub Pages。随后，作者用 Python 编写脚本，将本地 YAML 格式的说说数据转换为独立 JSON 文件，并修改说说页面的 Frontmatter 配置，使其远程加载该 JSON 数据，从而实现内容与主站分离管理。最后，作者解决了因仓库名称冲突导致的路径跳转问题，通过改用不重名的仓库成功部署。整个过程显著提升了版本管理效率，降低了维护成本。

本文介绍了 Hexo 博客 Butterfly 主题的亮暗色切换实现原理与自定义方法。文章指出 Butterfly 通过 JS 脚本控制 `data-theme` 属性实现颜色模式切换，而非监听浏览器主题，因此刷新页面后才能响应系统主题变化。作者详细解释了暗色模式下的 CSS 变量赋值方式，并给出了具体的代码示例，包括如何为卡片、布局等元素分别设置亮色和暗色背景，以及如何使用 `[data-theme='dark']` 选择器替代 `@media (prefers-color-scheme: dark)` 进行暗色样式定制。文章为需要深度美化 Butterfly 主题的用户提供了实用的 CSS 编写思路。

本文介绍了 Cloudflare Workers 与 Pages 两种原生部署模式的区别。文章从域名入手，指出 Workers 使用 workers.dev 而 Pages 使用 pages.dev。接着深入分析 Workers 的两种形态：Serverless 和静态 Workers。Serverless 以函数形式处理请求，存在冷启动问题，仅有算力无存储，需搭配云数据库如 Neon、MongoDB 使用；静态 Workers 则能连接 GitHub 仓库自动构建静态站点，但每次需回源计算，无法充分利用 Cache Rules。文章还对比了 Workers 与 Pages 在部署流程上的差异，并提供了使用 Wrangler 命令行工具推送代码到 Pages 或 Workers 的实战示例，帮助读者根据项目类型选择合适方案。

本文介绍了如何使用一段简单的 JavaScript 代码为网站添加默哀功能，即在特定纪念日自动将网页元素从彩色变为灰白色。代码通过检测当前日期是否匹配清明节、国家公祭日、汶川地震纪念日、七七事变纪念日、九一八事变纪念日、烈士纪念日、日本投降纪念日以及毛泽东、周恩来、邓小平逝世纪念日等日期，若匹配则对 document.documentElement 应用 grayscale(100%) 滤镜。文章还说明了需在主题配置文件中通过 inject 方式导入该 JS 脚本，并提供了示例配置代码段。整体实现简洁，无需额外提醒文字，仅通过视觉变化体现默哀。