2017-03-04 61 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