Nunjucks 和 Eleventy 短代码无法相互连接

Question

我编写了一个 Eleventy 短代码来获取图像的文件名（以及 alt 标签的文本等），并输出整个 srcset，使其成为响应式图像。

该网站是使用 Nunjucks 编写的，因此我需要从 Nunjucks 部分内部调用短代码。

Eleventy 返回错误，“错误：无法调用

responsiveImageTest

，未定义或错误”。

在尝试诊断潜在错误时，我最终得到了以下简化版本的代码 –

previewCard.njk

{{ responsiveImageTest() | safe }}

.eleventy.js

  eleventyConfig.addShortcode("responsiveImageTest", function() {
    return `<p>Check</p>`;
  });

两个结果： 当我在 PreviewCard.njk 中包含弯曲大括号时，Eleventy 表示无法调用responsiveImageTest。 当我删除弯括号时，Eleventy 编译得很好，但短代码根本不返回任何内容。

Answer 1

您似乎使用了错误的语法来使用带有 eleventy + nunjucks 的短代码。根据 11ty 文档（https://www.11ty.dev/docs/shortcodes/，在“查看此示例：”中，您可以单击“nunjucks”来更改示例的模板语言）您可以尝试一些方法如下：

previewCard.njk

{% responsiveImageTest "fileName" %}

.eleventy.js

eleventyConfig.addShortcode("responsiveImageTest", function() {
  ...
});

您可能还想检查 Eleventy 的图像插件，该插件有助于图像转换，包括响应式输出：https://www.11ty.dev/docs/plugins/image/