111 个简码调用另一个简码？答案

【问题标题】：11ty one shorcode call another shortcode?111 个简码调用另一个简码？
【发布时间】：2021-11-06 05:07:20
【问题描述】：

我是否可以编写一个短代码，它会触发其他几个？假设我有使用 njk 的 shorcode：

{% card %}

里面，我们说下面的代码：

  eleventyConfig.addNunjucksShortcode("card", function() {
    return `
    <div class="card">
    </div>
    `
  });

我还有另一个简码：

{% img "path-to-img.jpg" %}.

它有一个img src参数，并且会渲染到一些img。

  eleventyConfig.addNunjucksShortcode("img", function(path) {
    return `
    <img src="${path}">
    `
  });

我需要当我调用卡片简码时，它调用了img简码并将参数传递给它。假设我写：

{% card 'path-to-img.jpg' %}

它将呈现在：

<div class="card">
  <img src="path-to-img.jpg">
</div

以防万一，我需要调用一个短代码，配对和嵌套的短代码不适合我：

{% column %}
  {% img 'path-to-img.jpg' %}
{% endcolumn %}

【问题讨论】：

标签： shortcode eleventy

【解决方案1】：

虽然不是真正的“调用简码的简码”，但我会采用 img 的逻辑并将其抽象为一个方法。让 img 短代码调用来处理它的逻辑，然后 card 调用抽象出来的方法来获取它的 HTML 结果。如果这没有意义，请告诉我。

【讨论】：

我以某种方式成功了，发布了问题的答案。现在我正在尝试击败异步简码。
有趣 - 我担心的是，通过 eleventyCondfig.nunjucksShoretcodes 调用简码有记录吗？我没看到。

【解决方案2】：

我是这样弄的（没有img，但意思是一样的）：

  eleventyConfig.addNunjucksShortcode("inner", function() {
    return `<div class="inner">`;
  });

  eleventyConfig.addNunjucksShortcode("endinner", function() {
    return `</div>`;
  });

  eleventyConfig.addShortcode("card", function(text) {
    return `<div class="card">
              ${eleventyConfig.nunjucksShortcodes.inner()}
              ${text}
              ${eleventyConfig.nunjucksShortcodes.endinner()}
            </div>`;
   });

并称它为：

{% card "text" %}

【讨论】：