前言
我们经常会有这样的需求，比如评论功能，每个评论都有可能会有自己的子评论，如果在界面只展示成一列的话非常不美观，也不能体现出他们的层级关系。那么我们今天就来看看如何使用Django的模版来生成树状结构，以本站为例,效果如下图所示：
那么我们要怎么实现呢？首先先看看评论实体的定义，如下所示:
class Comment(models.Model):
body = models.TextField('正文', max_length=300)
author = models.ForeignKey(settings.AUTH_USER_MODEL, verbose_name='作者', on_delete=models.CASCADE)
article = models.ForeignKey(Article, verbose_name='文章', on_delete=models.CASCADE)
parent_comment = models.ForeignKey('self', verbose_name="上级评论", blank=True, null=True, on_delete=models.CASCADE)
可以看到，有一个parent_comment字段，关联自己。这样就可以根据这个字段来生成层级关系。 为了方便我们使用，我们自定义了一个叫query的tag，也可以叫修饰器。定义tag的代码如下，tag的定义应该定义在app/templatetags目录下，这里py文件命名为blog_tags.py：
@register.simple_tag
def query(qs, **kwargs):
""" template tag which allows queryset filtering. Usage:
{% query books author=author as mybooks %}
{% for book in mybooks %}
...
{% endfor %}
"""
return qs.filter(**kwargs)
接下来下面这段代码是树节点的模版代码。
{% load blog_tags %}
{% load comments_tags %}
<div id="commentlist-container" class="comment-tab" style="display: block;">
<ol class="commentlist">
{% query article_comments parent_comment=None as parent_comments %}
{% for comment_item in parent_comments %}
{% with 0 as depth %}
{% include "comments/tags/comment_item_tree.html" %}
{% endwith %}
{% endfor %}
</ol>
</div>
其中的{% query article_comments parent_comment=None as parent_comments %}的功能就是从评论中筛选出来是父级的评论。 comment_item_tree.html的实现也很简单：
{% load blog_tags %}
<li class="comment even thread-even depth-{{ depth }} parent" id="comment-{{ comment_item.pk }}"
style="margin-left: {% widthratio depth 1 3 %}rem">
<div id="div-comment-{{ comment_item.pk }}" class="comment-body">
<div class="comment-meta commentmetadata">
{{ comment_item.created_time }}
</div>
<p>{{ comment_item.body |escape|custom_markdown }}</p>
<div class="reply"><a class="comment-reply-link"
href="javascript:void(0)" rel="external nofollow"
onclick="do_reply({{ comment_item.pk }})"
aria-label="回复给{{ comment_item.author.username }}">回复</a></div>
</div>
</li><!-- #comment-## -->
{% query article_comments parent_comment=comment_item as cc_comments %}
{% for cc in cc_comments %}
{% with comment_item=cc template_name="comments/tags/comment_item_tree.html" %}
{% with depth=depth|add:1 %}
{% include template_name %}
{% endwith %}
{% endwith %}
{% endfor %}
其中最主要的部分就是</li>标签后面那段。这里使用with和include配合来在每一次循环里面重复的引入comment_item_tree.html，并且每次引入时赋予当前的评论变量和depth（每层循环depth会+1）。然后在每个评论处使用style="margin-left: {% widthratio depth 1 3 %}rem"来实现缩进，这样就实现了树状显示。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。