![[创作] CSDN 自定义模块实战：零 JS、4000 字符，把博客首页改成暗夜流光液态玻璃](http://pic.xiahunao.cn/yaotu/[创作] 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 写起？
会渲染异常，非要从 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-name>div: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 属地：中国"
