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

Posted 2023-03-06

【中文标题】111 个简码调用另一个简码？

【英文标题】：11ty one shorcode call another shortcode?

【发布时间】：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 %

【参考方案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" %