想写一个新的个人主页很久了，甚至基于 Next.js、Nuxt.js 分别做过雏形，但是都半途而废。寒假接触到了早有耳闻的 Astro.js，这个框架简洁优雅的设计吸引了我。于是一发不可收拾，开发了全新版本的主页，并将各种页面和博客系统也集成进了这个主页。在设计和开发的过程中有无数的纠结和思考，特此记录下来。 Bento 式布局 我是看了少数派的《何为 Bento 式布局，怎么生产力工具网站都在用？》这篇文章，想到用 Bento 的风格做一个个人网站的。Bento 式布局各种信息平级，非常适合「自我介绍」。相比一大段文字的自我介绍，用这种布局更有意思，也更吸引人阅读。 很早之前试用了 Bento.me 这个广受好评的工具，虽然功能比较有限，但是其 UI / UX 设计精雕细琢，非常精致。这次可以说我的网站 Bento 部分其实很大程度仿制了 Bento.me 的风格。 由于 Bento 布局不是线性的，所以没法像平常的网页一样采用响应式的逻辑，当页面宽度减小时自动调整。Bento.me 对于这个问题的解决办法是：提供大屏幕（四列）、小屏幕（两列）两套布局，让用户分别配置调整。参考这一方法，我的 Bento 组件也针对四列、两列分别指定了布局。 在使用 Astro 编写这一部分组件的时候，最麻烦的其实是确定一个 Box 的抽象层级。每个 Box 看似都可以写成一个组件、可复用，但是许多 Box 又有不同的背景、背景位置、前景色、hover 行为、对齐方式…… 这些都只能在 Box 的最外围元素上指定，如果通过 props 传递，则过于冗长，代码会十分丑陋。综合考虑，我定义每个 Box 最外层用一个 BoxWrapper 组件，专门负责 positioning，分别指定四列、两列模式的大小、位置；在 BoxWrapper 的 slot 中放置内部的组件，干脆分为多种组件：纯文字...