Есть ли способ редактировать шаблон django?

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

            <div class="carousel-item active">

                {% for i in products %}
                <div class="col-xs-3 col-sm-3 col-md-3">
                    <div class="card align-items-center" style="width: 18rem;">
                        <img src='/media/{{i.image}}' class="card-img-top mt-2" alt="...">
                        <div class="card-body">
                            <h5 id="productName{{i.id}}" class="card-title">{{i.product_name}}</h5>
                            <p id="productPrice{{i.id}}" class="card-text">₹ {{i.price}}</p>
                            <span id='button{{i.id}}'>
                                <div id='product{{i.id}}' class="btn btn-primary cart">Add to cart</div>
                            </span>
                            <a href="/shop/productView/{{i.id}}" id="quickView{{i.id}}"
                                class="btn btn-primary ml-3">Quick view</a>
                        </div>
                    </div>
                </div>
                {% if forloop.counter|divisibleby:4 and forloop.counter > 0 and not forloop.last %}
            </div>
            <div class="carousel-item">
                {% endif %}
                {% endfor %}
            </div>
        </div>

У меня нет никакого решения для удаления кода из шаблона (возможно, JS может заставить его работать, но у меня нет никаких навыков в этом).

Вместо этого, вот идея, как сделать ваш шаблон более отзывчивым с помощью Django.

Вы можете получить user agent в своих представлениях:

views.py

user_agent = request.META['HTTP_USER_AGENT']

Если вы напечатаете его, то получите что-то вроде этого:

>> print(user_agent)
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) 
AppleWebKit/537.36 (KHTML, like Gecko) 
Chrome/**.*.****.***
Safari/537.36

Затем вы можете задать список ключевых слов для проверки, относится ли агент пользователя к мобильному устройству, и присвоить значение переменной в вашем контексте:

views.py

keywords = ['Mobile','Opera Mini','Android']

if any(word in user_agent for word in keywords):
    context['is_mobile'] = True
else:
    context['is_mobile'] = False

Наконец, установите оператор if в вашем шаблоне:

ваша_страница.html

{% if is_mobile == False %}
<div class="carousel-item active">

                {% for i in products %}
                <div class="col-xs-3 col-sm-3 col-md-3">
                    <div class="card align-items-center" style="width: 18rem;">
                        <img src='/media/{{i.image}}' class="card-img-top mt-2" alt="...">
                        <div class="card-body">
                            <h5 id="productName{{i.id}}" class="card-title">{{i.product_name}}</h5>
                            <p id="productPrice{{i.id}}" class="card-text">₹ {{i.price}}</p>
                            <span id='button{{i.id}}'>
                                <div id='product{{i.id}}' class="btn btn-primary cart">Add to cart</div>
                            </span>
                            <a href="/shop/productView/{{i.id}}" id="quickView{{i.id}}"
                                class="btn btn-primary ml-3">Quick view</a>
                        </div>
                    </div>
                </div>
                {% if forloop.counter|divisibleby:4 and forloop.counter > 0 and not forloop.last %}
            </div>
            <div class="carousel-item">
                {% endif %}
                {% endfor %}
            </div>
        </div>
{% endif %}

Вы можете найти ценную информацию, которая может помочь и вам, на этой теме.

Вернуться на верх