Eleventy中Liquid标签调用image短代码无法读取Front Matter数据问题

在Eleventy项目中使用Liquid作为模板引擎，配合官方@11ty/eleventy-img响应式图片插件的{% image %}短代码生成图片标签时，如下遍历全量图片的写法可以正常运行：

{% for p in collections.projects %}
   {% for i in p.data.images %}
      {% image i, "alt text", "output path", "class list", "sizes" %}
   {% endfor %}
{% endfor %}

当需要取p.data.images数组的第一张图，直接传入带数组索引、多层属性访问的参数时：

{% image p.data.images[0], p.data.alts[0] , p.data.outs[0], "class list", "sizes" %}

会抛出第一个参数语法错误；提前用assign定义变量再传入，会提示必填的src参数为空，但直接用{{ p.data.images[0] }}可以正常输出对应的值。

问题出在Liquid自定义短代码的参数解析逻辑和原生输出标签不一致：

1. 双大括号包裹的{{ }}是Liquid原生输出标签，会完整走表达式求值流程，天然支持多层属性访问、数组方括号索引、过滤器等所有Liquid语法，因此直接输出p.data.images[0]可以正常拿到值。
2. {% image %}是Eleventy注入的自定义短代码标签，旧版本的参数解析器仅支持识别两类参数：
   • 带引号的字符串字面量，比如手动传入的"alt text"、"class list"
   • 无特殊符号的简单变量名，比如内层for循环迭代生成的临时变量i
     一旦参数中出现.、[]这类构成复杂表达式的特殊符号，解析器不会对内容做变量求值，会直接把整段文本当做普通字符串传入短代码。直接写p.data.images[0]时，短代码拿到的src实际是字符串"p.data.images[0]"，并非真实的图片路径，自然会报语法错误、src缺失。
3. 用assign赋值仍失败的常见诱因是作用域问题：如果assign语句写在for循环外部，执行时循环变量p还未定义，自然拿不到有效值；如果写在循环内仍报错，基本是Eleventy或eleventy-img版本过低，存在复杂变量传参的已知bug。

二选一即可：

• 兼容性最优方案：用capture标签提前把所有动态参数捕获为简单变量后再传入短代码，所有版本均可正常运行：

{% for p in collections.projects %}
  {% capture imgSrc %}{{ p.data.images[0] }}{% endcapture %}
  {% capture imgAlt %}{{ p.data.alts[0] }}{% endcapture %}
  {% capture imgOut %}{{ p.data.outs[0] }}{% endcapture %}
  {% image imgSrc, imgAlt, imgOut, "class list", "sizes" %}
{% endfor %}

• 升级适配方案：将Eleventy升级到2.0以上版本、@11ty/eleventy-img升级到3.0以上版本，新版本修复了Liquid短代码的表达式解析逻辑，最初的直接传参写法可正常运行。如果升级后仍有解析问题，可以给动态参数加上插值标记，明确告知解析器该部分需要求值：

{% for p in collections.projects %}
  {% image {{p.data.images[0]}}, {{p.data.alts[0]}}, {{p.data.outs[0]}}, "class list", "sizes" %}
{% endfor %}

内容的提问来源于stack exchange，提问作者latinsniper