Skip to content

示例库

本页截图与代码均来自随插件发布的演示库,可直接打开对照。

下载中文演示库

五个核心概念 ​

插件的全部行为均由以下五条规则推导。理解这五条后,多数“未生效”问题可以自行定位。

一、分组看源码,不看屏幕 ​

插件读取的是源文本中图片所在的行,而非渲染后的 DOM。滚动、缩放或切换视图均不会改变分组结果。

阅读视图会折叠空行,画面上的间距看似相同;但在源码中,0 个、1 个、2 个空行是三种不同写法,第三种已达到上限。判断分组时应统计源码空行,不应依赖视觉留白。

二、两张以上连续图片一定是画廊 ​

同一组内存在两张及以上图片时,它们进入画廊:共用一条行高,列宽按比例分配。此时逐张写入的 ag:layout、ag:width、ag:side 均被忽略;一行视为一个整体。

若需单独控制某张图片,应先将其移出该组:使用正文或标题断开,或写入 ag:isolate。详见分组。

三、单图的宽度由比例算出 ​

未写入任何参数时,单图的栏宽百分比是比例的分段幂函数:方图约 39%,横图接近满栏,竖图约 28%。两条分界线分别决定“居中或浮动”与“浮动方向”。

三个设置项可整体平移该曲线:设置页的“栏宽增益”“中位比例”,以及模板规则。详见宽度路由。

四、越靠近图片的声明优先级越高 ​

优先级由低到高:

  1. 设置页的全局参数(floatMax、mobileBreakpoint 等)
  2. 当前模板的规则
  3. 图片自身 ag: 参数中显式写入的项

因此,无论模板如何设置,写入 ag:width=40% 的图片仍为 40%。模板仅影响“未写参数且布局为 auto”的图片。详见布局模板。

五、容器决定能力 ​

同一张图片置于正文、列表项、表格单元格或 callout 时,可用能力依次减少:

容器宽度/浮动画廊裁剪手柄
正文是是是是
列表项块布局,可写宽度同项内可并排是否
表格单元格否否是仅实时预览的操作按钮
Callout否否否否

该限制为有意设计:容器结构越复杂,可安全调整的几何属性越少。细节见嵌套作用域。

小结 ​

源码决定分组,比例决定宽度,声明离图片越近优先级越高。

下一步 ​

相关阅读 ​