博客首页排版重构：从Vercel风格到更有层次的视觉设计

动机

之前博客首页采用的是 Vercel 的极简设计风格：大量依赖阴影边框、紧凑字间距、克制留白。但这对于一个内容型博客来说，显得有些「太淡了」——读者进来一眼扫过去，不知道什么重要、什么次要，所有模块视觉权重几乎一样。

这次重构的目标很明确：

建立视觉层次 — Hero 区要有氛围感，文章列表要清晰可扫
丰富而不杂乱 — 在保留极简干净的前提下，增加一些装饰元素
移动端友好 — 所有改动必须响应式适配

改动内容

1. Hero 区域

之前：浅色背景 + 居中标题 + 两行统计数字。

现在：

添加了两个渐变光晕 blob（蓝/紫），带缓慢浮动动画
添加了 .hero-dots 浅色圆点纹理背景
顶部增加「✍️ 博客已运行」胶囊徽章
统计数据改用带分割线的居中卡片式展示
副标题从纯文字变成了变量 · 变量 — 描述的三段式

.home-hero-wrap {
  position: relative;
  padding: 4rem 2rem 3rem;
  overflow: hidden;
}

2. 精选推荐卡片

之前：没有精选推荐区域。

现在：取前 3 篇有标签的文章，用 3 张深色调渐变卡片展示。每张卡片有独立配色方案：

卡片 0：深蓝色 (#1a1a2e → #16213e → #0f3460)
卡片 1：紫色 (#2d1b69 → #6b21a8 → #4c1d95)
卡片 2：绿色 (#064e3b → #047857 → #065f46)

每个卡片带 emoji 图标、标题、日期、阅读时间、标签。hover 时浮起 + 阴影加深。

3. 文章列表

之前：文章卡片是独立的圆角矩形，每篇各自带阴影边框。

┌──────────────────────┐
│ 日期 标签   标题      │
│       摘要两行        │
└──────────────────────┘

现在：合并为一个统一的圆角容器，文章按序号排列，前三条的序号用蓝色高亮。

┌──────────────────────────┐
│ 01  标题           →    │
│     日期 · 阅读 · 标签   │
│ ───────────────────     │
│ 02  标题           →    │
│     日期 · 阅读 · 标签   │
│ ...                     │
└──────────────────────────┘

hover 时右侧出现蓝色箭头并滑入，每行有淡入动画。

4. 标签云

之前：灰色边框的圆角标签。

现在：胶囊样式标签，字号按文章数量动态缩放（.style="--tag-size: calc(...)"），hover 会微微上浮并变蓝。

5. 好物推荐 & 关于区域

好物推荐从之前的打散布局改为统一网格，关于区域变成带头像光晕动画、两个操作按钮的卡片。

6. 访客信息栏

从之前的大卡片（居中带关闭按钮）改为轻量级的左下角浮动条，更不打扰用户。

CSS 优化

所有旧样式（.hero-stats、.category-grid、.featured-grid、.tag-cloud 等）已被替换为新的命名体系（home-hero-*、post-list-v2、featured-card-*、tag-pill-v2 等），避免了样式冲突。新增了约 400 行 CSS。

隐藏修复

顺便发现了一个问题：Nginx 配置中静态资源路径指向 /var/www/blog/public，但项目实际在 /root/blog/public。之前的 CSS 能加载是因为走了 @backend 回退代理到 Node，性能较差。现已改为复制静态文件到 /var/www/blog-pub，Nginx 直接 serve。

效果

访问 19920801.xyz 可直接查看。整体视觉从「很干净但有点寡淡」变成了「干净但有层次感」，每个板块有了明确的视觉角色。

EOF

动机