图片墙分类展示 改动总结

项目路径：f:\program\blog\lektor-website

一、需求背景

为站点新增一个「图片墙」页面，用于集中展示照片：

1. 比例归一：不论原图像素多大，上传后按比例就近归入三种固定规格之一——横屏 4:3、方形 1:1、竖屏 3:4，显示时用 object-fit: cover 裁切，原图保留不动。
2. 均匀铺满：同比例图片在页面中尺寸完全一致，按行排列后每行正好铺满页面宽度（横屏 3 张/行、方形与竖屏 4 张/行），行类型轮换穿插。
3. 分类浏览：进入图片墙先看到分类页，布局与 _model: gallery 一致，一行放 3 个类别卡片（名称 + 封面）；点击类别进入该类的图片墙。

二、实现方案

• 比例归类：Lektor 附件自带 img.width / img.height，模板中计算宽高比，与 4/3、1、3/4 比较取最近者（阈值 1.167 / 0.875），自动分类，无需手动标记。
• 分行渲染：Jinja 中按类别分组、按固定张数切块成行，输出 row-landscape / row-square / row-portrait 三种行；CSS Grid 每行 repeat(3/4, 1fr)，配合 aspect-ratio 固定形状，行行铺满无空隙。
• 分类结构：入口页直接复用现有 gallery 模型与 gallery.html 模板（columns: 3）；类别页用新建的 img-category 模型，套用图片墙模板渲染自身附件图片。
• 移动端：窄屏（≤768px）统一降为 2 列，保持各自比例。
• 纯 CSS 实现：无 JS、无物理裁剪脚本，缩略图统一 thumbnail(640) 控制体积。

三、涉及文件

四、注意事项（上传图片须知）

1. 文件名避免 % ] ~ {} 等字符（% 会导致浏览器 URL 解析破图，个别字符会导致 Lektor 构建失败），不要用 _ 开头（会被 Lektor 当隐藏文件忽略）。
2. 新增图片只需把文件拖进对应类别目录，重新构建即可，无需为单张图片建子页面。
3. 收尾行（图片不足一行时）目前靠左对齐，如需居中改一行 CSS 即可。