Django模板卡对齐[Django 2.2]答案

【问题标题】：Djago template card alignement [Django 2.2]Django模板卡对齐[Django 2.2]
【发布时间】：2021-04-24 00:55:27
【问题描述】：

我需要你的帮助。

我的环境是：蟒蛇3.6.6 django 2.2

我想使用 django 模板生成一些这样的代码。

<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 模板做的事情如下：

{% 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>

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

非常感谢。

【问题讨论】：

您必须关闭 { {actu.content }} 的花括号，所以它应该是 {{actu.content }}
为什么不通过将列表分解为 4 个元素的列表来准备视图中的数据
感谢您的评论。所以你认为在 wiew 中添加另一个变量并在模板中调用它并使用相同的代码但用于不同的列表？
如果列表大小增加如何管理？

标签： python html django django-templates

【解决方案1】：

{% for item in actu %}
    {% if forloop.counter0|divisableby:4 %}
    <div class="card-deck">
    {% endif %}
        <div class="card">
            {{ item.content }}
        </div>
        {% if forloop.counter0|divisableby:4 or forloop.last %}
    </div>
    {% endif %}
{% endfor %}

【讨论】：

感谢您的回答。我会尝试并给你一个反馈（y）

【解决方案2】：

像这样使用forloop.counter0 和divisibleby 模板标签：

{% 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 标签。

【讨论】：

谢谢你，好主意:) 它的作品。非常感谢。