2017-03-04 77 views
0

我已經創建了Django的一個博客,我最初是通過每個崗位與循環: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項目,而且我已經很早了。然而,這讓我非常沮喪。

編輯:只是爲了澄清我需要在該卡的第二篇文章是我問。我希望兩張牌並排顯示,每張牌都有獨特的帖子

回答

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 --> 
+0

我需要在該div中發佈第二篇文章,這正是我所要求的。我想要兩張並排顯示的卡片,每張卡片都有一個獨特的帖子。 – Temple

+0

這可能嗎? – Temple

+0

我修改了答案。希望能幫助到你。另外檢查http://stackoverflow.com/questions/25695800/django-template-skip-line-every-two-iteration – alfredo138923