Hexo

本文介绍了作者在重构网站编译模式并提交 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 强制修改图片宽高比的做法是错误的，会导致评论区表情包异常，因此已删除该样式。作者反思了自己因精神状态不佳而导致的失误。

本文介绍了在使用 Butterfly 主题时，遇到的目录大小计算问题，即目录仅统计首次加载时的内容而非加载完成后的实际大小。文章提供了解决方案：通过为图片添加 CSS 容器，设置 width: 100%、aspect-ratio 和 object-fit 属性，实现图片占位与裁剪，从而解决目录高度计算错误。同时，作者强调了根据网站图片比例（如 4:3、16:9 或 1:1）调整 aspect-ratio 值，并建议使用压缩后的 .webp 格式图片以保持原分辨率。最后给出了在主题配置文件中注入该 CSS 文件的方法。

本文介绍了在 Butterfly 主题中启用深色模式并解决 SVG 图片颜色冲突的方法。通过在 `_config.butterfly.yml` 中配置 `darkmode` 选项，可以开启深色模式切换按钮，并设置自动跟随系统或固定时间段切换。然而，手动引入的 `.svg` 图片在深色模式下不会自动变色，仍显示为黑色。为解决此问题，使用 CSS 媒体查询 `@media (prefers-color-scheme: dark)` 和滤镜 `filter: brightness(0) invert(1) !important;`，将 SVG 图片在深色模式下反转成白色。将该样式保存为 `svg.css`，并通过 `inject.head` 配置注入到网站中，从而实现深色模式下 SVG 图片变为白色、浅色模式下保持黑色，避免颜色冲突。