Question

我使用Django创建了一个博客，我最初使用以下内容浏览每个帖子：

<div class="container">

<h2 class="latest-posts">Latest Posts</h2>
<hr />

{% for post in posts.all %}

<h4><a href="{% url 'post_detail' post.id %}">{{ post.title }}</a></h4>
<i class="fa fa-calendar" aria-hidden="true"></i> {{ post.pub_date_pretty }}

<img src="{{ post.image.url }}" class="img-responsive center-sm-block" style='width:75%; text-align:center;' />
<br/>
<p>{{ post.summary }}</p>
<br/>
<br/>

{% endfor %}

</div>

哪个效果很好！但我不仅希望有一个线性的帖子列表，并希望在我尝试使用此解决方案的自举卡中显示每个独特的帖子：

<div class="container">
    <h2 class="latest-posts">Latest Posts</h2>
    <hr />

    {% for post in posts.all %}

    <div class="row">

        <div class="col-12 col-md-6">
            <!-- Card -->
            <article class="card animated fadeInRight">
                <div class="card-block">
                    <h4 class="card-title"><a href="{% url 'post_detail' post.id %}">{{ post.title }}</a></h4>
                    <h6 class="text-muted">Antoine de Saint-Exupéry</h6>
                    <p class="card-text">{{ post.summary }}</p>
                </div>
                <div class="card-block text-center">
                    <div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
                        <a href="#" class="card-link">Read more</a>
                    </div>
                </div>
                <img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
            </article><!-- .end Card -->
        </div>

        <div class="col-12 col-md-6">
            <!-- Card -->
            <article class="card animated fadeInRight">
                <div class="card-block">
                    <h4 class="card-title"><a href="{% url 'post_detail' post.id %}">{{ post.title }}</a></h4>
                    <h6 class="text-muted">Antoine de Saint-Exupéry</h6>
                    <p class="card-text">{{ post.summary }}</p>
                </div>
                <div class="card-block text-center">
                    <div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
                        <a href="#" class="card-link">Read more</a>
                    </div>
                </div>
                <img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
            </article><!-- .end Card -->
        </div>

    </div>

    {% endfor %}

</div><!-- End container -->

但是每张独特的帖子现在在卡片中显示两次：

First row of posts

Second row of posts

任何帮助将不胜感激！这是我的第一个Django项目，我已经相当远了。然而，这让我非常沮丧。

编辑：只是为了澄清我需要在那张卡片中留下第二篇帖子才是我的要求。我想要两张并排显示的卡片，每张卡片都有一个独特的帖子

Answer 1

<div class="container">
    <h2 class="latest-posts">Latest Posts</h2>
    <hr />

    {% for post in posts.all %}

       {% if forloop.counter0|divisibleby:2 %}

       <div class="row">
       {% endif %}

          <div class="col-12 col-md-6">
              <!-- Card -->
              <article class="card animated fadeInRight">
                  <div class="card-block">
                      <h4 class="card-title"><a href="{% url 'post_detail' post.id %}">{{ post.title }}</a></h4>
                      <h6 class="text-muted">Antoine de Saint-Exupéry</h6>
                      <p class="card-text">{{ post.summary }}</p>
                  </div>
                  <div class="card-block text-center">
                      <div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
                          <a href="#" class="card-link">Read more</a>
                      </div>
                  </div>
                  <img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
              </article><!-- .end Card -->
           </div>


        </div>

    {% if forloop.counter|divisibleby:2 == False %}
    </div>
    {% endif %}

    {% endfor %}

 // When lenght of posts is even the <div> is not close. Close it!</div>
{% if posts.all|length|divisibleby:2 == False %}

    </div>
    {% endif %}

</div><!-- End container -->

Django博客没有正确循环

1 个答案: