全新个人网站 Daydreamer 设计开发手记
内容提要
作者使用Astro.js框架开发了个人主页新版本，集成了页面和博客系统。采用Bento式布局和思源宋体字体，解决了Darkmode和阴影设计问题。考虑添加主题切换按钮，使用GitHub Actions自动构建和发布网站。项目命名为Daydreamer，追求创造成就感。
延伸解读
Bento 布局的响应式挑战与组件抽象
文章提到 Bento 布局的非线性特性使其难以采用常规响应式逻辑，作者参考 Bento.me 的做法，为四列和两列屏幕分别指定布局。在 Astro 中，每个 Box 的样式差异大，通过 props 传递会导致代码冗长，因此作者用 BoxWrapper 负责定位，内部放置不同组件。这种方案虽不符合 DRY 原则，但避免了过度耦合，值得类似项目参考。
Darkmode 设计：颜色与阴影的单独考量
作者强调 darkmode 并非简单反色，而是需要单独设计颜色方案。例如，按钮或卡片的前景应比背景更亮，因此白天用浅灰背景、白色前景，夜晚用黑色背景、深灰前景。阴影方面，夜晚不应产生白色阴影，作者调整了夜间阴影颜色以符合现实逻辑。这些细节体现了 darkmode 设计的复杂性。
主题切换按钮的取舍与用户习惯
作者曾实现主题切换按钮，但最终决定不添加。原因包括：实现“跟随系统”需维护复杂状态，且许多用户不理解主题切换含义，误设后可能无法看到另一主题。引用 Apple 人机界面指南指出，避免提供 App 特定外观设置，以减少用户困惑。这反映了以用户为中心的设计思考。
GitHub Actions 自动构建与网络优化
作者使用 GitHub Actions 自动构建并部署到 pages 分支，服务器通过 git pull 更新。由于博客使用又拍云 CDN 对海外线路支持差，构建时访问 API 常失败。解决方案是利用阿里云 DNS 分线路解析，将境外线路直接解析到服务器 IP，避免 CDN 减速。这为自托管部署提供了实用参考。
Q&A
Daydreamer 个人网站是用什么框架开发的？
作者使用 Astro.js 框架开发了个人主页新版本，并集成了页面和博客系统。
为什么选择 Bento 式布局来设计个人网站？
Bento 式布局各种信息平级，非常适合自我介绍，相比大段文字更有意思，也更吸引人阅读。作者参考了 Bento.me 的风格。
网站为什么没有添加主题切换按钮？
作者认为提供主题切换按钮并没有必要：知晓 darkmode 概念的用户会自行在浏览器中设置；不知晓的用户不在乎此功能，按钮反而带来困扰。此外，Apple 人机界面指南也建议避免提供 App 特定的外观设置。
Daydreamer 网站如何实现自动构建和发布？
使用 GitHub Actions 自动构建和发布。具体流程：运行 npm run build 后，将 /dist 目录生成的文件部署到 pages 分支，服务器上的网站目录通过 git 克隆 pages 分支，每次更新后 pull 即可。
网站 darkmode 设计时如何处理阴影？
作者从现实生活经验出发：白天光线充足产生黑色阴影，夜晚没有光线则不产生阴影。因此调整了夜间模式阴影的颜色，使其逻辑自洽。
Daydreamer 项目命名的由来是什么？
项目命名为 Daydreamer，源自 AURORA 的一首歌，也是 Apple WWDC 2020 的开场曲。作者借此表达：我们本可以在白天做着白日梦，可以登上月球，可以大声谈论自己的梦想。
