Skip to content

示例库

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

下载中文演示库

布局模板 ​

模板决定「什么比例的图占多宽、要不要浮动」。内置的 auto 是一条曲线;自定义模板用区间规则替换它。

布局模板的规则列表:区间、宽度表达式与浮动方向

布局模板的规则列表包含区间、宽度表达式与浮动方向。

规则模型 ​

一个模板是一组规则,从上到下匹配,第一条命中的生效,后面的不再看。每条规则四个字段:

字段取值说明
ratioRange[0.5,1]、(1,3]图片宽高比区间(宽 ÷ 高)
width常数或含 r 的表达式占内容宽度的比例
layoutauto / float / fixedauto 按浮动阈值判断;float 强制浮动;fixed 固定居中块
sideauto / left / right浮动方向;省略时用模板级 floatAlignment

区间是左闭右开还是左开右闭,由括号本身决定:[0.75, 1.35] 包含两端,(1.35, 5] 不包含 1.35 但包含 5。

一个真实的模板 ​

json
{
  "id": "wide",
  "name": "wide",
  "floatAlignment": "alternate",
  "rules": [
    { "ratioRange": "[0.75,1.35]", "width": 0.68, "layout": "auto", "side": "auto" },
    { "ratioRange": "(1.35,5]", "width": "0.55 + 0.1 * Math.log(r)", "layout": "auto", "side": "auto" },
    { "ratioRange": "[0.2,0.75)", "width": "Math.max(0.32, 0.3 + 0.2 * r)", "layout": "float", "side": "left" }
  ]
}

第一条覆盖方图(固定 68%),第二条让宽图的占比随比例缓慢增长,第三条把竖图压窄并固定靠左浮动。落在三条之外的图片用内置路由。

表达式 ​

width 可以是常数,也可以是含 r 的表达式。放行的符号只有:

r
Math.log  Math.abs  Math.min  Math.max
Math.pow  Math.floor  Math.ceil  Math.round

写成裸的 min(0.6, r) 会被判为非法;必须写 Math.min。已经存进配置的非法规则会被静默丢弃,不会报错,所以导入后要回设置页核对规则条数。

两个限制 ​

  1. 设置页只能改模板名称与浮动方向,不能新建模板,也不能在这里编辑规则;规则只能通过导入写入。
  2. 规则只对「没有写 ag:width 且布局为 auto」的图片生效。写了参数,模板就管不到它。

规则与全局参数的关系 ​

规则算出的宽度仍然受全局参数约束:

全局参数对规则的影响
浮动最大生效宽度(默认 60%)规则宽度超过它就退回块布局,不再浮动
移动布局断点(默认 600px)栏宽小于它时一律居中块
栏宽增益 / 中位比例只影响内置 auto 曲线,不影响自定义规则

适用模板的场景 ​

  • 同一个库里,教程笔记要小图、作品集要大图;用路由按 frontmatter 切换模板。
  • 想要一套与默认完全不同的宽度节奏;写规则。
  • 只改一两张图;直接写 ag:width,不要为两张图改模板。

下一步 ​

相关阅读 ​