有没有办法编辑 django 模板？

Question

在代码的最后一部分中，存在一个 for 循环，它有助于构建 boostrap crousel，但为了使网站具有响应性，我需要删除该 forloop。 那么有什么方法可以实现响应性？

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

Answer 1

我没有任何解决方案可以从模板中删除代码（JS 可能可以使它工作，但我没有任何技能）。

相反，这里有一个使用 Django 使您的模板更具响应性的想法。

您可以在视图中获取 用户代理：

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 语句：

your_page.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 %}

您可以在this topic 上找到可能对您有帮助的有价值的信息。