Выравнивание карточки шаблона Djago [Django 2.2]

#python #html #django #django-templates

#python #HTML #django #django-шаблоны

Вопрос:

Мне нужна ваша помощь, пожалуйста.

Моя среда: python 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>

Развернуть фрагмент

Пожалуйста, не могли бы вы дать мне свою идею, чтобы иметь возможность генерировать такой код.

Большое вам спасибо.

1. Вы должны закрыть фигурные скобки, { {actu.content }} чтобы они не отображались {{actu.content }}

2. почему бы вам не подготовить данные в представлении, разбив список на список списков из 4 элементов

3. Спасибо за ваш комментарий. Итак, вы думаете, добавьте еще одну переменную внутри wiew и вызовите ее в шаблоне и используйте тот же код, но для другого списка?

4. И если размер списка увеличится, как им управлять?

Ответ №1:

Используйте forloop.counter0 divisibleby тег tempate и tempate следующим образом:

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

Ответ №2:

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