Eleventy的Liquid模板for循环中使用front matter变量报错如何解决

报错原因 #

Liquid 语法规定 {% %} 逻辑标签内部禁止嵌套 {{ }} 变量输出符号，你在 for 循环的遍历对象表达式中书写 galleries.{{ imageSet }} 属于非法语法，因此触发编译报错。

直接修复现有代码 #

改用 Liquid 动态属性读取语法：使用方括号包裹变量名读取对象的动态键值，不需要额外加 {{ }}，修改后的循环代码如下：

{% for image-info in galleries[imageSet] %}
  <li class="splide__slide">
    <img src="/images/{{ imageSet }}/{{ image-info.filename }}" alt="{{ image-info.caption }}">
    <div class="main-slider-caption">
      {{ image-info.caption }}
    </div>
  </li>
{% endfor %}

可额外加一层非空判断避免异常：

{% if galleries[imageSet] %}
{% for image-info in galleries[imageSet] %}
  <!-- 循环内容 -->
{% endfor %}
{% endif %}

封装为 Shortcode 实现批量复用 #

如果你的 galleries 数据存放在 Eleventy 全局数据目录 _data/galleries.json 中，可按以下步骤封装复用模块：

1. 在项目根目录的 .eleventy.js 配置文件中注册短代码：

const galleries = require('./src/_data/galleries.json') // 按你实际的文件路径调整

module.exports = function(eleventyConfig) {
  eleventyConfig.addLiquidShortcode("renderGallery", function(imageSet) {
    const targetGallery = galleries[imageSet]
    if (!targetGallery) return ''
    return targetGallery.map(item => `
      <li class="splide__slide">
        <img src="/images/${imageSet}/${item.filename}" alt="${item.caption}">
        <div class="main-slider-caption">
          ${item.caption}
        </div>
      </li>
    `).join('')
  })
  // 其余原有配置保持不变
}

2. 在任意页面模板中直接调用短代码即可，无需重复写循环逻辑：

{% renderGallery imageSet %}

每个页面只要在 front matter 中定义了对应的 imageSet 字段，就能自动渲染对应图库的内容。

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