Butterfly

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

本文介绍了如何为 Butterfly 主题添加一个根据时间段自动显示问候语的 Snackbar 提示条功能。文章将一天划分为六个时段并对应不同问候语，通过 JavaScript 脚本判断首页后延迟一秒触发提示。同时详细说明了利用主题的 inject 配置项将脚本注入所有页面，并针对 Snackbar 自带的 Roboto 字体与网站 ZCOOLXiaoWei 字体不统一的问题，编写自定义 CSS 覆盖字体设置，使提示条外观与网站风格一致。整个过程轻柔自然，不干扰浏览体验，且支持灵活修改文案，为博客增添人情味。

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

本文介绍了在 Butterfly 主题网站中为卡片实现毛玻璃效果的方法与问题解决过程。文章首先指出，为所有卡片统一设置 backdrop-filter: blur(7px) 可使导航栏模糊程度一致，但在暗色模式下会因缺乏基础颜色导致卡片与背景糊成一片。作者曾尝试通过 @media (prefers-color-scheme: light) 限制仅在亮色模式生效，但这并非根本解决方案。后来意外发现主题作者为导航栏设计的十六位色（如 #FFFFFFB3 和 #121212CC），通过为亮色和暗色模式分别设置带透明度通道的背景颜色，再统一保留 blur(7px)，即可实现不干扰网站扁平化设计的毛玻璃效果，且暗色模式用户也能正常使用。最后，文章给出了在 Butterfly 主题配置文件中引入对应 CSS 文件以及通过 Cloudflare Pages 完成部署的示例代码。

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

本文介绍了如何通过 JavaScript 脚本将博客“关注我”按钮改造为显示友链数量的动态统计。作者利用博客的友链页面（如 /friends）抓取所有友链链接，统计数量后替换按钮中的显示内容，实现类似社交平台的粉丝数效果。文章详细说明了脚本实现步骤、配置方式（如 Butterfly 主题的 inject 设置），并提醒根据实际页面路径修改代码。该方法以交换友链作为“关注”的等价行为，是一种轻量级的替代方案。

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

本文介绍了如何在 Butterfly 主题中实现随机跳转友链的功能。原本计划使用 AnZhiYu 主题，但因配置繁琐而选择了 Butterfly 并稍作美化，但缺少安知鱼主题的随机跳转友链功能。作者通过前端抓取友链页面，提取所有 a.href 链接组成列表，然后随机抽取并跳转。具体实现为：定义一个名为 go 的异步函数，使用 fetch 获取 /friends 页面，解析 HTML 后提取所有 .flink-list-item a 的 href 属性，过滤无效链接后随机选择并跳转。通过修改主题配置文件，将脚本注入到每个页面的底部，并在页脚自定义文本中添加一个调用 go() 的链接，既不影响导航栏布局，又能为访客提供惊喜。作者最终将此功能作为彩蛋，避免与开往按钮混淆。

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

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