内容型主题联调清单：我会先检查这 12 个细节
做 Hugo 主题时，我通常不会一上来就盯着配色，而是先把内容形态跑全。主题的质感，很多时候不是由首页决定的，而是由正文、列表、分页、目录、图片、代码块这些基础块决定的。
首先看列表页
- 标题长短不一时是否会挤坏卡片高度
- 没有
description时摘要回退是否自然 - 分类和标签较长时是否换行稳定
- 封面图比例不一致时是否会跳动
单篇文章里优先验证的模块
| 模块 | 重点检查 |
|---|---|
| 封面图 | 裁切方式、懒加载、点击放大 |
| 目录 | 长文滚动时是否稳定高亮 |
| 正文排版 | 标题层级、段落间距、列表缩进 |
| 嵌入图片 | 居中、圆角、最大宽度、暗色模式 |
| 表格 | 小屏溢出、表头背景、斑马纹可读性 |
| 代码块 | 语言标签、滚动、行高、复制体验 |
一个最小 front matter
yaml
---
title: "文章标题"
date: 2026-05-08
draft: false
categories: ["技术"]
tags: ["Hugo", "主题"]
cover: "https://images.pexels.com/photos/5186349/pexels-photo-5186349.jpeg?auto=compress&cs=tinysrgb&w=1200"
---文内图片的实际效果
下面这张图更适合看正文里的图片留白、说明文和点击预览是否顺手。
如果正文图片和封面图的视觉语义完全一样，列表页会显得单调。测试内容最好故意拉开。
我常用的联调顺序
- 先检查首页卡片
- 再看文章页正文
- 然后验证标签、分类和归档
- 最后用手机宽度跑一遍图片和表格
一个简单的模板判断
- 文章标题能不能承受 24 到 36 个汉字
- 摘要缺失时能不能自然回退到正文
- 正文里同时出现图片、列表、代码块时有没有视觉打架
小结
如果一套主题能把“长标题 + 多图正文 + 表格 + 代码块 + 目录 + 分页”这组内容稳稳接住，后面的视觉微调反而会轻松很多。