Gallery 画廊

文章里的图片只有两种排法,加两个开关。原则是默认不裁切——截图里每个像素都是信息,要让网格整齐只能靠裁,那是你的选择,不是默认行为。

一、单图

直接写 Markdown 图片,构建期就会包成 <figure> 并把说明写进 <figcaption>:

![截图的 alt 文字](图片路径)
![截图的 alt 文字](图片路径 "想单独给图注时写这里")

正文宽度下,图片按自身比例铺满,图注居中、两侧各一条渐隐短线——和站内其它文章一致。

二、多图并排

```gallery
columns=2

![说明](a.png)
![说明](b.png)
```

两张并排,各自保持原始比例(所以行下沿可能不齐,这是不裁切的代价):

需要每行更多图时用 columns=3,适合信息量少的小图:

三、开关一:crop= —— 显式要”整齐划一”时才裁

裁切后每格等高、下沿平齐,代价是竖幅被切掉上下、宽幅被切掉左右。可选 1:1 / 4:3 / 3:2 / 16:9。

四、开关二:layout=rows —— 照片贴边行

每行的图按自身比例分配宽度,于是同一行高度自动一致、整行铺满,而且没有裁切。照片集用它;截图对比用 columns。

五、参数表

| 参数 | 取值 | 作用 | | columns | 2 / 3 | 并排几列(默认 2) | | crop | 1:1 / 4:3 / 3:2 / 16:9 | 裁成等高方块;不写就不裁 | | layout | rows | 换成照片贴边行 |

首行不是 key=值 时才当作配置行;写错的值直接忽略并回落默认,不会把文章弄崩。

六、怎么选

| 场景 | 用什么 | | 流程截图、前后对比 | columns=2 | | 图标、小图同质陈列 | columns=3 | | 一定要下沿平齐 | 加上 crop= | | 旅行/骑行照片、想铺满一整行 | layout=rows | | 单张重要截图 | 直接写 ![说明](图) |

间距规则:同一组图之间 0.5rem,组与正文之间 1.35/1.65rem——相邻两档必须看得出不一样,这是版面”精致”的分水岭。手机上并排一律降为单列。

七、同一组素材，几种排法（真实图对照）

用本站文章里的真实素材，把几种排法摆在一起看差别。

A · 两张截图，比例不齐（1.24 与 1.72）

不裁切 → 各自保持比例，下沿参差；两张比例差得越多越明显：

加 crop=4:3 → 下沿平齐，代价是宽的那张被切掉左右：

B · 三张并排

三张里有两张比例接近、一张是宽幅，于是中间那张更矮——这正是”比例要可通约”的意思。

C · 照片（四张同为 3:2）

layout=rows：一行铺满、高度自动一致、不裁切：

同样四张，改用 columns=2：每张更大，但两行占的版面高一倍：

D · 单图

![设置密码](shot-1.png)

看图选：截图对比用 columns=2；下沿必须平齐才加 crop=；照片用 layout=rows；单张重要图直接写单图。