CSS 美化

本文介绍了作者在管理个人网站和 B 站信箱过程中经历的反思与回归。作者首先描述了 B 站信箱因评论被顶到热门而充斥陌生人的无效留言，使其难以分辨真实交流，转而通过回看视频评论区逐条回复来寻求真实感。接着，作者回顾了个人网站建设中因添加过多定制功能如毛玻璃卡片、深色模式等导致界面臃肿混乱，最终意识到最初的主题简洁完整，决定换回旧主题以回归初心。由于缺乏 Git 记录，作者借助 Matugen 生成配色方案，并利用 GLM 将配色写入主题，预期呈现更明亮清新的效果。同时，作者保留了部分实用功能如 CSS 覆写规则、404 页面自动修复、友链模块和评论区头像解析，实现删繁就简的融合升级。最后，作者反思过度美化的教训，强调简洁是需学习的克制，并建议访客在重新访问前清空浏览器缓存以避免样式冲突。

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

本文介绍了如何解决评论区默认 Gravatar 头像导致大量匿名用户使用相同默认图标、破坏页面视觉一致性的问题。作者首先指出大部分评论系统基于 Gravatar 机制，但国内用户很少注册，导致评论区频繁出现蓝色背景的默认头像。最初的方案是利用 CSS 的 img[src=""] 属性选择器和 content: url() 声明直接替换头像地址，但发现 CSS 文件被浏览器或 CDN 缓存后无法即时更新，且随着无头像访客增多，维护成本极高。为此作者提出了更优雅的解决方案：将头像映射关系写成 JSON 格式，部署在 GitHub Pages 上，再通过自执行 JavaScript 脚本从服务器拉取该 JSON，动态生成 CSS 样式并注入页面头部，从而替换所有匹配的 Gravatar 头像。该方案不依赖特定评论系统，只要底层使用 Gravatar 机制均可适用。作者最终将此服务命名为“梁栋烨头像联盟”，并开放共享，同时鼓励读者自行搭建以完全掌控数据。文章还表示会为长期访客提供头像解析工单，帮助其获得专属视觉标识。

本文介绍了作者在维护个人博客网站时发现字体拥挤、段落缺乏缩进导致可读性差的问题，并借助 DeepSeek 寻求解决方案的过程。通过分析，作者确定需要针对文章正文容器（article p 和 div#article-container p）添加 text-indent: 2rem 实现首行缩进，同时为全站 body 设置 letter-spacing: 0.1rem 以增加字符间距。随后，作者在 _config.butterfly.yml 主题配置文件中正确引用了自定义的 paragraph.css 文件，并利用 GitHub Actions 自动部署更新。文章还强调了在开发者工具中验证样式是否生效、以及清除浏览器缓存或强制刷新页面等常见排查步骤，帮助读者避免因配置遗漏或缓存导致修改无效的陷阱。最终，通过精准的 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 主题的开发者参考。