阿普修主题踩坑记:RSS 暗色问题多,被小作坊主题吓哭了
本文介绍了作者的朋友阿普修从零编写个人博客主题,但该主题存在多项严重缺陷,导致作者不得不分支仓库并帮忙修复。首先,RSS 功能未遵循规范,将所有文章全量输出,每次更新都会让阅读器重复推送全部内容,造成极大干扰。其次,暗色模式仅覆盖首页部分元素,文章页面、说说页面、友链页面、评论区及统计页面的背景和文字颜色均被写死,在暗色模式下显示为白色或对比度极低,几乎不可用。此外,代码块背景、导航栏菜单及链接顺序也采用硬编码,无法通过配置文件修改,严重破坏了页面结构和 SEO 效果。作者对比了成熟主题的设计思路,指出写主题应使用变量分离、不破坏原始结构,并建议缺乏经验者先使用成熟框架而非自研。最后,作者讽刺地通过 RSS 阅读器得知阿普修又发布了安卓版客户端,进一步体现了其“全写死”架构带来的维护和扩展难题。
网站 Giscus 评论区 CSS 美化,与亮暗主题配置教程
本文介绍了如何在网站中添加 Giscus 作为第二评论区,由于 Giscus 通过 iframe 标签嵌入,美化时需要使用带网站域名的绝对路径。文章选择 noborder_light 和 noborder_dark 作为默认亮暗主题,并将 CSS 文件存放于 /assets/css/giscus/ 目录。详细给出了亮色与暗色两套自定义 CSS 代码,包括字体引入、颜色变量、按钮样式等,确保评论区与网站风格统一。最后展示了在配置文件中的主题引用方式(light_theme 和 dark_theme)。整个过程旨在快速实现评论区的基本美化,后续可进一步优化。
Hexo Butterfly 亮暗色切换:data-theme 替代 @media 实现方法
本文介绍了 Hexo 博客 Butterfly 主题的亮暗色切换实现原理与自定义方法。文章指出 Butterfly 通过 JS 脚本控制 `data-theme` 属性实现颜色模式切换,而非监听浏览器主题,因此刷新页面后才能响应系统主题变化。作者详细解释了暗色模式下的 CSS 变量赋值方式,并给出了具体的代码示例,包括如何为卡片、布局等元素分别设置亮色和暗色背景,以及如何使用 `[data-theme='dark']` 选择器替代 `@media (prefers-color-scheme: dark)` 进行暗色样式定制。文章为需要深度美化 Butterfly 主题的用户提供了实用的 CSS 编写思路。
Butterfly 主题卡片毛玻璃效果,CSS 代码与暗色模式适配
本文介绍了在 Butterfly 主题网站中为卡片实现毛玻璃效果的方法与问题解决过程。文章首先指出,为所有卡片统一设置 backdrop-filter: blur(7px) 可使导航栏模糊程度一致,但在暗色模式下会因缺乏基础颜色导致卡片与背景糊成一片。作者曾尝试通过 @media (prefers-color-scheme: light) 限制仅在亮色模式生效,但这并非根本解决方案。后来意外发现主题作者为导航栏设计的十六位色(如 #FFFFFFB3 和 #121212CC),通过为亮色和暗色模式分别设置带透明度通道的背景颜色,再统一保留 blur(7px),即可实现不干扰网站扁平化设计的毛玻璃效果,且暗色模式用户也能正常使用。最后,文章给出了在 Butterfly 主题配置文件中引入对应 CSS 文件以及通过 Cloudflare Pages 完成部署的示例代码。
Butterfly 主题深色模式:SVG 图标颜色不跟随的解决方案
本文介绍了在 Butterfly 主题中启用深色模式并解决 SVG 图片颜色冲突的方法。通过在 _config.butterfly.yml 中配置 darkmode 选项,可以开启深色模式切换按钮,并设置自动跟随系统或固定时间段切换。然而,手动引入的 .svg 图片在深色模式下不会自动变色,仍显示为黑色。为解决此问题,使用 CSS 媒体查询 @media (prefers-color-scheme: dark) 和滤镜 filter: brightness(0) invert(1) !important,将 SVG 图片在深色模式下反转成白色。将该样式保存为 svg.css,并通过 inject.head 配置注入到网站中,从而实现深色模式下 SVG 图片变为白色、浅色模式下保持黑色,避免颜色冲突。




