时间戳

首页 > 解决方案 > django html中的for循环取决于索引（每3次重复）

html - django html中的for循环取决于索引（每3次重复）

问题描述

我正在使用 django 应用程序的引导模板

<div class="row">
    <div class="col-12">
       <div class="card-deck-wrapper">
              <div class="card-deck">

                   {% if posts %}
                   {% for post in posts %}

                     <div class="card d-block">
                        <img class="card-img-top" src="{{ post.image }}" height="200">
                        <div class="card-body">
                            <h5 class="card-title">{{ post.title }}</h5>
                            <p class="card-text">{{ post.description }}</p>
                            <p class="card-text">
                              <small class="text-muted">{{ post.creation_date }}</small>
                            </p>
                        </div>
                     </div> <!-- end card-->
                     
                  {% endfor %}
                  {% endif %}

              </div> <!-- end card-deck-->
          </div> <!-- end card-deck-wrapper-->
     </div> <!-- end col-->
 </div><!-- end row -->

我的主要目标是每个“卡片”只重复3次，否则模板看起来很糟糕，但不知道如何迭代3次，在第4、7、10等时间，创建一个新的“卡片” -deck”以继续发布 4-5-6，然后是另一个“卡片组”用于发布 7-8-9，依此类推

谢谢！

我至少对其进行了一些更改，以了解视图中应该有多少“卡片组”

def blogPost(request):
posts = Post.objects.filter(state=True)

numberOfPosts = len(posts)
addOneDeck = 0
if (numberOfPosts%3) > 0:
    addOneDeck = 1

numberOfDecks = ((int(numberOfPosts/3))+addOneDeck)
    

context = {"posts":posts, "decks":numberOfDecks}

return render(request,"blog.html", context)

标签： htmldjango

解决方案

您是否在模板中寻找 forloop 计数器？django为此内置了

{% for post in posts %}
   {{ forloop.counter }} #The current iteration of the loop (1-indexed)
   {{ forloop.counter0 }} #The current iteration of the loop (0-indexed)

   {% if forloop.counter0|divisibleby:3 %}
        <p>print {{ forloop.counter0 }}</p>
   {% else %}
        <p> do something else</p>
   {% endif %}

{% endfor % }}

你可以在 if else 条件下使用。

https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#for

推荐阅读