Project V4

视觉进化

V4 放弃了传统博客的封闭感，转向了全景沉浸式的视觉方案。

• 全屏背景沉景：暗色调背景，奠定了全站高冷、硬核的基调。
• 全站透明化改造：打破了层级边界。主页个人信息模块、评论区均实现 100% 透明悬浮，配合 backdrop-filter: blur() 磨砂玻璃特效，确保了信息的呼吸感。
• 动态卡片策略：
  • 日间模式：采用高对比度的纯白卡片（#FFFFFF）搭配深色文字（#333333），确保沉浸式阅读的清晰度。
  • 暗黑模式：自动切换为深空灰半透明卡片（RGBA 30,30,30,0.9），配合极细微光边框，深夜阅读不刺眼。

字体重塑：600 字重的文学感

我们对全站字体进行了微秒级的调优：

• 思源宋体 (Noto Serif SC)：引入了 400/500/600/700 全字重切片。
• 骨肉匀称的排版：放弃了单薄的 400 常规体，全局锁定 600 Semi-bold。这让文字在深色/全透明背景下不再“发飘”，具备了类似实体书籍的厚重感与文学质感。
• 代码高亮保护：在全局加粗的背景下，通过 CSS 精准豁免了代码块（Code Block）的颜色干扰，保留了 Java/JavaScript 原生的语法高亮色彩。

音乐空间：巨幕控制台与单行歌词

这是 V4 版本中技术挑战最大的部分。

• 分栏式 APlayer 重构：在 /music 独立页面，我们通过暴力解除 APlayer 的原生 DOM 限制，重构了垂直流布局。
• 单行歌词封印：为了解决主页组件的拥挤问题，我们采用了“物理遮罩”方案，将歌词窗口锁定在 30px 的极窄缝隙内，强制实现单行高亮滚动，彻底终结了多行重叠的视觉灾难。
• 沉浸式交互：在全宽控制台下，巨大的专辑封面与渐隐效果的歌词区域，让听歌变成了一种视觉享受。

评论系统：双栖形态适配

为了兼顾“美观”与“实用”，Twikoo 评论区在 V4 中拥有了两种截然不同的形态：

• 主页形态：全透明悬浮，文字带 0.8s 柔和阴影，完美融入背景。
• 文章形态：回归标准的白底黑字卡片（内嵌于文章底部），确保在长篇阅读后，交流互动的过程是清晰且专注的。

后台优化：CI/CD 与环境治理

• Vercel 构建修复：通过设置 HUGO_VERSION 环境变量至 0.130.0，解决了新版 PaperMod 主题在旧版 Hugo 编译器下 Locale 字段无法识别的致命报错。
• 自动化部署：基于 GitHub Desktop 的全自动 Push-to-Deploy 流程，让每一次 CSS 的微调都能在秒级同步至全球 CDN。

再会