引入 Tailwind CSS#

之前一直手写 CSS，样式零散又难调。今天终于把 Tailwind CSS 装上了，原子类拼装的感觉太舒服了：

• bg-white rounded-lg shadow p-6 一个卡片就出来了。
• dark:bg-gray-800 dark:text-gray-100 暗色模式自动跟上。

重构布局#

• App.vue：删掉了原来那些写死的 header/footer 样式，全用 Tailwind 重新搭。导航栏改成了深色背景，居中显示链接，移动端还是汉堡菜单。
• Home.vue：彻底告别自定义 CSS，用 Grid 做了三栏布局（个人简介 / 博客总览 / 组件占位）。三栏之间间距均匀，高度不强制相等，顶部对齐，内容多高就多高。

博客列表美化#

BlogList 也换上了卡片风格，和主页统一了。还尝试用 gray-matter 解析 Markdown 的 Frontmatter 自动生成文章列表，不过因为一些小问题暂时搁置，先用手动数据顶着，以后再战。

暗色模式#

直接用 CSS 媒体查询 prefers-color-scheme: dark，让网站自动适应系统主题，不需要一行 JS。用户设备是暗色，网站就变暗；切回亮色，网站也亮回来。优雅得想给自己鼓掌。

接下来#

• 完善文章列表的自动生成（灰度 matter 下回一定搞定）。
• 给主页加上真正的博客动态列表。
• 添加访客统计小组件。

今日KPI完成，满意

2029.8.4注：上为AI生成，指的不是本站点