Hexo

本文介绍了 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 脚本，并提供了示例配置代码段。整体实现简洁，无需额外提醒文字，仅通过视觉变化体现默哀。

本文介绍了作者因 GitHub 账号被封而被迫迁移网站的经历。作者在凌晨美化网站并推送更新时发现账号被 Masked，怀疑与使用域名邮箱有关。认为 GitHub 虽重要但访问不便，且存在被封风险，因此决定将网站迁移至 Cloudflare Pages。通过本地编译后拖拽部署，发现 Cloudflare Pages 速度极快，优于 Vercel。作者最终建议开发者备份代码至 Codeberg 或 Gitee 等平台，避免依赖单一服务商。全文体现了对开源平台风险的警觉与主动备份的重要性。

本文介绍了如何为 Butterfly 主题实现随机跳转文章的功能，通过编写 JavaScript 脚本爬取归档页面并提取文章链接，再随机选择一个链接进行跳转。文章详细展示了从复用友链跳转脚本到修改选择器适配归档页面的过程，并给出了完整的 randomizer 函数代码。同时说明了在主题配置中注入脚本文件以及在页脚添加触发链接的方法，最后提醒不同主题需根据实际情况调整链接类名。

本文介绍了如何通过在网站配置文件中添加 JavaScript 代码来解决目录显示异常的问题，该代码会在页面加载完成后等待所有图片加载，并在 1.5 秒后自动刷新页面，同时监听 PJAX 等异步加载事件以保持功能生效。文章还指出了之前使用 CSS 强制修改图片宽高比的做法是错误的，会导致评论区表情包异常，因此已删除该样式。作者反思了自己因精神状态不佳而导致的失误。