Как поменять дизайн для каждой карточки в шаблонах django

Question

Как переключаться между различными дизайнами карт для каждого из данных в течение l oop.

<div class="col-1-of-3">
    <div class="card">
     ...
    </div>
</div>

<div class="col-1-of-3">
    <div class="card">
     ...
    </div>
</div>

<div class="col-1-of-3">
    <div class="card">
     ...
    </div>
</div>

Эти три карты имеют различные дизайны, в настоящее время сталкиваются с проблемой переключения этих карт для каждого l oop в шаблоне Django.

{% for cont in data %}
   {% ifequal forloop.counter|divisibleby:"3" True %}

    <div class="col-1-of-3">
        <div class="card">
         ...
        </div>
    </div>

   {% endifequal %}

   {% ifequal forloop.counter|divisibleby:"2" True %}

    <div class="col-1-of-3">
        <div class="card">
         ...
        </div>
    </div>

   {% endifequal %}

   {% ifnotequal forloop.counter|divisibleby:"2" True %}

    <div class="col-1-of-3">
        <div class="card">
         ...
        </div>
    </div>

   {% endifnotequal %}
{% endfor %}

Логотип третьей карты c неверен. Мне нужно изменить этот лог c так, чтобы для каждого l oop каждая карта должна отображаться поочередно. И еще одна проблема заключается в том, что после 3 л oop он должен закрыть секцию, поскольку в ряд допускаются только 3 карты.

<section class="section-tours" id="section-tours">

            {% ifequal forloop.counter|divisibleby:"3" True %}
            {% endifequal %}

            {% ifequal forloop.counter|divisibleby:"2" True %}
            {% endifequal %}

            {% ifequal forloop.counter|divisibleby:"2" True %}
            {% endifequal %}

</section>

Answer 1

Для этого вы можете использовать встроенный шаблонный шаблон django цикл . Вы можете обновить html и добавить тег шаблона цикла, как показано ниже, чтобы изменить дизайн 1-й, 2-й и 3-й карт.

{% for cont in data %}
    <div class="{% cycle 'col-1-of-3' 'col-2-of-3' 'col-3-of-3' %}">
        <div class="card">
         ...
        </div>
    </div>
{% endfor %}

Надеюсь, это поможет вам:)

Answer 2

Секция закрывается после печати 3 карточек.

<section class='section-tours' id='section-tours'>
  <div class="row">
{% for cont in data %}

    {% cycle 'tools/col-1-of-3.html' 'tools/col-2-of-3.html' 'tools/col-3-of-3.html' as tmp silent %}
    {% include tmp %}

    {% cycle "" "" "</div> </section><section class='section-tours' id='section-tours'>" %}

{% endfor %}
    </section>

Answer 3

Проверьте приведенный ниже код и скажите, поможет ли он, поскольку я не проверял его.

Я нарезал для l oop для первых трех значений, если вы хотите повторить то же самое изменение ломтик для того же кода.

{% for cont in data|slice:":3" %} #i have sliced it for first three values only
   {% if forloop.first %}

    <div class="col-1-of-3">
        <div class="card">
         ...
        </div>
    </div>

   {% endif %}

   {% ifequal forloop.counter|divisibleby:"2" True %}

    <div class="col-1-of-3">
        <div class="card">
         ...
        </div>
    </div>

   {% endifequal %}

   {% if forloop.last %}

    <div class="col-1-of-3">
        <div class="card">
         ...
        </div>
    </div>

   {% endif %}
{% endfor %}