博客布局修补记

博客系统

博客刚搭起来、文章数量还很少时，一些平时不明显的问题反而更容易暴露出来。这次主要处理了站点配置、空内容布局、页面宽度和背景样式，让博客在内容较少时也能保持稳定。

让首页真正读取站点配置

首页原先写死了旧网站的标题和副标题。即使修改了 src/config/site.yaml，浏览器标签和首页的隐藏标题仍可能显示旧内容。

修复后，首页统一读取：

name: 简AI
description: 知行有简，岁月有AI。

其中 name 作为站名，description 作为副标题。首页浏览器标签组合显示为：

简AI - 知行有简，岁月有AI。

文章等内页继续使用原有的 titleTemplate，避免改变已经确定的标题规则。

空内容也要维持布局

当前博客文章较少，没有标签、双链和推荐文章时，相关组件原本会整段隐藏。这会让文章正文占据侧栏所在的网格列，看起来像是整体跑到了左侧。

这次将文章详情页的三个侧栏区块改为常驻：

  • 目录
  • 双链
  • 推荐阅读

没有内容时直接显示“无”。首页的标签区块也采用相同规则。这样不论有多少文章，页面网格都保持一致，后续增加内容时也不需要重新适配布局。

文章较少时，页面内容不足以撑满浏览器高度，footer 会停在页面中间，最大化窗口后留下大片空白。

解决方法是把页面外层改为纵向 flex 布局：

.site-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


.main {
  flex: 1 0 auto;
}

这不是固定定位的 footer。短页面中它会自然沉到视口底部，长文章中仍跟随正文向下滚动，不会遮挡内容。

同时统一了三层宽度：顶部导航、主体和 footer 的外框均为 1080px；正文、顶部横线和 footer 横线扣除左右内边距后均为 1032px。移动端则统一使用 18px 左右边距。

用 CSS 补充两侧底纹

宽屏浏览器中，主体两侧会留下较多空白。为了增加一点简洁的技术感，又不引入图片资源，最终使用 CSS 渐变组合出点阵和网格：

background-image:
  radial-gradient(circle at 0 0, rgba(34, 124, 112, 0.14) 2px, transparent 2px),
  linear-gradient(rgba(34, 124, 112, 0.045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(214, 140, 69, 0.04) 1px, transparent 1px);
background-position: 5px 5px, 5px 5px, 5px 5px;
background-size: 10px 10px, 20px 20px, 20px 20px;

点的半径为 2px，点阵间距为 10px，网格间距为 20px。点和网格使用相同起点，因此每个网格交点都能与点对齐。

底纹只用于宽屏两侧。视口宽度不超过 1080px 时恢复纯色背景，避免移动端和 footer 区域显得杂乱。顶部导航的背景也只覆盖中间内容区，让两侧纹理保持连续。

消除页面切换时的横向偏移

从首页切换到“关于”页时，整体布局曾出现轻微左移。检查后发现，“关于”页内容较长，会出现纵向滚动条；首页较短，没有滚动条。两者的可用页面宽度相差 15px，居中容器因此移动了约 7.5px。

在根元素上固定预留滚动条槽位即可消除变化：

html {
  scrollbar-gutter: stable;
}

处理后，无论当前页面是否需要滚动条，导航、主体和 footer 都使用相同的居中基准。

小结

这次没有增加复杂功能，主要是在内容较少和宽屏显示这两个边界场景下补齐细节。配置只保留一个数据来源，空状态不再破坏网格，页面宽度和滚动条行为也统一下来。对个人博客来说，这类基础稳定性比堆叠更多视觉组件更重要。