Butterfly

本文介绍了如何通过 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 文件的方法。

本文介绍了在 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 图片变为白色、浅色模式下保持黑色，避免颜色冲突。

本文介绍了如何使用一段 Shell 脚本检查指定文件中的链接存活状态。该脚本首先定义文件路径为 source/_data/link.yml ，然后判断文件是否存在，若存在则使用 grep 提取所有 https 开头的主机名，通过 sed 去除协议头，再借助 xargs 和 sh 执行 ping 命令，对每个主机发送 4 个 ICMP 包。根据 ping 结果，脚本会输出该主机“存活！”或“死亡！”。本文适用于需要定期验证博客或网站友情链接是否有效的场景，可快速检测链接的可用性，便于运维人员及时处理失效链接。

本文介绍了如何使用 Shell 脚本向 YAML 文件动态追加数据记录。脚本定义了两个函数：nofile 用于在文件不存在时创建并写入第一条记录，包含当前日期时间、固定 key 值 1 以及用户输入的内容；hadfile 则读取已有文件中的最大 key 值并自动递增，然后追加新记录。主逻辑通过检查文件是否存在来调用相应函数。该脚本适用于自动化博客或静态站点中类似说说、动态等内容的管理，实现简单且高效。

本文介绍了 Hexo Butterfly 主题的安装与详细配置方法。文章从安装主题开始，指导用户修改 Hexo 配置文件并复制主题配置文件。随后依次讲解了导航栏、菜单、代码块、社交链接、图片设置、首页字幕、目录、文章版权、分页、过期提示、页脚、侧边栏（作者卡片、公告、最新评论、运行时间）、繁简转换、暗黑模式、滚动百分比、复制设置、字数统计、搜索、分享、评论系统（推荐 Waline）、主题颜色、字体、加载动画、特效、图片灯箱、PJAX、懒加载及注入代码等模块的配置选项。此外还说明了分类、标签、友链、说说等页面的创建与数据文件编写方式。最后给出了初始化 Git 仓库和部署建议。本文适合希望个性化搭建 Hexo 博客并使用 Butterfly 主题的开发者参考。