博客首页改版复盘

这次改首页，原因很简单：我自己看烦了。

博客能打开，文章也能发，但首页还是默认主题的味道。大横幅占着第一屏，文章列表一条条往下排，读者进来以后，很难马上判断这个站到底写什么。

我不想只换颜色。颜色只是最后一层皮，真正要改的是顺序：先让人知道这里是什么博客，再露出最新 资讯速递，最后把文章用更容易浏览的方式摆出来。

首页不是文章页

Fluid 的大 banner 放在文章页里还算合理，毕竟文章需要标题区。但首页不一样。

首页最重要的是把内容露出来。读者打开页面时，应该马上看到两件事：这个博客写什么，最近有什么值得看。

所以我把首页 banner 隐掉了，只保留导航。没有粗暴删主题文件，而是给首页加单独的页面类。这样首页可以重新排版，文章页、归档页和分类页不用跟着一起变。

这一步改完，首页终于不再像文章详情页的前置目录。

资讯速递要单独站出来

我以前把 资讯速递和普通文章混在一起。问题是资讯速递更新频率高，很容易把技术笔记挤下去；但如果完全藏在分类页里，又没人会注意到它。

所以首页右侧留了一张最新资讯速递卡片。它不用展示全部内容，只挑几个主题，让读者知道今天 AI 圈大概在聊什么。

这比把十条新闻全塞进首页更舒服。首页不是目录页，别让它太累。

画廊卡片，别做成图片墙

文章区一开始想做真瀑布流，后来在几版之间来回改。

Grid 稳，但容易出现整齐到有点死板的行高。CSS columns 更像参考图里的瀑布流，卡片可以自然往下排。最后我还是回到 columns，只保留必要的间距和固定封面比例。

卡片里我保留了标题、摘要、分类、日期和少量标签。封面只是入口，不是主角。博客文章不是相册，读者点进去之前至少要知道这篇大概讲什么。

封面也做了一次返工。最早有几张图里带英文大字，放进卡片后反而和标题打架。后来我把封面里的文字去掉，只保留主题图形。复盘文章里的示意图也换成了真实首页截图，免得读者看半天还不知道改成了什么样。

这个细节很小，但页面一下清爽很多。

移动端最诚实

桌面版看着差不多以后，我缩到手机宽度看了一眼，马上露馅。

资讯速递里有英文长标题，390px 宽度下直接把卡片撑出了横向滚动。桌面上完全看不出来，手机上一眼就很粗糙。

最后补了换行和宽度约束：

.home-daily-card li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

又给首页容器加了移动端间距，避免文字贴边。

做 UI 不能只看一张桌面截图。长标题、代码路径、链接这些东西，都会在手机上现原形。

这次的取舍

这次没有换主题，也没有引入前端框架。Hexo + Fluid 继续用，Vercel 构建也保持简单。

我最后留下的是一个比较克制的方案：

• 首页默认亮色。
• 顶部导航更轻。
• 首屏左侧介绍博客，右侧放资讯速递。
• 文章区用三列画廊卡片。
• 文章页不跟着首页大改。

它不是最炫的方案，但维护成本低。后面写新文章时，只要补好摘要和 index_img，首页就能自然更新。

写在最后

这次改完，我对“优化 UI”这件事的理解变了一点。

以前总想先调颜色、圆角、阴影。现在更愿意先问：页面要帮读者做什么？

这个博客首页要做的事很少：说明我在写什么，展示最新资讯速递，露出最近文章。顺序想清楚以后，样式反而好办。

漂亮当然重要，但个人博客更怕的是不好维护。今天看着惊艳，明天发文章时到处补配置，那就不划算。