CSS 美化

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

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