液态玻璃风格

2025 年 9 月 16 日，随着苹果的液态玻璃（Liquid Glass）设计语言的流行，我们对网站前端进行了全面重构，采用了这种现代化的设计风格。此次更新旨在提升用户体验，优化视觉效果，并确保网站在各种设备上的兼容性。

更新背景¶

本次更新对网站前端页面进行了全面重构，采用了苹果风格的“液态玻璃”设计语言，提升了视觉体验和交互细节，兼容移动端和桌面端，适配 iOS/Android 设备。

主要变化¶

• 全站采用液态玻璃风格，大量使用半透明、模糊、渐变、玻璃质感的 UI 元素。
• 顶部导航、侧边栏、卡片、按钮等组件全部重构，统一视觉风格，支持暗黑模式和浅色模式自动切换。
• 首页 hero 区域采用现代化波浪动画背景，支持亮暗主题切换，提升品牌感。
• 移动端导航、底部栏、浮动按钮等全部适配 iOS/Android 浏览器安全区，解决底部黑色菜单栏遮挡问题。
• 所有主要布局和内容区块采用响应式设计，兼容各类屏幕尺寸。
• 统一 SCSS 变量和主题色，便于后续自定义和扩展。
• 优化了首页、博客、书籍、播客等内容区块的视觉层级和交互体验。
• 代码结构更加模块化，便于维护和二次开发。

技术亮点¶

• 使用 CSS 变量和 SCSS 主题变量统一管理玻璃风格参数（如模糊度、透明度、阴影等）。
• 大量采用 backdrop-filter、rgba、linear-gradient 等现代 CSS 技术。
• 针对 iOS Chrome/Safari 的底部安全区问题，使用 env(safe-area-inset-bottom) 进行适配。
• 首页 hero 区域采用 SVG 波浪动画，支持亮暗主题渐变切换。
• 所有主要组件支持暗黑模式，自动适配系统主题。
• 代码注释详细，便于团队协作和后续迭代。

兼容性与适配¶

• 针对 iOS/Android 设备做了大量兼容性优化，解决了底部黑色菜单栏遮挡、滚动区域异常等问题。
• 桌面端和移动端均有良好体验，支持主流浏览器（Chrome、Safari、Edge、Firefox）。

影响范围¶

• 所有前端页面、主要 SCSS 样式、导航栏、footer、首页 hero、内容卡片、侧边栏等均有调整。
• 旧版自定义样式和部分组件已废弃，请参考新版样式进行开发。

参考文件¶

• assets/scss/templates/_theme-vars.scss：主题变量与玻璃风格参数
• assets/scss/templates/_navigation.scss：导航栏与顶部 header
• assets/scss/templates/_slider.scss：首页 hero 波浪动画
• assets/scss/templates/_list-children.scss：内容卡片与列表
• layouts/index.html、layouts/partials/header.html、layouts/partials/footer.html 等主要模板文件

总结¶

本次前端更新极大提升了网站的现代感和移动端体验，欢迎大家体验新版并反馈问题。后续将持续优化细节和性能。