1

我正在创建显示幻灯片中的幻灯片（存储为名为 slide001.png、slide002.png 等的图像）以及画外音脚本的页面。模板如下所示：

<div class="transcript">
  <p>您好，欢迎来到第一张幻灯片。</p>
  <p>这是第二张幻灯片。</p>
  <p>/...等等... </p>
</div>

我想把它翻译成：

<div class="transcript">
  <div class="slide">
    <img src="slide001.png"/>
    <p>大家好，欢迎来到第一张幻灯片。</p>
  </div>
  ...等等每张幻灯片...
</div>

即，每个段落都包含在一个 div 中，并且插入了一个带有连续编号的图像引用的 img 元素。我现在正在使用 JavaScript 执行此操作，但由于我正在使用 Jinja2 执行其他操作（插入一致的页眉和页脚、创建前/后链接等），我希望我可以执行 wrap-and-enumerate在 Jinja2 中也是如此。没有英勇的黑客有可能吗？

4

1 回答 1

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>
于 2013-07-19T14:57:42.700 回答