CSS 美化

本文介绍了作者在收到多位访客反馈后，发现博客页面在高分屏（如 4K 或视网膜屏幕）上出现文字模糊、字号过小的问题，而作者自身设备显示正常。经排查，排除了字体与 CSS 样式错误，推测问题源于操作系统或浏览器的缩放比例与页面适配机制冲突。作者最初采用 CSS 的 clamp() 函数实现流体排版，但实测发现该函数在缩放后的 4K 屏幕上计算出的字号异常偏大，难以精准适配不同设备的缩放习惯与像素密度。为此，作者转而使用 @media 媒体查询为不同视口宽度指定基准字号：屏幕宽度超过 2560 像素时根字体设为 1.4rem，低于 1024 像素时设为 0.9rem，以平衡各类阅读场景。此外，博客内置了“阅读模式”按钮，可切换为系统字体、宽行距的沉浸式排版，但多数非技术背景访客不理解该功能，甚至不知如何启用。作者曾考虑撰写图文指南并置顶首页，又担心过于正式显得像使用命令，最终搁置了计划。文章反映了在美观与用户体验之间权衡的困境，以及为不同设备适配字体所付出的努力。

本文介绍了作者在 6 月 14 日晚上为个人博客进行的一次大规模样式更新，称其为“大换血”。更新原因很简单：旧样式不好看，尤其是深色模式体验差，卡片与背景难以区分。作者首先针对字体搭配进行了优化，指出博客风格偏二维动漫卡通感，因此需要选择合适的卡通字体，而非之前不协调的书法字体。经过在免费字体网站中耐心筛选，最终在第 10 页找到了一款符合要求且不过分张扬的卡通字体。其次，作者解决了图片搭配问题：默认封面多为立体摄影作品，与二维动漫风格不匹配，因此借助 AI 绘画将摄影作品转化为二维平面风格，并采用纯白背景以聚焦重点。头像和英雄区域也选用了作者喜欢的假面骑士电王图片，通过 AI 进行风格转换。此外，作者还移除了若干无用的 CSS 和 JS 代码，如侧边栏样式、主题卡片颜色以及随机算法脚本。最后，作者提醒老访客需清空浏览器静态缓存才能看到新样式，新访客则无需操作。

本文介绍了作者在管理个人网站和 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 文件的方法。