WARNING修改前必读：
- 本帖基于
Anzhiyu主题进行修改方案编写，因此请读者优先掌握 Anzhiyu 主题官方文档 的内容后再来进行魔改。- 由于修改内容过多，以及可能会导致意料之外的事情，推荐使用
Github配合VSCode进行修改，方便随时备份恢复
我此前修改了博客深色模式下的背景为 Mo 佬 同款，后面发现了一些问题，部分样式文本出现了可读性降低的问题，通过添加模糊效果解决，希望能帮到你。
改动涉及到很多部分，我来一个个讲该如何修改。建议每修改完一次就测试是否正常，避免竹篮打水一场空。
友链页文本由于没有遮罩，看起来会很难受，我大多文字都在折叠框中，所以只修改全局折叠框增加模糊效果。
修改 themes/anzhiyu/source/css/_tags/folding.styl 文件
[data-theme="dark"]
details.folding-tag
- background: transparent
+ background: rgba(0, 0, 0, 0.3) // 半透明黑色
+ backdrop-filter: blur(10px) // 高斯模糊
+ -webkit-backdrop-filter: blur(10px)
+ border: 1px solid rgba(255,255,255,0.1) // 模糊边框
+ border-radius: 14px
+ color: rgba(255, 255, 255, 0.8)
[data-theme="dark"]
details[open]
- & > div
- &.content
- padding 16px
- margin -16px
- margin-top 0
- background: transparent;
- color rgba(255, 255, 255, 0.6)
+ details.folding-tag[open]
+ > div.content
+ background: transparent
+ color: rgba(255,255,255,0.8)
可能看到小标题有点懵，我举个例子：点击跳转到本站对应界面
修改 themes/anzhiyu/source/css/_extra/anzhiyu/custom.css 文件
[data-theme="dark"] div#category {
- background: transparent !important;
+ background: rgba(18, 18, 18, 0.6); /* 半透明黑色 */
+ backdrop-filter: blur(10px); /* 高斯模糊，数值可调 */
+ -webkit-backdrop-filter: blur(10px); /* 兼容 Safari */
}
/* md网站下划线 */
#article-container a:hover {
text-decoration: none !important;
本项只是单纯美化，不影响观看体验，如果你懒的话可以不动。
修改 themes/anzhiyu/source/css/_mode/darkmode.styl 文件
background-color: #525252
color: #e2f1ff
// 頭部
#page-header
&.nav-fixed > #nav,
&.not-top-img > #nav
- background: var(--anzhiyu-black);
+ background: rgba(18, 18, 18, 0.6) // 半透明背景
+ -webkit-backdrop-filter: blur(8px) // Safari
+ backdrop-filter: blur(8px)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
+ transition: background .3s, backdrop-filter .3s
.post
#page-header
&.nav-fixed > #nav
- background: var(--anzhiyu-card-bg);
- box-shadow: none
+ background: rgba(18, 18, 18, 0.6) // 半透明背景
+ -webkit-backdrop-filter: blur(8px) // Safari
+ backdrop-filter: blur(8px)
+ box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
+ transition: background .3s, backdrop-filter .3s
#post-comment
.comment-switch
if hexo-config('comments.text')
基本上就这样，有部分代码是 ai 辅助修改的，如果有问题欢迎评论区指出；如果还有可读性低的地方欢迎指出，我会继续更新修改教程的。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。