博客部署上线之后，我打开首页看了一眼，第一感觉是：能用，但还不够舒服。

这篇文章记录第一轮优化过程。目标不是一次性做成复杂系统，而是先解决最明显的观感和阅读问题，让博客更适合长期写作。

优化前的问题

首页最明显的问题有几个。

第一，首屏标题太大。中文大标题视觉冲击很强，但作为个人博客首页，它有点像海报，占据了过多空间。用户需要往下滚动很多，才能看到真正的文章内容。

第二，文章卡片高度不够。首页的最新文章区域里，文章标题比较长时会显得拥挤，甚至有被截断的感觉。这会影响文章列表的可读性。

第三，中文字体和字重略硬。之前字体栈更偏英文界面，对中文段落来说不够柔和。博客最终还是以阅读为主，中文正文要更自然一些。

第四，文章页排版还比较基础。标题、段落、代码块、链接和返回入口都可以再整理一下，让读文章时不那么像默认样式。

首页首屏调整

首页保留了原来的定位：

把零散想法，写成可以回头看的东西。

但把 hero 区域整体压低了一些。

原来的首屏更高，大标题也更大。现在调整为：

  • 减少 hero 上下留白
  • 降低大标题最大字号
  • 保留按钮，但让最新文章更早出现在屏幕中

这样首页还保留了个人站的识别度，但不会把文章内容压得太靠下。

文章卡片优化

文章卡片从三列改成两列。

对于现在的文章数量来说，两列更合适：

  • 每张卡片有更宽的标题空间
  • 中文标题不容易挤成很多行
  • 摘要有足够空间展示
  • 页面看起来更安静

同时给卡片增加了更稳定的高度、内边距和 hover 状态：

.post-card {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  padding: 26px;
}

这个调整解决了标题拥挤的问题，也让文章列表更像一个可以长期扩展的归档区。

中文字体栈调整

这次把字体栈改成更适合中文阅读的顺序：

font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;

这样在不同系统上都会优先使用本地可用字体。Windows 上会更贴近微软雅黑，macOS 上则会更贴近苹方。

这不是很显眼的改动，但阅读时间长了会有差别。

文章页阅读体验

文章页增加了一个返回入口：

返回文章列表

这样读完文章后不需要依赖浏览器后退。

同时优化了正文里的常见元素：

  • 二级标题和三级标题的间距
  • 段落、列表的间距
  • 链接的下划线偏移
  • 行内代码样式
  • 代码块背景、边框和横向滚动

这些改动不会改变内容本身，但会让长文更容易读。

移动端适配

移动端主要做了三件事：

  • 导航改成上下排列，避免挤压
  • 首页标题继续缩小
  • 文章卡片改成单列，并去掉固定最小高度

博客不应该只在桌面端好看。很多文章可能会在手机上临时打开，所以移动端至少要保证不拥挤、不溢出、可连续阅读。

这轮优化的结果

这次优化集中在四个方向：

首页视觉
文章卡片
中文阅读
文章页排版

它没有引入复杂功能，也没有改变博客结构。只是把第一眼看到的不舒服先处理掉。

后面还可以继续做：

  • RSS
  • sitemap
  • favicon
  • 标签页
  • 文章搜索
  • Open Graph 分享图
  • 深色模式

但现在最重要的是先让博客成为一个愿意打开、愿意阅读、愿意继续写下去的地方。