我为何把个人网站换回最初的简洁主题
本文介绍了作者在管理个人网站和 B 站信箱过程中经历的反思与回归。作者首先描述了 B 站信箱因评论被顶到热门而充斥陌生人的无效留言,使其难以分辨真实交流,转而通过回看视频评论区逐条回复来寻求真实感。接着,作者回顾了个人网站建设中因添加过多定制功能如毛玻璃卡片、深色模式等导致界面臃肿混乱,最终意识到最初的主题简洁完整,决定换回旧主题以回归初心。由于缺乏 Git 记录,作者借助 Matugen 生成配色方案,并利用 GLM 将配色写入主题,预期呈现更明亮清新的效果。同时,作者保留了部分实用功能如 CSS 覆写规则、404 页面自动修复、友链模块和评论区头像解析,实现删繁就简的融合升级。最后,作者反思过度美化的教训,强调简洁是需学习的克制,并建议访客在重新访问前清空浏览器缓存以避免样式冲突。
Butterfly 主题首页文章列表,固定高度动态补齐方法
本文介绍了 Butterfly 主题中首页文章列表高度不统一的问题及其解决方案。由于博客每页显示固定篇数(如 10 篇),末页文章数量不足时,列表容器高度会大幅缩减,导致底部大量空白,影响视觉一致性。为解决该问题,文章提供了一种基于 JavaScript 的动态补齐方法:通过 fillRecentPostItems 函数检测 .recent-post-items 容器内实际文章条目数,若少于目标值(如 10),则自动追加对应数量的隐藏 div 元素(visibility: hidden),使容器高度始终与满篇数保持一致。该逻辑还通过监听 pjax:complete 事件兼容 PJAX 无刷新加载,确保页面切换后自动执行补齐。同时指出,在 index_layout 参数为 4 或 6 的特殊布局下,由于文章条目高度依赖封面图片,纯隐藏标签会导致高度不一致,因此需要额外添加空封面占位元素。最后说明如何通过主题的 inject 配置将脚本注入页面底部,无需修改核心文件,便于维护升级。该方案有效解决了分页高度不一致的布局问题。
告别匿名头像,用 CSS 与 JSON 动态替换 Gravatar 默认头像
本文介绍了如何解决评论区默认 Gravatar 头像导致大量匿名用户使用相同默认图标、破坏页面视觉一致性的问题。作者首先指出大部分评论系统基于 Gravatar 机制,但国内用户很少注册,导致评论区频繁出现蓝色背景的默认头像。最初的方案是利用 CSS 的 img[src=""] 属性选择器和 content: url() 声明直接替换头像地址,但发现 CSS 文件被浏览器或 CDN 缓存后无法即时更新,且随着无头像访客增多,维护成本极高。为此作者提出了更优雅的解决方案:将头像映射关系写成 JSON 格式,部署在 GitHub Pages 上,再通过自执行 JavaScript 脚本从服务器拉取该 JSON,动态生成 CSS 样式并注入页面头部,从而替换所有匹配的 Gravatar 头像。该方案不依赖特定评论系统,只要底层使用 Gravatar 机制均可适用。作者最终将此服务命名为“梁栋烨头像联盟”,并开放共享,同时鼓励读者自行搭建以完全掌控数据。文章还表示会为长期访客提供头像解析工单,帮助其获得专属视觉标识。
博客排版优化:CSS 调整字体间距与段落缩进
本文介绍了作者在维护个人博客网站时发现字体拥挤、段落缺乏缩进导致可读性差的问题,并借助 DeepSeek 寻求解决方案的过程。通过分析,作者确定需要针对文章正文容器(article p 和 div#article-container p)添加 text-indent: 2rem 实现首行缩进,同时为全站 body 设置 letter-spacing: 0.1rem 以增加字符间距。随后,作者在 _config.butterfly.yml 主题配置文件中正确引用了自定义的 paragraph.css 文件,并利用 GitHub Actions 自动部署更新。文章还强调了在开发者工具中验证样式是否生效、以及清除浏览器缓存或强制刷新页面等常见排查步骤,帮助读者避免因配置遗漏或缓存导致修改无效的陷阱。最终,通过精准的 CSS 选择器和统一的间距设置,网站排版获得了“书卷气”般的舒适阅读体验。
网站破坏式更新:导航栏、评论、PWA 及缓存清理
本文介绍了作者对个人网站进行的一次大规模破坏式更新,主要包括导航栏顺序调整、合并友链与社交入口、新增工单和留言页面,并移除了分类与标签入口。网站彻底删除了对 Giscus 评论系统的支持,保留 Waline 匿名评论功能以提升访客积极性;同时移除了大部分特效和浅色模式,统一为深色主题,并更换了更符合风格的图片。技术方面,新增 PWA 适配以提升缓存和加载速度,移除 PJAX 并恢复 Lazyload 懒加载,优化了性能。文章还提醒老读者务必清除浏览器缓存,并分享了网站图标设计建议。作者感谢读者支持,鼓励大家继续进步。
网站 Giscus 评论区 CSS 美化,与亮暗主题配置教程
本文介绍了如何在网站中添加 Giscus 作为第二评论区,由于 Giscus 通过 iframe 标签嵌入,美化时需要使用带网站域名的绝对路径。文章选择 noborder_light 和 noborder_dark 作为默认亮暗主题,并将 CSS 文件存放于 /assets/css/giscus/ 目录。详细给出了亮色与暗色两套自定义 CSS 代码,包括字体引入、颜色变量、按钮样式等,确保评论区与网站风格统一。最后展示了在配置文件中的主题引用方式(light_theme 和 dark_theme)。整个过程旨在快速实现评论区的基本美化,后续可进一步优化。
网站优化实战:导航归档与说说标签分类
本文介绍了对网站进行的多项优化改进,包括将导航菜单中的“文章”改为更准确的“归档”;将首页布局的 `index_layout` 从 3 改为 4 并采用卡片展示方式,以提升视觉效果;将每页文章数从 10 篇增至 15 篇以提高浏览效率;以及为所有说说条目添加标签分类功能,涵盖生活、美食、技术、娱乐等类别,方便访客筛选查找。文章也提及了后续将布局和分页改回原设置的调整。这些改动从用户体验出发,使网站内容组织更清晰、浏览更便捷。
巧用 CSS 容器一步修复 Butterfly 主题,目录加载图片大小问题
本文介绍了在使用 Butterfly 主题时,遇到的目录大小计算问题,即目录仅统计首次加载时的内容而非加载完成后的实际大小。文章提供了解决方案:通过为图片添加 CSS 容器,设置 width: 100%、aspect-ratio 和 object-fit 属性,实现图片占位与裁剪,从而解决目录高度计算错误。同时,作者强调了根据网站图片比例(如 4:3、16:9 或 1:1)调整 aspect-ratio 值,并建议使用压缩后的 .webp 格式图片以保持原分辨率。最后给出了在主题配置文件中注入该 CSS 文件的方法。
Hexo 博客 Butterfly 主题安装,与配置完整教程指南
本文介绍了 Hexo Butterfly 主题的安装与详细配置方法。文章从安装主题开始,指导用户修改 Hexo 配置文件并复制主题配置文件。随后依次讲解了导航栏、菜单、代码块、社交链接、图片设置、首页字幕、目录、文章版权、分页、过期提示、页脚、侧边栏(作者卡片、公告、最新评论、运行时间)、繁简转换、暗黑模式、滚动百分比、复制设置、字数统计、搜索、分享、评论系统(推荐 Waline)、主题颜色、字体、加载动画、特效、图片灯箱、PJAX、懒加载及注入代码等模块的配置选项。此外还说明了分类、标签、友链、说说等页面的创建与数据文件编写方式。最后给出了初始化 Git 仓库和部署建议。本文适合希望个性化搭建 Hexo 博客并使用 Butterfly 主题的开发者参考。




