CSS 美化

本文介绍了作者对个人网站进行的一次大规模破坏式更新，主要包括导航栏顺序调整、合并友链与社交入口、新增工单和留言页面，并移除了分类与标签入口。网站彻底删除了对 Giscus 评论系统的支持，保留 Waline 匿名评论功能以提升访客积极性；同时移除了大部分特效和浅色模式，统一为深色主题，并更换了更符合风格的图片。技术方面，新增 PWA 适配以提升缓存和加载速度，移除 PJAX 并恢复 Lazyload 懒加载，优化了性能。文章还提醒老读者务必清除浏览器缓存，并分享了网站图标设计建议。作者感谢读者支持，鼓励大家继续进步。

本文介绍了如何在网站中添加 Giscus 作为第二评论区，由于 Giscus 通过 iframe 标签嵌入，美化时需要使用带网站域名的绝对路径。文章选择 noborder_light 和 noborder_dark 作为默认亮暗主题，并将 CSS 文件存放于 /assets/css/giscus/ 目录。详细给出了亮色与暗色两套自定义 CSS 代码，包括字体引入、颜色变量、按钮样式等，确保评论区与网站风格统一。最后展示了在配置文件中的主题引用方式（light_theme 和 dark_theme）。整个过程旨在快速实现评论区的基本美化，后续可进一步优化。

本文介绍了对网站进行的多项优化改进，包括将导航菜单中的“文章”改为更准确的“归档”；将首页布局的 `index_layout` 从 3 改为 4 并采用卡片展示方式，以提升视觉效果；将每页文章数从 10 篇增至 15 篇以提高浏览效率；以及为所有说说条目添加标签分类功能，涵盖生活、美食、技术、娱乐等类别，方便访客筛选查找。文章也提及了后续将布局和分页改回原设置的调整。这些改动从用户体验出发，使网站内容组织更清晰、浏览更便捷。

本文介绍了在使用 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 主题的开发者参考。