有什么方法可以编辑django模板吗

Question

在代码的最后部分，存在一个for循环，它有助于构建boostrap crusel，但为了使网站响应，我需要删除该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使您的模板更具响应性的想法。

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

视图.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

然后，您可以设置一个关键字列表，以检查用户代理是否引用了移动设备，并在您的上下文中为变量分配一个值：

视图.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 %}

你可以在这个话题上找到对你有帮助的有价值的信息。