一个站点，七张脸：本站的站点形态与搭配玩法

一、先看效果：七种形态#

七个形态气质完全是七个方向：华彩艳、素简素、谐彩和、顽彩野，璨夜是夜空，纸舟是纸，明信干脆是一整页放映的影像。

细节上各有各的执念。素简把调色板都精简了，只留下形态、字体和文章布局——壁纸和特效在这个形态下本来就不生效，留着纯属占地方；谐彩把边框全撤了，页面靠一整套色阶梯分层，主色跟着色相滑杆整套重新推导；顽彩反着来，描边按 4 / 3 / 2 / 1.5px 分级、圆角统一 4px、阴影是实打实的硬 offset，连 Logo 都是一块斜切的浅黄砖。璨夜把悬浮播放器、弹幕和每日选刊都收成自己的独占件，别的形态一概没有；纸舟一个槽里装了两套独立主题——纸面走轻笑Chuckle那种纸与墨的素净排版，眼睛只管落在字上；手册参考年华の博客的「终末地」，是工业手册的味道，栏格分明、索引感强，像一本摊开的操作手册。两套各写各的样式，谁也不借谁的光；明信最离经叛道，首页直接砍掉双侧栏，顶栏缩成三段悬浮胶囊，内容是一幕一幕横着走的明信片。

二、能搭的维度#

形态只是脸。真正让组合爆炸的是下面这些维度，它们大多互相独立：

七种形态 × 三种壁纸 × 四款导航 × 明暗 × 字体特效，保守算也是上万种组合（本人数学很好）。当然大部分组合没人会用，下面这十套是我自己留过的。

三、推荐搭配#

1. 个人默认（华彩 · 横幅轮播） 华彩 + 横幅壁纸开轮播 + 色相 174 青绿 + 樱花开。就是你现在打开本站看到的样子，热闹、信息量大，适合首页刷存在感。

2. 深夜读长文（素简 · 暗色） 素简 + 暗色 + 朱雀仿宋 + 特效全关（或加萤火虫）。导航缩到最简，正文是仿宋，半夜看长文眼睛不累。素简的暗色是我专门调的：夜晚模式下每个功能都必须看得见，这是底线。

3. 安卓原生味（谐彩 · 覆盖透明） 谐彩 + 色彩风格选 Vibrant + 色相拉到 200 左右 + 背景纹理选圆点 + 壁纸覆盖透明。毛玻璃顶栏加上色阶梯卡片，整个站像一个 Material You 应用，设置页尤其像。

4. 童年杂货铺（顽彩 · 亮色） 顽彩 + 亮色 + 中文圆体。顽彩的壁纸不走图库，是一张草地小狗插画铺满，配上硬阴影和斜切砖块 Logo，像小时候文具店的包装纸。这个形态只在亮色下最对味，暗色是深蓝夜空版，另一种气质。

5. 玻璃感拉满（华彩 · 覆盖透明） 华彩 + 覆盖透明 + 模糊 10 + 透明度拉低。卡片全是毛玻璃，壁纸在底下流动。代价是费性能，老设备慎用——所以覆盖透明的轮播默认是关的（之前不小心打开轮播，现关闭了），想体验的要自己开。

6. 一张白纸（素简 · 亮色） 素简 + 亮色 + 系统默认字体 + 壁纸关。什么都没有，就剩字。写东西、贴代码的时候我最常用这套自检排版：任何花哨都藏不住，格式有问题一眼看见。

7. 夜空玻璃（璨夜 · 经典模式） 先说观感：璨夜整个站像一块落了星的玻璃，卡片是半透的，星空在底下慢慢动，文字浮在玻璃面上。它有个瓷砖拼贴的首页，我私下更推经典模式——收起拼贴、回到整齐的文章流，玻璃和星空都还在，读起来更稳。悬浮播放器、弹幕、每日选刊这三样是璨夜独占，深夜挂着歌刷文章，这套最对味。

8. 纸上读（纸舟 · 纸面） 纸舟切纸面 + 亮色。没有壁纸、没有特效，纸色打底、墨色排字，像把文章印在纸上递到手边。专注阅读这一榜，素简之外它完全有资格上——一个靠减法，一个靠纸感。

9. 翻手册（纸舟 · 手册） 纸舟切手册，明暗皆可。栏格和索引的味道最浓，长文按着章节一路翻下去最顺手，技术文、教程文尤其搭。同样是专注阅读，它和纸面的区别是：纸面像散文纸，手册像工具书。

