最近在优化我的技术博客时，遇到了一个小痛点。网站的首页（shuijingwanwq.com）采用了经典且信息丰富的左图右文+右侧边栏结构（见图1）。但分类页面（例如 .../category/programming-language/）却仍然保留了单栏的纯标题列表，右侧不仅缺少边栏，左侧列表也没有摘要，显得非常单薄，两边的视觉效果很不统一。
为了统一风格，我决定将分类页的模板修改为和首页一样的两栏布局，右侧引入边栏，左侧通过添加摘要拉高高度。以下是具体的改造过程，重点解析了FSE编辑器中的区块结构。
一、复制首页边栏结构
第一步非常快捷。在首页使用“编辑站点”功能进入编辑器，点击右侧边栏的任意区块。由于我的右侧边栏是由多个区块堆叠而成的，所以我直接选中包含了搜索、分类下拉、个人简介、标签云等功能的 “堆叠（Stack）” 区块。选中后，按下 Ctrl + C 进行复制。
二、改造分类页为两栏布局并粘贴侧边栏
第二步，退出首页编辑，进入“所有归档”模板（这是分类、标签等存档页面的通用模板）。
在编辑器中，我先将原来单栏的布局，改成左右两栏的结构。接着在右侧空置的“栏目”中，按下 Ctrl + V 将刚才复制的侧边栏粘贴进来。
图4中的基础编辑器区块结构如下：
- 左侧主栏（内容区）：
组(Group)归档标题(Archive Title)项目描述(Term Description)间隔(Spacer)Text blog query loop(查询循环区块)
- 右侧边栏：
栏目(Column)堆叠(Stack) —— [注：这是从首页直接复制过来的整个侧边栏区块，包含个人简介、标签云等]
三、优化左侧列表高度与右侧多余区块
通过图4的改造，分类页有了边栏，但是因为是纯标题列表，左侧高度太短，和右侧长长的边栏高度极度不匹配。
因此，我展开了左侧 Text blog query loop 中的 文章模板 (Post Template)，在里面添加了“摘要（Excerpt）”区块，让每篇文章的内容预览拉伸左侧高度。同时，回退到右侧边栏，删掉了占用大量高度且不需要的“Most Viewed Posts（热门文章）”区块。
此时，左右两侧的区块分层结构最终确定如下：
- 左侧主栏（细化为图5结构）：
组(Group)归档标题项目描述间隔Text blog query loop组文章模板 (Post Template)堆叠(Stack)行(Row)：包含标题 (Title)、文章日期 (Post Date)行(Row)：包含摘要 (Post Excerpt)—— [此次新增]
- 右侧边栏：
栏目(Column)堆叠(Stack) —— [移除了 Most Viewed Posts 区块，高度缩减]
四、初步效果与换行痛点
经过上述改造，博客分类页的展示条数依然保持在 10 条。
- 中文环境测试（图6）： 左侧列表高度与右侧边栏高度基本对齐。
- 英文环境测试（图7）： 由于英文单词偏长，左侧明显高于右侧（此问题暂时妥协接受）。
- 新的痛点出现（图8）： 我发现在“行 (Row)”嵌套“组 (Group)”的结构下，若某个文章标题较长，右侧的
文章日期会被挤压成两行显示，这在中文、英文环境下都会出现，视觉效果很差。
五、终极优化：直接使用“栏目”完美解决日期换行
为了解决“行+组”结构带来的日期换行问题，我最终舍弃了原本的嵌套结构，在 文章模板 内部，直接换上了 “栏目 (Columns)” 块。最外层的 堆叠 也一并去除了，结构变得更加扁平且稳定。
图9中最终的编辑器区块结构文本如下：
- 左侧主栏（内容区）：
组(Group)归档标题项目描述间隔Text blog query loop组文章模板 (Post Template)栏目 (Columns)—— [最终采用的方案，彻底取代了之前“堆叠+行”的嵌套结构]左列 (Column)：包含文章标题 (Post Title)，宽度设为 85%，区块布局对齐设置为 “左对齐”。右列 (Column)：包含文章日期 (Post Date)，宽度设为 15%，区块布局对齐设置为 “右对齐”。
摘要 (Post Excerpt)—— [放在栏目下方]
将外层复杂的“堆叠”去掉，直接在文章模板下使用底层的“栏目”块，并分别赋予 85% 和 15% 的固定宽度比例，这个问题迎刃而解。无论标题有多长，百分比空间都会自动挤压标题，不会再去挤压右侧固定比例的日期，同时完美的左右对齐也让排版更加规范。
图10 就是最终的前端展示效果。无论是在中文还是英文环境下，左侧标题无论多长，右侧的发布日期都能安然无恙地保持在一行，且整体左右高度对齐得十分完美。
总结：
在WordPress块主题（FSE）中，通过 Ctrl+C 和 Ctrl+V 直接跨模板复制侧边栏非常高效。分类页的列表区块如果遇到排版挤压问题，从“行（Row）”结构升级为“栏目（Columns）”，配合精准的百分比宽度分配，往往是终极的解法。它不仅解决了不同语言下的对齐与换行问题，也让多语言站点的排版变得更加稳固且维护简单。
发表回复