图片排布速查：大图、双联、九宫格
用两个 shortcode 搞定文章里所有的图片摆放需求。
写游记或者摄影类文章的时候，普通的  单图排版往往不够用。要么需要一张占满版面的大景，要么需要并排两张做对比，要么干脆铺一组九宫格。下面是这套主题里两个常用的图片排布组件。
一、单张全幅大图
最简单的场景：一张风景照，希望它突破正文宽度，左右延伸到 sidebar 的边缘，营造电影感。用 wide shortcode：
{{< wide src="https://picsum.photos/id/1018/2000/900"
caption="远山如黛，云海浮沉" >}}
效果如下：
在桌面端（≥1101px）图片会左右各扩 80px，比正文段落更宽；在移动端则与正文等宽。caption 居中显示在图下方，灰色小字。
二、双联横排
两张图并排做对比——比如"前后对比"、“白天/夜晚”、“全景/细节”。用 gallery shortcode，列数 cols="2"：
{{< gallery cols="2" ratio="3/2" >}}
https://picsum.photos/id/1015/800/600 | 河流的清晨
https://picsum.photos/id/1019/800/600 | 同一条路的傍晚
{{< /gallery >}}
每行一张图，可选 | 后面写说明（鼠标悬停时会浮现）：
ratio 参数控制单元的宽高比，常用值：
1/1正方形（默认）3/2经典相机比例4/3偏方一点16/9电影宽幅
三、九宫格
铺满 3×3 的九宫格，常用于游记里的"打卡照墙"。cols="3" + 9 张图：
{{< gallery cols="3" >}}
https://picsum.photos/id/10/600/600
https://picsum.photos/id/11/600/600
... 共 9 行
{{< /gallery >}}
默认正方形单元最适合九宫格的视觉节奏。如果想错位排成 4 列、5 列也行，cols="4" / cols="5" 即可。
四、更大的网格
来个 4 列 × 2 行的瀑布：
gap 参数控制单元之间的间距，单位 px。想要更"贴"的密铺效果就给 gap="2"，想要"卡片感"就给 gap="12"。
五、参数速查
wide
| 参数 | 必填 | 说明 |
|---|---|---|
src | 是 | 图片 URL |
alt | 否 | 替代文本（无障碍） |
caption | 否 | 图下方居中说明，省略时用 alt |
gallery
| 参数 | 默认 | 说明 |
|---|---|---|
cols | 3 | 列数 |
gap | 6 | 单元间距（px） |
ratio | 1/1 | 宽高比，CSS aspect-ratio 写法 |
inner 内容每行一张图：
URL
URL | 可选 caption
六、几个细节
- 所有图片都自带
loading="lazy"和decoding="async"，滚动到才加载 - 单元 hover 时图片会轻微放大 4%，caption 浮现
- 网格里的每张图都可以点击放大（lightbox 自动接管）
- 移动端 ≤640px 时，
cols≥3会自动降级到 2 列，避免单元太小
够用了。需要更复杂的瀑布流（每张图原始比例不一致）也可以再扩展，但绝大多数博客场景，单图大图 + 网格两个就够。
评论