五个核心概念
插件的全部行为均由以下五条规则推导。理解这五条后,多数“未生效”问题可以自行定位。
一、分组看源码,不看屏幕
插件读取的是源文本中图片所在的行,而非渲染后的 DOM。滚动、缩放或切换视图均不会改变分组结果。
阅读视图会折叠空行,画面上的间距看似相同;但在源码中,0 个、1 个、2 个空行是三种不同写法,第三种已达到上限。判断分组时应统计源码空行,不应依赖视觉留白。
二、两张以上连续图片一定是画廊
同一组内存在两张及以上图片时,它们进入画廊:共用一条行高,列宽按比例分配。此时逐张写入的 ag:layout、ag:width、ag:side 均被忽略;一行视为一个整体。
若需单独控制某张图片,应先将其移出该组:使用正文或标题断开,或写入 ag:isolate。详见分组。
三、单图的宽度由比例算出
未写入任何参数时,单图的栏宽百分比是比例的分段幂函数:方图约 39%,横图接近满栏,竖图约 28%。两条分界线分别决定“居中或浮动”与“浮动方向”。
三个设置项可整体平移该曲线:设置页的“栏宽增益”“中位比例”,以及模板规则。详见宽度路由。
四、越靠近图片的声明优先级越高
优先级由低到高:
- 设置页的全局参数(
floatMax、mobileBreakpoint等) - 当前模板的规则
- 图片自身
ag:参数中显式写入的项
因此,无论模板如何设置,写入 ag:width=40% 的图片仍为 40%。模板仅影响“未写参数且布局为 auto”的图片。详见布局模板。
五、容器决定能力
同一张图片置于正文、列表项、表格单元格或 callout 时,可用能力依次减少:
| 容器 | 宽度/浮动 | 画廊 | 裁剪 | 手柄 |
|---|---|---|---|---|
| 正文 | 是 | 是 | 是 | 是 |
| 列表项 | 块布局,可写宽度 | 同项内可并排 | 是 | 否 |
| 表格单元格 | 否 | 否 | 是 | 仅实时预览的操作按钮 |
| Callout | 否 | 否 | 否 | 否 |
该限制为有意设计:容器结构越复杂,可安全调整的几何属性越少。细节见嵌套作用域。
小结
源码决定分组,比例决定宽度,声明离图片越近优先级越高。