Nunjucks与Eleventy短码无法关联的问题排查求助

核心问题：短码调用语法错误 #

你误用了Nunjucks的变量插值语法{{ }}来调用Eleventy短码，但Eleventy短码在Nunjucks环境下必须用标签语法{% %}调用，这就是报错和无输出的根源。

针对简化代码的修复步骤 #

1. 修正局部模板的调用语法
   把previewCard.njk里的{{ responsiveImageTest() | safe }}改成：

{% responsiveImageTest %}

重新编译后就能正常输出<p>Check</p>。

2. 两种异常情况的原因解析

• 保留{{ }}报错：responsiveImageTest是Eleventy注册的短码，并非Nunjucks模板的全局变量或函数，用{{ }}调用会找不到该标识符，因此触发“undefined”错误。
• 移除大括号后无输出：移除大括号后你应该是直接写了responsiveImageTest()，这会被Nunjucks当作纯文本处理，不会触发Eleventy的短码解析逻辑，自然没有输出。

回到你的响应式图片短码（带参数场景） #

假设你的完整短码注册代码（.eleventy.js）如下：

eleventyConfig.addShortcode("responsiveImage", function(filename, altText) {
  return `
    <picture>
      <source srcset="/images/${filename}-480w.jpg 480w, /images/${filename}-800w.jpg 800w" sizes="100vw">
      <img src="/images/${filename}-800w.jpg" alt="${altText}" loading="lazy">
    </picture>
  `;
});

那在previewCard.njk中正确调用的写法是：

{% responsiveImage "hero-shot" "A scenic mountain view" %}

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