WordPress Twenty Twenty-Five 两栏首页改造：Text Blog 小图列表模板完整实操记录

本站刚切换至 Twenty Twenty-Five 主题，正在逐步完善站点页面，整体采用 Text Blog 经典两栏布局：66% 文章主栏搭配 33% 侧边标签栏。
原版纯文字标题列表存在明显短板，页面留白空旷、视觉观感单调；同时站内大量历史文章没有上传特色封面图，如果选用大图左置模板，无图条目会出现大面积空白，割裂页面视觉。
对比主题自带的两套 Query Loop 预设样板后，最终选定「小图片和标题」模板重构文章列表，既贴合文字向技术博客的极简调性，又能兼容缺少封面的旧文章，全程使用原生区块自定义层级，双语站点可无损适配，下面完整记录整套改造流程。

一、改造前现状

切换主题初期默认的纯文字列表有三处核心痛点：

1. 66% 宽幅主栏仅展示文章标题，缺少分类、发布时间、摘要等辅助信息，大面积留白让页面显得单薄空洞；
2. 页面无清晰视觉分层，所有文章条目样式完全一致，浏览缺少节奏落点；
3. 列表仅纯文字堆砌，缺少图片元素做视觉缓冲，阅读大量技术复盘干货时枯燥感较强。

整体页面66/33两栏框架保留不变，仅针对中间 Text blog query loop 文章循环区块做内部结构改造。

二、第一步：调用官方预设样板「小图片和标题」（图2）

Twenty Twenty-Five 的 FSE 全站编辑器内置多款现成 Query Loop 设计模板，无需从零手动搭建文章模板：

1. 后台进入「外观 → 编辑器」，打开【博客主页】模板；
2. 在左侧列表视图选中蓝色高亮的 Text blog query loop 查询循环块；
3. 点击顶部工具栏改变设计，在弹出的样板预览库中选择「小图片和标题」；
4. 一键应用样板后，系统自动生成配套文章模板，原生自带左侧窄幅小缩略图，完美适配大量无封面历史文章。

选型取舍说明

另一可选方案为「图片在左」大图文模板，最终放弃理由：
站内数百篇旧文章未配置特色封面，大图模板在无图时左侧会留出大片空白，视觉割裂严重；小图片模板的缩略图占位区域狭窄，即便没有封面也只会留下纤细留白，违和感极低，也不用额外配置条件样式隐藏图片，后期维护成本更低，契合本站文字优先的技术博客定位。

三、样板初始预览效果（图3）

应用模板后前台初始展示效果：

• 自动生成左侧小尺寸特色缩略图，右侧仅保留文章标题；
• 缺少分类、发布时间、摘要等辅助信息，宽栏单调问题没有得到改善；
• 文章条目无分割线、区块间距紧凑，上下文章区分模糊；
• 页面结构平铺单一，没有丰富的信息层次支撑视觉饱满度。

初始样板仅完成基础图文结构，需要手动调整、扩充内部区块层级，丰富页面信息维度。

四、自定义文章模板层级结构

进入样板编辑界面，在【文章模板】内部重新调整区块顺序，最终完整层级如下：

文章模板（最外层父容器）
├─ 栏目（两栏50/50均分，顶部信息栏）
│  ├─ 左栏：分类目录区块（开启彩色圆角标签样式）
│  └─ 右栏：文章日期区块（浅灰色小字，靠右对齐）
├─ 文章标题（H3层级，可自定义字号，自主调整与摘要的间距）
└─ 文章摘要（次要灰色文字，可自行控制展示行数）

分层设计思路

1. 顶部50/50分栏：将分类、日期前置展示，访客打开页面就能快速获取文章类目与发布时间，信息前置提升可读性；左右均分的布局视觉平衡，不会出现轻重失衡的问题；
2. 标题独立分层：作为核心阅读主体，可根据自身审美自由调节标题与上下区块的间距，和顶部元信息、底部摘要做视觉区分；
3. 摘要补充填充：填补66%宽栏空白，增加页面文字厚度，缓解单调感，同时帮助访客快速判断文章核心内容；
4. 保留样板原生左侧小缩略图，不改动基础图文结构，减少样式冲突概率。

五、精细化样式全局微调（关键优化点）

所有尺寸、间距参数无需照搬，可根据自己的页面审美自由拖动调整，仅说明调整方向：

1. 顶部50/50栏目样式
   • 分类目录：开启标签模式，搭配主题色圆角背景，自主调节标签之间的间距，增加页面色彩点缀；
   • 文章日期：缩小字号，文本设置为次要浅灰色、右对齐，弱化权重避免抢夺标题的视觉重心；
   • 自主调节栏目底部外边距，和下方标题分隔开，避免文字拥挤堆叠。
2. 文字区块间距控制
   • 按需调整文章标题底部留白，和摘要拉开层级区分；
   • 摘要统一浅灰色，自行设置截断行数，避免超长文字过度撑高页面；
3. 外层文章模板整体美化
   • 调节底部外边距，为每篇文章预留舒适的留白，提升阅读呼吸感；
   • 底部添加1px浅灰色细分割线，清晰区分上下两篇文章；
   • 容器设置上下内边距，防止内容紧贴区块边框；

六、改造完成最终首页效果（图5）

全部调整保存后前台最终效果亮点：

1. 完美兼容无封面文章：左侧小缩略图空白占位纤细，不会割裂页面，无需批量补全历史文章封面；
2. 信息层级完整清晰：分类标签+发布日期前置展示，标题醒目，摘要补充内容，66%宽栏饱满不空洞；
3. 视觉节奏舒适：分割线+留白区分独立条目，页面层次丰富，摆脱平铺枯燥感；
4. 双语零错位：全部使用WordPress原生动态区块（分类、日期、标题、摘要、特色图片），Polylang双语插件可自动同步中英文内容，无需维护两套独立模板；
5. 坚守Text Blog极简定位，不堆砌冗余模块（评论、作者头像、多图幻灯片等全部舍弃，专注技术文字阅读体验）。

七、避坑总结（双语FSE模板改造注意事项）

1. 所有间距、色彩、尺寸仅使用区块原生右侧设置面板调整，不手写自定义CSS，避免中英文页面样式错乱；
2. 不要插入静态文字、静态图片，全程使用动态文章区块，保证双语环境下自动读取对应语言内容；
3. 后续想更换图文样板时，重复选中 Text blog query loop →「改变设计」即可切换，自定义的区块层级会保留，无需全部重构；
4. 归档页、分类页可同步改造：打开归档模板，找到页面内Query Loop，重复本次操作，统一全站文章列表展示样式。

后记

本次改造没有改动原本66/33的经典两栏页面框架，仅优化内部文章循环列表。依托主题官方预设样板降低改造成本，再通过简单分层扩充补足页面丰富度，平衡了「极简文字博客」与「页面饱满不单调」两大需求，同时适配大量无封面历史文章，属于低维护、高适配的首页优化方案，后续主题完善时也能灵活调整各项参数。