[创作] CSDN 自定义模块实战：零 JS、4000 字符，把博客首页改成暗夜流光液态玻璃

💡刷博客的时候大概都见过这种首页：侧边栏一张会流动的渐变卡片，底下整站是磨砂玻璃质感，连顶部导航条都在慢慢变色。第一反应通常是——这得写多少前端代码？但点开 CSDN 的「自定义模块」入口你会发现一个很反常识的设定：这里不允许写一行 JavaScript，粘贴进去的整段 HTML 还有一道 4000 字符的硬上限。也就是说上面那些效果，全是在"只能写 HTML + CSS，还得省着用"的笼子里做出来的。更麻烦的是这个平台自带一层洗版器：它到底吃掉了什么、放过了什么，官方文档一个字都没写，只能一次次提交、刷新、看结果地试出来。比如同样一句animation，写在class里能活，写在某个span的 style 属性上，会连带把整个style块一起干掉。这篇文章就把这两天的完整过程摊开：边界在哪、模块本体怎么拆、一个被严重低估的全站生效机制、十个真实踩坑（现象 → 根因 → 解法）、图床与动图的水印规律，以及还剩哪些没做的想法。1. 先摸清边界：自定义模块到底给了你什么入口在 创作中心 → 设置 → 自定义模块，一个账号只有一个槽位。这个槽位本质上是一个富文本框，你把整段 HTML 粘进去保存，平台清洗一遍，再渲染到博客首页左侧栏。四条硬约束：约束实测值影响JavaScript完全禁止所有动效只能靠 CSS 动画 / 雪碧图 / GIF字符上限4000（当前用掉 3984）跑马灯文案、类名、注释全在抢预算槽位数量1轮播、按钮、二维码、全站 CSS 只能塞在同一份代码里渲染宽度卡片约304px，内容条约276px桌面端窄栏，任何横向布局都要按这个尺寸量1.1 洗版器行为：什么能活，什么会被吃掉这部分没有文档，全是实测。表里每一条都对应一次"本地看着挺好，贴上去坏了"：写法结果说明div+style.x{animation:...}/style✅ 存活类驱动的动画走style是安全路径span上挂动画❌ 被洗同样规则换到span上就不生效元素 style 属性里写内联animation:...❌连坐会把整个style块一起剥掉，页面瞬间全裸backdrop-filter:blur(20px)✅ 存活液态玻璃的关键，比预想的宽松4 字节 emoji（🎨 这类）⚠️ 被删字符留下空格，排版会莫名错位只贴 HTML 片段（不带 DOCTYPE）⚠️ 保存成功但渲染异常必须贴完整的!DOCTYPE html文档最后一条值得单独说一句，因为它最容易骗过人：Q1：为什么贴一段裸会渲染异常，非要从 DOCTYPE 写起？因为平台是按"一整篇文档"来解析和清洗的。你只给片段时，它会补一个残缺的外壳，结果就是style的作用位置、body的 margin 重置都可能不对。所以正确姿势是：永远提交完整文档，哪怕 4000 字符预算被 DOCTYPE 和 head 吃掉几十个字。你提交的 HTML -- 平台洗版器（删 JS / 删内联 animation / 删 4 字节字符） -- 存库 -- 首页侧栏渲染（注意：这一步没有 iframe）"没有 iframe"这点，直接引出下一章。2. 被低估的机制：模块里的style是全站生效的这是整个玩法里最值钱的一条信息，也是"别人的模块为什么能改整站"的答案。直觉上会以为自定义模块被沙箱隔离了——毕竟它是个能塞 HTML 的公开位置。但实测首页 DOM 里iframe 数量为 0，模块的style直接进了主文档。也就是说：只要你能猜到官方页面某个区块的类名，用!important就能把它改成任何样子。于是"装修"就从"做一张卡片"升级成了"给整个博客换皮"。目前用掉的改写：目标区块选择器改成了什么访问量/原创/排名/粉丝 数字.user-profile-statistics-num斜体 700 号 + 三色渐变裁字数字下面的标签.user-profile-statistics-name淡蓝灰#9fb3d9用户名.user-profile-head-namediv:first-child同款渐变字（码龄12年等徽章是兄弟节点，不受影响）IP 属地.user-profile-head-address .address见下方 Q2顶部导航条#csdn-toolbar流动渐变，见第 4 章坑 1头部面板 / 左栏卡片 / 文章行 / 标签栏 / 筛选行.user-profile-head-info等 5 个类半透明白 +backdrop-filter磨砂 + 18px 圆角渐变字的写法很通用，单独拎出来：.user-profile-statistics-num{font:italic 700 23px Arial!important;background:linear-gradient(90deg,#40c4ff,#e040fb,#ff8a65);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}Q2：IP 属地能关掉吗？官方层面不能——这是平台强制展示的。但既然 CSS 能全站生效，就可以做"视觉改写"：把原文字号压成 0，再用伪元素补一行自己的文案。.user-profile-head-address .address{font-size:0}.user-profile-head-address .address::after{content:"IP 属地：中国"