Django模板两个block标签for循环分段遍历数据实现方法
Django模板分块渲染不同区间文章的实现方法
你遇到的重复遍历问题本质是两个循环都在调用全量politics数据集,只需要给两个循环指定不同的切片区间即可,有两种可选实现方案:
方案1:模板层直接使用slice过滤器(改造成本最低)
Django模板内置的slice过滤器支持对查询集(QuerySet)做和Python列表完全一致的切片操作,不需要修改后端视图代码,直接调整模板循环逻辑即可:
- 主内容区
content块:只遍历前4篇文章,将循环起始标签修改为{% for politic in politics|slice:":4" %},文章总数不足4篇时自动渲染全部内容,不会报错 - 侧边栏
sidepolitics块:从第5篇文章开始遍历剩余全部内容,将循环起始标签修改为{% for politic in politics|slice:"4:" %},不需要额外加总数判断——当文章总数小于等于4时,这个切片会返回空集合,for循环不会执行任何渲染,和原有判断逻辑效果一致。
修改完成后的完整political.html代码如下:
{% extends 'index.html' %} {% block content %} {% for politic in politics|slice:":4" %} <div class="post-entry-1 col-lg-4 box mx-1"> <a href="single-post.html"><img src="{{politic.image.url}}" alt="" class="post_img"></a> <div class="post-meta"> <span class="date">{{politic.category}}</span> <span class="mx-1">•</span> <span>{{politic.created_at}}</span> </div> <h2 class="mb-2"><a href="single-politic.html">{{politic.title}}</a></h2> <span class="author mb-3 d-block">Ole Pundit</span> <p class="mb-4 d-block">{{politic.body|truncatewords:75}}</p> </div> {% endfor %} {% endblock %} {% block sidepolitics %} {% for politic in politics|slice:"4:" %} <div class="post-entry-1 border-bottom"> <div class="post-meta"> <span class="date">{{politic.category}}</span> <span class="mx-1">•</span> <span>{{politic.created_at}}</span> </div> <h2 class="mb-2"> <a href="single-post.html">{{politic.title}}</a> </h2> <span class="author mb-3 d-block">Ole Pundit</span> </div> {% endfor %} {% endblock %}
方案2:视图层提前拆分数据集(适合后续扩展)
如果后续需要对主内容区、侧边栏的文章做单独的排序、筛选、字段处理,可以直接在视图层提前拆分好两个数据集传给模板,逻辑更清晰。
修改views.py中的political视图函数:
def political(request): politics = Politics.objects.all() # 取前4篇用于主内容卡片布局 main_politics = politics[:4] # 取第5篇及以后的内容用于侧边栏列表布局 side_politics = politics[4:] return render(request, 'political.html', { 'main_politics': main_politics, 'side_politics': side_politics })
对应模板中两个循环分别改为遍历main_politics和side_politics即可,渲染效果和方案1完全一致。
注:Django的QuerySet切片是惰性执行的,切片操作会直接转化为SQL层面的
LIMIT、OFFSET语句,不会把全量文章加载到内存,不存在性能损耗。
内容的提问来源于stack exchange,提问作者Felicity
相关产品推荐
相关产品推荐

