嵌套包含 nunjucks 中传递的数据

Question

在反应中，我会将道具传递给模板。我该如何在 nunjucks 中做到这一点。例如，我想做以下事情：

页码：

{% set slides = [
  { "alt": "Tokenization Visualization","title": "Tokenization", "description": "The LLM starts by breaking down the input text, or 'prompt', into smaller pieces known as tokens.", "image": "/img/ai/carousels/how-llm-works/tokenization.png"},
  { "alt": "Embedding Visualization","title": "Embedding", "description": "Next, each token is converted into a numerical representation through a process called embedding.", "image": "/img/ai/carousels/how-llm-works/embedding.png"},
  { "alt": "Self-attention Visualization","title": "Self-attention", "description": "The model then adds additional information to these vectors to account for the order of words in the input. Self attention mechanisms allow the model to create context-aware representations of each word.", "image": "/img/ai/carousels/how-llm-works/self-attention.png"},
  { "alt": "Decoding Visualization","title": "Decoding", "description": "The LLM Decoder will take the output and use it to predict the next token in the sequence.", "image": "/img/ai/carousels/how-llm-works/decoding.png"},
  { "alt": "Output Visualization","title": "Output", "description": "Finally, the model generates a response.", "image": "/img/ai/carousels/how-llm-works/output.png"}
]
%}

{% include "partials/image-cards/image-cards.html" with { slides: slides } %}

图像卡：

<div class="image-cards flex flex-wrap justify-between py-6 ff-inter">
  {% for slide in slides %}
    {% include "partials/image-cards/image-card.html" with { slide: slide, index: loop.index} %}
  {% endfor %}
</div>

图像卡：

<div id="item{{index}}" class="card card-compact w-full md:w-[45%] shrink-0 grow-0s mt-10">
  <figure class="card-figure !mt-0 !mb-0">
      <img src="{{ slide.image }}" alt="{{slide.alt}}" class="w-full" />
  </figure>
  <div class="card-body !px-0 text-primary-content whitespace-normal">
      <div class="font-semibold mb-0">{{ slide.title }}</div>
      <p>{{ slide.description }}</p>
  </div>
</div>

当前已中断，表明：

Template render error: (/paget.html) [Line 24, Column 57]. expected block end in include statement

Answer 1

Nunjucks 不支持

with

子句。您可以使用

Environment.render

来实现自己的

include

const nunjucks  = require('nunjucks')
const env = nunjucks.configure()
env.addFilter('render', (template, ctx) => env.filters.safe(env.render(template, ctx)))

// test.njk = a: {{ a}}, b: {{b}}
var html = env.renderString(`{{ 'test.njk' | render({a: 10, b: 100}) }}`)
console.log(html)

可以使用异步加载器对其进行扩展。但

render

不适用于

macro

子句。