Butterfly

本文介绍了作者因对不蒜子统计 API 的不稳定感到困扰，并在发现网站总浏览量接近两万后，对访客来源、设备类型等数据产生强烈好奇，最终决定部署开源网站分析工具 Umami 的过程。文章详细描述了 Umami 的部署步骤：首先通过 Vercel 官方链接一键克隆仓库，创建项目并配置 Neon 数据库实现自动集成注入环境变量 DATABASE_URL，其次绑定自定义域名或使用 Vercel 提供的二级域名，然后触发重新部署。部署完成后使用默认账号 admin 和密码 umami 登录，并立即修改密码并切换界面语言为简体中文。核心环节是将博客网站添加到 Umami 统计界面，通过修改 Hexo 主题配置文件（如 _config.butterfly.yml），将 enable 设为 true，填入 serverURL 和从 Umami 控制台获取的 website_id，并可按需关闭不蒜子以避免数据冗余。最终，Umami 能提供访客国家地区地图展示、页面停留时间、访客行为等详细分析，帮助作者根据数据优化写作方向。全文强调通过 Vercel 与 Neon 的深度集成，部署过程已极为简化，即使是技术基础薄弱的用户也可按步骤完成。

本文介绍了网站重构或迁移后路径变化导致搜索引擎索引失效的问题，并给出了一种基于前端脚本的路径纠错解决方案。文章描述了当用户访问错误路径时，浏览器会展示预设的 404 页面，然后通过脚本获取当前路径，并与从 sitemap.txt 中提取的合法路径列表进行语义匹配，利用 Levenshtein 距离和路径层级评分找到最可能的正确路径，并在 5 秒后自动跳转。还提供了调试函数 error_location 用于本地测试。文章详细说明了编写脚本过程中遇到的坑，例如 Butterfly 主题的 404 容器类名、Hexo 生成的 sitemap 包含 index.html 后缀问题，以及如何通过另一个脚本去除 index.html 实现干净跳转。最后给出了在 _config.butterfly.yml 的 inject 中引入脚本的配置示例。该方案有效保留了 SEO 索引，提升了用户体验。

本文介绍了 Butterfly 主题中首页文章列表高度不统一的问题及其解决方案。由于博客每页显示固定篇数（如 10 篇），末页文章数量不足时，列表容器高度会大幅缩减，导致底部大量空白，影响视觉一致性。为解决该问题，文章提供了一种基于 JavaScript 的动态补齐方法：通过 fillRecentPostItems 函数检测 .recent-post-items 容器内实际文章条目数，若少于目标值（如 10），则自动追加对应数量的隐藏 div 元素（visibility: hidden），使容器高度始终与满篇数保持一致。该逻辑还通过监听 pjax:complete 事件兼容 PJAX 无刷新加载，确保页面切换后自动执行补齐。同时指出，在 index_layout 参数为 4 或 6 的特殊布局下，由于文章条目高度依赖封面图片，纯隐藏标签会导致高度不一致，因此需要额外添加空封面占位元素。最后说明如何通过主题的 inject 配置将脚本注入页面底部，无需修改核心文件，便于维护升级。该方案有效解决了分页高度不一致的布局问题。

本文介绍了作者在网站优化过程中，重新关注友链功能并为其创造更大价值的思考与实践。作者在投入大量精力调整网站加载速度、排版布局和交互逻辑后，偶然通过社交媒体结识了一批新人博主并主动交换友链。然而，作者意识到传统友链页面容易被访客忽视，无法有效为小博主引流，因此设想在页脚以随机形式展示友链，使其更自然地触达访客。作者参考了安知鱼博客主题的类似实现，并基于此前编写的用于抓取友链数据的 JavaScript 脚本进行改造。脚本逻辑包括：在配置文件中添加空容器标签，页面加载后异步请求 /friends 页面 HTML，解析 DOM 提取第一个 flink-list 中的友链信息，过滤无效数据，再根据屏幕宽度（大于 768 像素显示 6 个，否则显示 3 个）随机抽取不重复的友链接，动态生成链接元素插入页脚。这一响应式设计避免了手机端布局错乱，同时充分利用电脑端空间，使友链从静态列表变为动态信息流，真正释放其引流价值。

本文介绍了作者如何优化网站部署与数据管理流程，实现 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 设置），并提醒根据实际页面路径修改代码。该方法以交换友链作为“关注”的等价行为，是一种轻量级的替代方案。