我的 Ethereal 主题魔改全记录：从原版到专属
Ethereal 是基于 Fuwari、用 Astro 构建的 Halo 主题，原生设计已经很耐看。但用了一阵之后，总想让它更 "像我自己"——玻璃质感的底栏、对齐 rainzt 风格的文章卡片、可玩性更高的友链与标签……于是有了这一版魔改。
一、外观与视觉魔改
1. 玻璃拟态底栏
原本的底栏是系统原生的三段式布局。我把它彻底重写（Footer.astro +535 行），拆成 FooterGlass.astro 与 FooterOriginal.astro 双模板：
- 玻璃拟态版：顶部两栏（品牌信息 + 社交图标 / 快速导航 + 回到顶部），底部一条发丝分割线 + 居中排布的版权胶囊。
- 桌面与手机独立切换：
footer.style控制桌面，footer.mobile_style让移动端单独选模板，两套样式作用域互不泄漏。 - 可配置内容：社交图标用 iconify 矢量图标，后台最多配 3 个；快速导航最多 8 项，未配图标时回退显示文字。
2. gaicas 风格友链卡片
友链页是博客的 "门面" 之一。我参考 gaicas.com/go 的视觉语言写了 links-gaicas.css（+307 行）：
- 头像底部 1/3 探出卡片，营造悬浮感；
- Hover 时 Logo 移到卡片正中、其余区域变主题色纯色块；
- 静止呼吸光晕 + 悬停流光 + 头像居中呼吸光环，全部用
--primary变量驱动，跟随主题换色。
3. 文章卡片：对齐 rainzt 风格
卡片是列表页的主角。我给文章卡加了分层阴影与分类标签，并在 v1.0.79 恢复了入场动画——滚动时依次淡入上浮，既克制又有呼吸感。
4. 页面宽度与响应式网格
原版容器锁在 75rem，对宽屏太局促。我把它放宽到 112rem，并把网格改为 auto-fill 自适应，单 / 双 / 三栏都能在后台一键切换——桌面铺得开，手机收得拢。
5. 分类栏与标签美化
- 全新
CategoryBar.astro：把分类做成常驻导航条，点选即筛选。 Tags.astro除了常规标签云，还做了一个 3D 标签球tag-sphere，鼠标拖拽可旋转，技术味和趣味兼得。
二、Banner：从原创到上游轮播
早期我自己写了一个单图 Banner + 滚动跑马灯（MomentMarquee）。到了 v1.0.82，权衡之后决定换回上游的轮播方案：在 MainGridLayout.astro 接入 bannerThWith()，支持单图 / 视频 / 轮播 / 移动端分支，同时保留了原来的打字机副标题——既有上游的稳健，又留着我自己的那点小心思。
三、功能与交互魔改
1. 追番页
全新 bangumis.astro（+466 行）：对接 bilibili-bangumi 插件，带分页与 lrc 歌词解析，把 "我在追什么" 做成一个真正能逛的页面，而不是一串静态列表。
2. 安全加固
- 外链统一走重定向中转，避免直接暴露与钓鱼风险；
safe-fetch隔离不可信请求，并配了对应的测试用例。
博客暴露在公网，这类兜底能少踩很多坑。
四、一图流总结
| 维度 | 改了什么 | 版本 |
|---|---|---|
| 外观 | 玻璃底栏 / gaicas 友链 / rainzt 文章卡 / 网格放宽 / 分类栏 / 3D 标签球 | v1.0.79+ |
| Banner | 原创单图 → 上游轮播（保留打字机副标题） | v1.0.82 |
| 功能 | 追番页 / 滚动修复 / 安全加固 | v1.0.82–84 |
结语
魔改不是为了炫技，而是让工具更贴合自己的使用习惯。每一步改动背后都是 "这里用着不顺手，能不能更好一点" 的小执念。
下一步打算把这些改动整理成独立补丁，方便以后跟随上游升级时少冲突、好回滚。如果你也在用 Ethereal，欢迎交流你的魔改思路。