Djago模板卡对齐[Django 2.2] [英] Djago template card alignement [Django 2.2]

问题描述

我需要您的帮助.

我的环境是:python 3.6.6django 2.2

My envirenement is: python 3.6.6 django 2.2

我想使用Django模板生成类似这样的代码.

I want to generate some code like this using django template.

<div class="card-deck">
  <div class="card">
    actu1
  </div>
  <div class="card">
    actu2
  </div>
  <div class="card">
    actu3
  </div>
  <div class="card">
    actu4
  </div>
</div>
<!--insert inside a new div (with class card-deck) the 5th actu and next one-->
<div class="card-deck">
  <div class="card">
    actu5
  </div>
  <div class="card">
    actu6
  </div>
  <div class="card">
    actu7
  </div>
  <div class="card">
    actu8
  </div>
</div>
<!--insert inside a new div (with class card-deck) the 9th actu and next one-->

我要如何处理django模板如下:

what I manage to do with django templates is as follows:

{% extends 'actu/base_actu.html'%} 
{% load static %} 
{%block actumain%}
<div class="card-deck">
    {%for actu in actu%}
    <div class="card">
        { {actu.content }}
    </div>
    {%endfor%}
</div>
 {%endblock%}

仅给出如下代码:

<div class="card-deck">
  <div class="card">
    actu1
  </div>
  <div class="card">
    actu2
  </div>
  <div class="card">
    actu3
  </div>
  <div class="card">
    actu4
  </div>
  <div class="card">
    actu5
  </div>
  <div class="card">
    actu7
  </div>
  <div class="card">
    actu8
  </div>
  <div class="card">
    actu9
  </div>
  <div class="card">
    actu10
  </div>
  <div class="card">
    actu11
  </div>
  <div class="card">
    actu...
  </div>
</div>

请，您能给我我的想法，以便能够生成这样的代码.

Please, could you give me your idea to be able to generate such a code.

非常感谢您.

推荐答案

使用 forloop.counter0 和 divisibleby tempate标签，如下所示:

Use the forloop.counter0 and the divisibleby tempate tag like this:

{% for actu in actu %}
    {% if forloop.counter0|divisibleby:"4" and not forloop.first %}
        </div>
    {% endif %}
    {% if forloop.counter0|divisibleby:"4" %}
        <div class="card-deck">
    {% endif %}
    <div class="card">
        {{ actu.content }}
    </div>
    {% if forloop.last %}
        </div>
    {% endif %}
{% endfor %}

在这里，我们首先检查循环计数器是否可以被4整除，如果不是，则不进行第一次迭代，如果是，我们呈现结束div标签.
接下来，如果循环计数器可以被4整除，那么我们将渲染开始的div标签.
之后，我们渲染各个卡片.
接下来，如果是的话，我们检查这是否是最后一次迭代.因此，我们呈现了div结束标签.

Here we first check if the loop counter is divisible by 4 and not the first iteration if yes we render the closing div tag.
Next we if the loop counter is divisible by 4 and if so we render the opening div tag.
After this we render the individual cards.
Next we check if this is the last iteration if so we render the closing div tag.

这篇关于Djago模板卡对齐[Django 2.2]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！