如何防止eleventy/nunjucks在for循环中转义内容

Question

当在 11ty 中包含的 nunjucks 模板（例如

{% for ... %}

）内使用

{% include ... %}

循环时，循环生成的内容将呈现在

<pre><code>...</code></pre>

块内。

以下是包含的内容：

src/includes/recipe-ingredients.html

<aside id="ingredients" aria-label="ingredients">
  <h3>Ingredients</h3>
  <ul>
    {% for ingredientData in recipe.ingredients %}

    <li><span class="measure">{{ ingredientData.displayQty }}</span>
    <span class="ingredient">{{ ingredientData.ingredient }}</span></li>

    {% endfor %}
  </ul>
</aside>

...这就是生成的内容：

<!-- Rest of generated HTML -->
<aside id="ingredients" aria-label="ingredients">
  <h3>Ingredients</h3>
  <ul>
<pre><code>&lt;li&gt;&lt;span class=&quot;measure&quot;&gt;2&lt;/span&gt;
&lt;span class=&quot;ingredient&quot;&gt;cinnamon&lt;/span&gt;&lt;/li&gt;


&lt;li&gt;&lt;span class=&quot;measure&quot;&gt;3/4&lt;/span&gt;
&lt;span class=&quot;ingredient&quot;&gt;sugar&lt;/span&gt;&lt;/li&gt;
</code></pre>
  </ul>
</aside>
<!-- Rest of generated HTML -->

为什么会发生这种情况以及如何预防？

Answer 1

<aside id="ingredients" aria-label="ingredients">
  <h3>Ingredients</h3>
  <ul>
    {% for ingredientData in recipe.ingredients %}
      <li>
        <span class="measure">{{ ingredientData.displayQty | safe }}</span>
        <span class="ingredient">{{ ingredientData.ingredient | safe }}</span>
      </li>
    {% endfor %}
  </ul>
</aside>