Django模板实现评论树状结构详解

桃夭

发布时间：2026-10-13 | 5人浏览过

原创

本文介绍如何在Django中利用自定义模板标签与递归include机制构建多级评论的树状显示结构。通过定义parent_comment自关联字段，结合{% query %}筛选父级评论，并在模板中使用with和depth变量控制层级缩进，最终实现美观且具层级感的评论列表展示。

前言

Django评论树状结构实现原理

在实际开发中，我们经常遇到需要展示层级数据的需求，例如评论系统中的子评论功能。如果所有评论仅以单列形式平铺展示，不仅视觉效果不佳，也无法直观体现评论之间的父子层级关系。本文将通过具体实例，演示如何利用Django的模板系统生成具有层级感的树状结构，效果如附图所示。

要实现这一功能，首先需要明确数据模型的结构。以下是评论实体（Comment）的定义示例：

评论模型定义


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)

从上述代码可以看出，Comment模型中包含一个parent_comment字段，该字段通过外键自关联自身。这种设计允许评论指向其父评论，从而构建出层级关系。为了在模板中更便捷地处理这种过滤逻辑，我们自定义了一个名为query的模板标签（也可视为修饰器）。该标签的定义代码位于app/templatetags目录下的blog_tags.py文件中，具体实现如下：

自定义模板标签query


@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 %}部分负责从所有评论中筛选出parent_comment为None的顶级评论。随后，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模板。每次引入时，都会将当前评论对象赋值给comment_item变量，并将depth变量加1以反映当前层级。同时，在每个评论项上应用style="margin-left: {% widthratio depth 1 3 %}rem"样式，通过计算margin-left实现缩进效果，从而完成树状结构的视觉呈现。

总结

以上就是利用Django模板生成树状结构的完整实现过程。希望本文的内容能为大家在处理类似层级数据展示时提供有价值的参考，感谢支持。