Waxy 源码里的 460px 指的是全文列表预览的裁剪基准高度。它既不是正文宽度,也不是每篇文章都必须遵守的高度。把这几个尺寸分清,才知道应该改配置、改排版,还是只调整列表展示方式。
先看它在哪一种列表里生效
主题的 list_mode 有 full 和 excerpt 两种取值。前者在列表中展示一段正文,才会进入本文讨论的高度判断;后者展示摘要卡片,采用另一套布局。本站当前使用 excerpt,单篇文章页也不会被这条列表规则截成 460px。
若要在自己的本地预览中对照效果,可以修改站点的主题覆盖文件:
# _config.hexo-theme-waxy.yml
list_mode: full
index_excerpt:
enable: true
full_target: 620
full_floor: 260
full_ceiling: 900
这里的三个数是构建期估算高度。full_target 控制预览目标,full_floor 决定 <!-- more --> 前太短时是否继续取后文,full_ceiling 限制取出的内容规模。它们都不能直接等同于浏览器最后画出来的高度。修改后要重新生成页面,再去首页或分类列表观察。
宽度、行高与裁剪高度是三件事
当前桌面主栏上限为 760 CSS px,卡片左右各有 32px 内边距,因此正文可用宽度最大约 696px。正文字号是 16px、行高 1.6,对应约 25.6px 的行盒高度。窄屏下栏宽会缩小,并不会强行保持 696px。
如果只做除法,460px 约能放下十八行纯文本;真实文章还包含段间距、标题、图片、引用和代码,不能由此推导出固定字数,更不能把它当成所有设备的一屏高度。它的作用是给列表阅读一个收口位置,让读者判断是否继续打开全文。
构建期先按完整内容块估算并截取预览。进入浏览器后,脚本再检查整个条目的 scrollHeight;模板里的 data-clamp-total="800" 是触发阈值,统计范围包括标题、正文和底部。800 与正文裁剪基准 460 也不是同一个量,目前都属于实现中的常量,没有对应的主题高度配置项。
为什么不直接写 overflow: hidden
当前裁剪样式的核心如下,实际高度还可能被脚本写入的值调整:
.post-content.post__content--clamped {
max-height: 460px;
overflow-x: visible;
overflow-y: clip;
margin-bottom: 0;
display: flow-root;
}
CSS 两轴溢出有联动规则:一轴采用 hidden 等滚动相关值,另一轴的 visible 可能计算成 auto,从而改变原本希望保留的横向出血效果。visible 与 clip 的组合可以分别表达横向可见、纵向裁剪。代码块自己的横向滚动仍由代码块容器负责,不能只看正文外层这一条规则。
clip 本身不会建立新的块格式化上下文,因此这里另外使用 flow-root,避免末尾段落的外边距折叠出去,把渐隐遮罩顶到错误位置。它也不是可访问性的隐藏机制:被裁掉区域里的链接仍可能获得键盘焦点。交互内容很多的文章,采用摘要卡片并让读者进入单篇操作,会更容易控制。
收口要照顾图片和代码
脚本会查看 460px 附近跨过了哪个内容块。纯文本尽量贴着完整行的底边收口;碰到标题、图片、表格或代码等受保护的块,则尝试退到前一个完整块之后。没有合适的裁剪位置时,会保留普通的阅读全文入口,而不是强行制造一条空白遮罩。
初次没有超限的条目会被 ResizeObserver 观察。懒加载图片随后撑高条目、越过阈值时,再触发裁剪判断并断开这次观察。它不是持续重排所有已裁条目的机制。若把 index_excerpt.enable 设为 false,关闭的是构建期自动补足预览;全文列表里的浏览器高度判断仍然存在。
怎样检查修改是否有效
先选一篇短文,确认没有多余遮罩;再选一篇长文,观察最后一行是否被拦腰切断。接着放入一张本地图片、一段长代码和宽表格,检查图片加载后的布局,以及代码容器自己的横向滚动。最后缩窄窗口、放大文字,并用 Tab 检查阅读全文入口是否可达。
不要只对着一张桌面截图调数字。若问题是首页信息过密,可以先比较摘要模式;若问题是单篇行长,应调整栏宽或内边距。至于文章语义结构,可以结合短代码示例检查提示、收缩内容和普通段落各自的边界。