全新个人网站 Daydreamer 设计开发手记
内容提要
作者开发了一个新的个人主页，使用Astro.js框架，采用Bento式布局，强调信息平级和吸引力。设计注重字体选择和暗黑模式支持，确保视觉效果协调，并集成了GitHub Actions实现自动构建和发布，提升开发效率。
延伸解读
Bento 布局的响应式挑战与组件抽象
Bento 布局的非线性特点使其难以采用常规响应式方案。作者参考 Bento.me，为四列和两列屏幕分别设计布局，并通过 BoxWrapper 组件统一管理定位，内部再按类型拆分组件。这种设计虽导致部分代码重复，但避免了 props 传递的冗长，在可维护性与简洁性之间取得了平衡。
暗黑模式：独立配色而非简单反色
暗黑模式并非简单反色，而是需要独立设计配色方案。作者指出，无论昼夜，前景都应比背景更亮，因此白天用浅灰背景配白色前景，夜晚用黑色背景配深灰前景。此外，纯黑背景在暗光下易导致眼疲劳，故选用 neutral-900 等接近黑的深色。阴影也需调整：夜晚元素仿佛自发光，阴影颜色应相应改变。
为何不提供主题切换按钮
作者最终决定不添加主题切换按钮。一方面，实现“跟随系统”需监听系统主题变化，逻辑复杂；另一方面，许多用户不理解主题切换，误操作后可能无法恢复。Apple 人机界面指南也建议避免应用特定外观设置，以免增加用户负担。因此，跟随系统主题是更简洁且用户友好的选择。
GitHub Actions 自动构建与网络优化
作者使用 GitHub Actions 自动构建并部署到 pages 分支，服务器通过 git pull 更新，避免了手动上传的繁琐。但构建时需访问博客 API，而博客使用又拍云 CDN 对海外线路支持差，常导致失败。解决方案是利用阿里云 DNS 分线路解析：境外线路直连服务器 IP，国内线路走 CDN，从而确保构建稳定。
Q&A
Daydreamer网站使用了什么框架进行开发？
Daydreamer网站使用了Astro.js框架进行开发。
Bento式布局有什么特点？
Bento式布局强调信息平级，适合自我介绍，解决了响应式布局的问题。
网站如何支持暗黑模式？
网站支持暗黑模式，通过单独设计颜色方案，确保白天和夜晚的视觉效果一致。
作者为什么决定不添加主题切换按钮？
作者认为用户更倾向于使用系统设置的主题，添加按钮可能会给用户带来困扰。
如何实现网站的自动构建和发布？
网站集成了GitHub Actions，实现自动构建和发布，避免手动部署的繁琐。
作者在字体选择上遇到了什么问题？
作者希望使用楷体，但由于浏览器兼容性问题，未能实现。
