Django Jinja выводит первый элемент списка, а затем запускает цикл for со второго

#python #html #css #django #jinja2

#python #HTML #css #django #jinja2

Вопрос:

Я новичок в Django и пытаюсь вывести первое изображение модели в первом div, а все остальные — во втором div. Я погуглил и не нашел никаких решений. Я уверен, что мое решение немного ужасно.

 <div class="carousel-item active">
    <img src="{{ carousels[0].image.url }}" class="d-block w-100" alt="...">
</div>

{% for carousel in carousels([1]) %}
<div class="carousel-item">
    <img src="{{ carousel.image.url }}" class="d-block w-100" alt="...">
</div>
{% endfor %}

Вид:

 def product_list(request, category_slug=None):
    category = None
    categories = Category.objects.all()
    products = Product.objects.filter(available=True)
    carousels = Carousel.objects.all()
    if category_slug:
        category = get_object_or_404(Category, slug=category_slug)
        products = products.filter(category=category)
    return render(request,
                  'shop/product/list.html',
                  {'category': category,
                   'categories': categories,
                   'products': products,
                   'carousels': carousels})

Ответ №1:

Если вы используете Jinja, то вы можете просто использовать обычную нарезку ( [1:] для «всего, начиная со второго элемента»):

 <div class="carousel-item active">
    <img src="{{ carousels[0].image.url }}" class="d-block w-100" alt="...">
</div>

{% for carousel in carousels[1:] %}
<div class="carousel-item">
    <img src="{{ carousel.image.url }}" class="d-block w-100" alt="...">
</div>
{% endfor %}

Аналогом в ванильных шаблонах Django является slice фильтр:

 {% for carousel in carousels|slice:"1:" %}

Ответ №2:

Это должно быть хорошо для первого подхода jinja

 {% for carousel in carousels %}
{% if forloop.counter == 0 %}
<div class="carousel-item active">
    <img src="{{ carousel.image.url }}" class="d-block w-100" alt="...">
</div>
{% else %}
<div class="carousel-item">
    <img src="{{ carousel.image.url }}" class="d-block w-100" alt="...">
</div>
{% endif %}
{% endfor %}