Jinja2: Tạo hàng mới cho mỗi 3 mục

Question

Hiện tại đối với mỗi bài viết trong bài viết, một div mới với lớp span4 được tạo. Thay vì cho mỗi hàng tôi muốn giới hạn nội dung của nó thành ba nhịp và tạo một hàng mới sau khi đạt đến giới hạn đó. Làm thế nào tôi có thể thực hiện tốt nhất điều này?

{% extends "base.html" %} 
{% block content %} 
<div class="container-fluid"> 
    <legend></legend> 
    <div class="row-fluid" id="main"> 
     {% for article in articles %} 
     <div class="span4"> 
      <div class="thumbnail"> 
       <a href="{{ article.url }}"><img src="http://placehold.it/300x150/483CB4"></a> 
       <div class="caption"> 
        <h4><a href="{{ article.url }}">{{ article.title }}</a></h4> 
        <p> {{ article.summary }}</p> 
       </div> 
       <legend></legend> 
       <a class="btn" href="#"><i class="icon-thumbs-up"></i></a> 
       <a class="btn" href="#"><i class="icon-thumbs-down"></i></a> 
      </div> 
     </div> 
     {% endfor %} 
    </div> 
</div> 
{% endblock %} 

Mục tiêu:

<div class="row"> 
    <div class="span4">article[0]</div> 
    <div class="span4">article[1]</div> 
    <div class="span4">article[2]</div> 
</div> 
<div class="row"> 
    <div class="span4">article[3]</div> 
    <div class="span4">article[4]</div> 
    <div class="span4">article[5]</div> 
</div> 

Answer 1

Cách tốt nhất để làm điều này là sử dụng được xây dựng trong batch filter chia tay danh sách của bạn thành các nhóm ba:

{% for article_row in articles | batch(3, ' ') %} 
<div class="row"> 
    {% for article in article_row %} 
    <div class="span4">{{ article }}</div> 
    {% endfor %} 
</div> 
{% endfor %} 

Answer 2

Bạn có thể sử dụng loop.index0 và loop.last bên trong for vòng lặp. Đây là số for-loop documentation.

Ví dụ:

{% extends "base.html" %} 
{% block content %} 
<div class="container-fluid"> 
    <legend></legend> 
    <div class="row-fluid" id="main"> 
     {% for article in articles %} 
     {% if loop.index0 % 3 == 0 %} 
     <div class="row"> 
     {% endif %} 
      <div class="span4"> 
       ... 
      </div> 
     {% if loop.index0 % 3 == 2 or loop.last %} 
     </div> 
     {% endif %} 
     {% endfor %} 
    </div> 
</div> 
{% endblock %} 

Mệnh loop.last nên đóng hàng cuối cùng thậm chí nếu có ít hơn 3 mục. <div> nên bắt đầu khi loop.index0 cho 0 là phần còn lại và sẽ kết thúc khi 2 là số còn lại

Một cách khác là nhóm các mục thành hàng trước khi chuyển chúng vào mẫu, sau đó bạn có thể phát hành hai vòng cho một bên cai khac.