Question

我创建的页面显示幻灯片中的幻灯片（存储为名为slide001.png，slide002.png等的图像）以及画外音的成绩单。模板看起来像这样：

＆lt; div class =“transcript”＆gt;
  ＆lt; p＆gt;您好，欢迎来到第一张幻灯片。＆lt; / p＆gt;
  ＆lt; p＆gt;这是第二张幻灯片。＆lt; / p＆gt;
  ＆lt; p＆gt; / ...等等......＆lt; / p＆gt;
  ＆LT; / DIV＆GT;

我希望将其翻译成：

＆lt; div class =“transcript”＆gt;
  ＆lt; div class =“slide”＆gt;
  ＆lt; img src =“slide001.png”/＆gt;
  ＆lt; p＆gt;您好，欢迎来到第一张幻灯片。＆lt; / p＆gt;
  ＆LT; / DIV＆GT;
  ...等等每张幻灯片...
  ＆LT; / DIV＆GT;

，即每个段落都包含在一个div中，并且img元素插入了一个连续编号的图像引用。我现在用JavaScript做这个，但由于我使用Jinja2做其他事情（插入一致的页眉和页脚，创建前进/后退链接等），我希望我可以做包装和枚举在Jinja2也是如此。没有英雄的hackery可能吗？

Answer 1

如果您可以在页面中使用以下格式获取数据，那么它可以很好地呈现。

transcript = [{'image': 'filepath', 'text':'welcome...'},
              {'image': 'filepath2', 'text':'slide2'},
              {'image': 'filepath3', 'text':'slide3'}]

Jinja可以放置内联或移动到一个宏，但这可以做到这一点：

<div class="transcript">
  {% for slide in transcript %}
  <div class="slide">
    <img src="{{ slide.image }}"/>
    <p>{{ slide.text }}</p>
  </div>
  {% endfor %}
</div>

使用Jinja2模板翻译元素并添加枚举ID？

1 个答案: