Butterfly 主题说说分离部署及 GitHub Actions 自动构建详解
本文介绍了作者如何优化网站部署与数据管理流程,实现 Butterfly 主题的说说页面与主网站完全分离。作者首先改造了 GitHub Actions 中原本为 Next.js 设计的模板,将其适配为 Hexo 构建流程,配置了缓存、并发控制与自动部署,使每次推送代码后自动完成依赖安装、静态文件生成并部署到 GitHub Pages。随后,作者用 Python 编写脚本,将本地 YAML 格式的说说数据转换为独立 JSON 文件,并修改说说页面的 Frontmatter 配置,使其远程加载该 JSON 数据,从而实现内容与主站分离管理。最后,作者解决了因仓库名称冲突导致的路径跳转问题,通过改用不重名的仓库成功部署。整个过程显著提升了版本管理效率,降低了维护成本。
一个用户的系统折腾血泪史:从 Windows 到 Linux 又回 Windows
本文介绍了作者从 Windows 7 和 Windows 10 的忠实用户,到尝试 Windows 11、Linux 发行版,最终换用 MacBook Air 的曲折经历与反思。文章描述了 Win11 初期仅作为 Win10 皮肤,在低端硬件上频繁崩溃,而后在高配游戏本上表现稳定的体验对比;以及切换到 Linux 后因图形界面难用、驱动兼容问题又重回 Windows,却面临 Win10 即将停止安全更新的困境。作者指出微软砍掉测试团队、由 Surface 部门接管 Windows 业务,将用户当作免费测试员的错误做法。文章探讨了用户真正需要的是稳定一致的体验与长期安全维护,而非频繁的 UI 花样改动。最终作者得出结论:操作系统应作为可靠的生产力工具,而非需要用户不断适应和妥协的半成品。
用 AI 自动为博客文章打标签,我写了个 Python 脚本
本文介绍了作者为解决博客文章标签利用率低的问题而编写的 Python 自动化脚本。该脚本利用 DeepSeek API 为每篇文章生成 5 个适合 SEO 的标签,并优先复用已有的标签库以避免重复。脚本自动读取 Markdown 文件,调用 API 后解析返回的标签,插入到文件的 frontmatter 中,同时更新一个标签总和文件,确保每次运行只载入当前文章和标签列表,从而降低上下文熵增。作者还建议配合 Git 管理文章目录以防数据丢失。该脚本有效简化了标签分配流程,提升了博客 SEO 优化效率。
网站破坏式更新:导航栏、评论、PWA 及缓存清理
本文介绍了作者对个人网站进行的一次大规模破坏式更新,主要包括导航栏顺序调整、合并友链与社交入口、新增工单和留言页面,并移除了分类与标签入口。网站彻底删除了对 Giscus 评论系统的支持,保留 Waline 匿名评论功能以提升访客积极性;同时移除了大部分特效和浅色模式,统一为深色主题,并更换了更符合风格的图片。技术方面,新增 PWA 适配以提升缓存和加载速度,移除 PJAX 并恢复 Lazyload 懒加载,优化了性能。文章还提醒老读者务必清除浏览器缓存,并分享了网站图标设计建议。作者感谢读者支持,鼓励大家继续进步。
让博客更有人情味:Butterfly 主题自定义 Snackbar 时段问候
本文介绍了如何为 Butterfly 主题添加一个根据时间段自动显示问候语的 Snackbar 提示条功能。文章将一天划分为六个时段并对应不同问候语,通过 JavaScript 脚本判断首页后延迟一秒触发提示。同时详细说明了利用主题的 inject 配置项将脚本注入所有页面,并针对 Snackbar 自带的 Roboto 字体与网站 ZCOOLXiaoWei 字体不统一的问题,编写自定义 CSS 覆盖字体设置,使提示条外观与网站风格一致。整个过程轻柔自然,不干扰浏览体验,且支持灵活修改文案,为博客增添人情味。
网站 Giscus 评论区 CSS 美化,与亮暗主题配置教程
本文介绍了如何在网站中添加 Giscus 作为第二评论区,由于 Giscus 通过 iframe 标签嵌入,美化时需要使用带网站域名的绝对路径。文章选择 noborder_light 和 noborder_dark 作为默认亮暗主题,并将 CSS 文件存放于 /assets/css/giscus/ 目录。详细给出了亮色与暗色两套自定义 CSS 代码,包括字体引入、颜色变量、按钮样式等,确保评论区与网站风格统一。最后展示了在配置文件中的主题引用方式(light_theme 和 dark_theme)。整个过程旨在快速实现评论区的基本美化,后续可进一步优化。
Hexo Butterfly 亮暗色切换:data-theme 替代 @media 实现方法
本文介绍了 Hexo 博客 Butterfly 主题的亮暗色切换实现原理与自定义方法。文章指出 Butterfly 通过 JS 脚本控制 `data-theme` 属性实现颜色模式切换,而非监听浏览器主题,因此刷新页面后才能响应系统主题变化。作者详细解释了暗色模式下的 CSS 变量赋值方式,并给出了具体的代码示例,包括如何为卡片、布局等元素分别设置亮色和暗色背景,以及如何使用 `[data-theme='dark']` 选择器替代 `@media (prefers-color-scheme: dark)` 进行暗色样式定制。文章为需要深度美化 Butterfly 主题的用户提供了实用的 CSS 编写思路。
Butterfly 主题卡片毛玻璃效果,CSS 代码与暗色模式适配
本文介绍了在 Butterfly 主题网站中为卡片实现毛玻璃效果的方法与问题解决过程。文章首先指出,为所有卡片统一设置 backdrop-filter: blur(7px) 可使导航栏模糊程度一致,但在暗色模式下会因缺乏基础颜色导致卡片与背景糊成一片。作者曾尝试通过 @media (prefers-color-scheme: light) 限制仅在亮色模式生效,但这并非根本解决方案。后来意外发现主题作者为导航栏设计的十六位色(如 #FFFFFFB3 和 #121212CC),通过为亮色和暗色模式分别设置带透明度通道的背景颜色,再统一保留 blur(7px),即可实现不干扰网站扁平化设计的毛玻璃效果,且暗色模式用户也能正常使用。最后,文章给出了在 Butterfly 主题配置文件中引入对应 CSS 文件以及通过 Cloudflare Pages 完成部署的示例代码。
从 MkDocs 起步的个人博客,一段值得怀念的折腾经历
本文描述了作者最初在 2025 年因 Arch 系统故障偶然接触 MkDocs 的经历,通过一个大学生博客的引导,一步步搭建起自己的第一个博客网站。虽然当时只会照抄教程、缺少美化技巧,导致网站外观简陋,但这次体验让作者首次发现建站可以如此便捷,无需手写 HTML。后来才意识到 MkDocs 只是文档生成工具,功能如 Sitemap、RSS 等需依赖插件且配置繁琐。作者也回忆了那位引导者 S 佬的博客后来消失,以及自己初中时期请假在家折腾系统的特殊经历,感慨那段时光为个人博客启蒙带来了不可替代的怀念。
Cloudflare AI 防护,导致搜索引擎排名下降
本文介绍了 Cloudflare AI 防护功能对网站搜索引擎排名的影响及其解决方案。当用户开启 Cloudflare 的 AI 防护后,系统会自动生成一份 robots.txt 文件,即使网站原本没有该文件,也会禁止绝大部分 AI 和爬虫访问,导致网站在搜索引擎中掉排名甚至无法被搜到。作者通过必应警告发现了这一隐藏问题,并指出除非用户完全不关心网站排名且只希望朋友访问,否则应当关闭该自动功能,自行编写合适的 robots.txt。文章反思了个人网站运维中容易被忽视的细节,强调即便掌握 Linux 等运维技能,仍可能因这类小配置影响网站可见性。


