отображение данных в нескольких столбцах с циклом for

#django

Вопрос:

Я уверен, что это простой ответ, но ни за что на свете я не могу понять / выяснить, как это сделать.

Я хочу отображать сообщения в блоге из моей базы данных в трех равных столбцах. Когда я начинаю просматривать документы начальной загрузки, это приведенный код.

     <div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>
 

Однако, если я перейду к его реализации, я не понимаю, как я смогу наложить на него цикл for, не повторяя все 3 раза. т.е.:

         {% for post in posts.all %}      
        <div class="row">
            <div class="col-sm">
                <img class="post-image" src="{{ post.image.url  }}" />
            </div>
            <div class="col-sm">
                <img class="post-image" src="{{ post.image.url  }}" />
            </div>
            <div class="col-sm">
                <img class="post-image" src="{{ post.image.url  }}" />
            </div>
        </div>                           
        {% endfor %}
 

Если бы вы могли, пожалуйста, указать мне в правильном направлении, как это сделать, я был бы очень признателен, если бы загрузка не была обязательным требованием.

Комментарии:

1. Пожалуйста, укажите соответствующий вид.

Ответ №1:

Представление должно «подготовить» данные, чтобы упростить их перечисление. Мы можем создавать куски с помощью:

 def some_view(request):
    posts = list(Post.objects.all())
    posts = [posts[i:i 3] for i in range(0, len(posts), 3)]
    return render(request, 'some-template.html', {'products': products}) 

в шаблоне мы можем затем работать с двойным {% for … %}…{% endfor %} циклом [Django-doc]:

 {% for chunk in posts %}
    <div class="row">
        {% for post in chunk %}
            <div class="col-sm">
                <img class="post-image" src="{{ post.image.url  }}" />
            </div>
        {% endfor %}
    </div>
{% endfor %}