如何创建嵌套评论区？基于现有Django代码求解决方案

1. 修改模型（支持层级关联） #

给Comment模型添加自关联字段，标记父评论以实现层级结构：

class Comment(models.Model):
    post = models.ForeignKey(Post, related_name="comments", on_delete=models.CASCADE)
    # 父评论关联，允许为空（顶级评论无父评论）
    parent = models.ForeignKey('self', related_name='children', null=True, blank=True, on_delete=models.CASCADE)
    name = models.CharField(max_length=250)
    body = models.TextField()
    date_added = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return '%s - %s' % (self.post.title, self.name)

2. 调整视图（支持接收父评论ID） #

修改AddCommentView，处理回复请求时传入的父评论ID：

class AddCommentView(CreateView):
    model = Comment
    form_class = CommentForm
    template_name = 'add_comment.html'

    def form_valid(self, form):
        form.instance.post_id = self.kwargs['pk']
        # 从请求中获取父评论ID，存在则绑定
        parent_id = self.request.POST.get('parent_id')
        if parent_id:
            form.instance.parent_id = parent_id
        return super().form_valid(form)

    # 提交后返回原文章页，提升用户体验
    def get_success_url(self):
        return reverse('post_detail', kwargs={'pk': self.kwargs['pk']})

3. 表单调整（简化字段） #

修改CommentForm只保留必要输入项，父评论通过隐藏字段传递：

# forms.py
class CommentForm(forms.ModelForm):
    class Meta:
        model = Comment
        fields = ['name', 'body']

4. 模板渲染（递归显示层级评论） #

通过递归模板实现嵌套评论渲染，同时添加回复交互：

文章详情页（post_detail.html）

{% for comment in post.comments.filter(parent__isnull=True) %}
    <div class="comment">
        <h4>{{ comment.name }} · {{ comment.date_added|date:"Y-m-d H:i" }}</h4>
        <p>{{ comment.body }}</p>
        <!-- 回复按钮 -->
        <button onclick="toggleReplyForm({{ comment.id }})">回复</button>
        <!-- 回复表单（默认隐藏） -->
        <div id="reply-form-{{ comment.id }}" style="display: none; margin-top: 10px;">
            <form method="post" action="{% url 'add_comment' post.id %}">
                {% csrf_token %}
                {{ comment_form.as_p }}
                <!-- 隐藏字段传递父评论ID -->
                <input type="hidden" name="parent_id" value="{{ comment.id }}">
                <button type="submit">提交回复</button>
            </form>
        </div>
        <!-- 递归渲染子评论 -->
        {% include 'comment_tree.html' with comments=comment.children.all %}
    </div>
{% empty %}
    <p>暂无评论，快来发表第一条评论吧！</p>
{% endfor %}

<!-- 顶级评论表单 -->
<form method="post" action="{% url 'add_comment' post.id %}">
    {% csrf_token %}
    {{ comment_form.as_p }}
    <button type="submit">发表评论</button>
</form>

<script>
// 切换回复表单显示状态
function toggleReplyForm(commentId) {
    const form = document.getElementById(`reply-form-${commentId}`);
    form.style.display = form.style.display === 'none' ? 'block' : 'none';
}
</script>

递归子评论模板（comment_tree.html）

{% for comment in comments %}
    <div class="comment reply" style="margin-left: 30px; margin-top: 10px;">
        <h4>{{ comment.name }} · {{ comment.date_added|date:"Y-m-d H:i" }}</h4>
        <p>{{ comment.body }}</p>
        <button onclick="toggleReplyForm({{ comment.id }})">回复</button>
        <div id="reply-form-{{ comment.id }}" style="display: none; margin-top: 10px;">
            <form method="post" action="{% url 'add_comment' comment.post.id %}">
                {% csrf_token %}
                {{ comment_form.as_p }}
                <input type="hidden" name="parent_id" value="{{ comment.id }}">
                <button type="submit">提交回复</button>
            </form>
        </div>
        <!-- 继续递归渲染子评论 -->
        {% include 'comment_tree.html' with comments=comment.children.all %}
    </div>
{% endfor %}

5. 性能优化（避免N+1查询） #

在文章详情视图中使用prefetch_related一次性加载所有评论及子评论，减少数据库查询次数：

# 文章详情视图
class PostDetailView(DetailView):
    model = Post
    template_name = 'post_detail.html'

    def get_object(self, queryset=None):
        return Post.objects.prefetch_related(
            Prefetch('comments', queryset=Comment.objects.prefetch_related('children'))
        ).get(pk=self.kwargs['pk'])

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['comment_form'] = CommentForm()
        return context

这种自关联模型的实现方式是Django中嵌套评论的主流方案，逻辑清晰、易于维护，适合大多数场景。

内容的提问来源于stack exchange，提问作者Mak3232