10. 一封整页的信（明信 · 终幕 Hero） 明信 + 终幕选 Hero。打开就是整页放映：马赛克拼图开场，五张明信片一幕一幕横着走，最后停在终幕的大图上。老实说这是七个形态里唯一不为读文章优化的——它是写给第一次上门的人的，像寄出去的一封信，先把整个过场看完；熟客进来读文，终幕切经典更利落。

搭配的入口都在右上角调色板里，改完即时生效、自动记住，不用刷新试错。

四、实现细节#

机制不复杂：一套 DOM，属性开关。

页面根元素上挂一个形态属性，七套样式各自收在一个文件里、用属性选择器圈起来，互不干扰。切换时只改属性和几个 CSS 变量，不重渲染、不闪烁。首帧由一段内联脚本在页面画出来之前就把属性定好，所以不会先闪一下默认形态再跳过去。

跟导航栏四款样式走的是同一套底层——那是更早做的功能，形态系统算是它的放大版。访客的选择存浏览器本地，我在控制台设的是默认值：没动过的访客用默认，动过的以自己的为准。这条优先级后面还踩了个坑，第五节会说。

控制台那边同步做了两件事：主题页能设全站默认形态；顽彩那张专属壁纸进了图片页，能换图、能恢复默认，不用改代码。

五、踩到的坑#

一：暗色下大批文字发黑。 现象：切到暗色，卡片里的文字还是黑的，黑底黑字全灭，陆续被我自己在真机上抓出一百多处。 原因：很多卡片只有背景色、没有前景色，文字靠继承，而暗色下继承到的默认色还是黑。 修法：给卡片组件钉死暗色前景色，再让AI写了个扫描脚本，每次构建后把全站页面 × 手机桌面 × 全部形态扫一遍对比度，有问题先修再发。 教训：跨明暗的组件别靠继承吃饭，颜色要自带。

二：全屏切覆盖透明，图不换。 现象：从全屏模式切到覆盖透明，还是全屏那张图压着；反过来切却正常。 原因：三组壁纸各自记着「当前张」，切模式只给新组打标记、旧组没清；标记层级一样，谁在页面结构里排最后谁赢，全屏组正好排最后。 修法：切模式（包括屏幕宽窄跨断点）时，先把当前组之外的标记全清掉再点亮新组。 教训：状态切换先清场，再点灯。

三：调色板的轮播开关管不住站点。 现象：访客在调色板里关了轮播，刷新后还在轮播。 原因：判定顺序反了——脚本先看控制台的分模式默认，访客的显式设置被压在后面，等于白关。 修法：顺序反过来，访客明确动过以访客为准，没动过才用控制台默认；顺手把覆盖透明模式下缺席的壁纸设置区也补上了。 教训：默认值的职责是兜底，不是抢方向盘。

四：顽彩壁纸的地址传不进样式。 现象：壁纸地址写在页面元素的样式属性里，看着没毛病，实际渲染出来是坏的，控制台换图永远不生效、只有默认图能显示。 原因：构建工具不会插值属性里的模板写法，源码长得对、产物是错的。 修法：整个属性改成正经的表达式写法，顺带把同属性里几个一直靠 CSS 兜底值撑着的变量也扶正了，数值和运行时设的完全一致、观感没变。 教训：验证要看构建产物，别信源码的长相。

六、最后#

回头看，七种形态真正花时间的不是皮肤本身：

• 机制只有一套——属性开关加变量，形态再多也不互相污染；
• 优先级只有一条——访客的显式选择永远压过站点默认；
• 守门的只有一件事——每次构建后全站扫暗色对比度，干净了才发；
• 剩下全是坑，而且都是「本地看着没问题、换个形态或换台设备就崩」的那种。

所以如果你也想给自己的站加形态，我的建议是先把切换机制和守门扫描做出来，皮肤反而是最不急的——反正第一版皮肤，几个月后你照样会腻，然后你就会像我一样，做第二、第三、第四种，一直做到第七种。

参考：素简形态参考了朝朝听雨（rainzt.cn）的 Pure 形态，谐彩参考了 Shirone 主题，顽彩参考了 UpXuu 的 xuhome，璨夜参考了 XingHuiSama 的星空玻璃，纸舟的纸面参考了轻笑Chuckle（qcqx.cn）的纸底墨线，手册参考了年华の博客的「终末地」工业手册风，明信参考了 MmzMing 的 mmz 皮肤，华彩的边框风格来自我亲自调的。都只是视觉与机制上的参考实现，基于Firefly构建，各家源码未直接搬运。