Стилизация комментариев в Django

Я нашел этот учебник по Django и созданию клона Hacker News. Думаю, это будет хорошей отправной точкой, так как это довольно хороший разбор Django и некоторых концепций, таких как родительские комментарии https://www.askpython.com/django/hacker-news-clone-django

Я подумал, что это круто и справился с этим, начал изучать больше о Django Реализовал свой собственный поиск и в этом. Однако комментарии к нему были не очень хороши. Поэтому я хотел улучшить его, чтобы комментарии были красивее, чем большие цветные блоки.

Однако я застрял, пытаясь сделать стиль комментариев в стиле Hacker News или Reddit.

Я искал и нашел https://css-tricks.com/styling-comment-threads/, но он все равно не работает так, как я задумал, и я хотел бы иметь более упрощенный стиль, но я столкнулся с некоторыми проблемами. Моя идея состоит в том, чтобы иметь его

|Parent comment
      |
       Child Comment
             | 
              Grandchild Comment
      |
       Child Comment2

|Parent Comment2 

etc

Мой раздел комментариев commentpost.html я изменил

  {% for comment in comments %}
    {% if comment.identifier %}
    
    <div class="comment-thread"> 
      <div class="replies">
            <div class="comment-heading">
              <div class="comment-vote"></div>
                <div class="comment-info">
                  <a href="#" class="comment-author"><a href = "{% url 'user_info' comment.creator.username %}">Comment by: {{comment.creator.username}}</a> | <strong>Thread Level: {{comment.identifier}}</strong></p>
                </div>
            </div>
    
            <div class="comment-body">
                <p>
                <strong> {{ comment.content}} </strong>
                </p>
                <a href = "{% url 'reply' id1=post.id id2=comment.id %}">Reply </a>
            </div>
      </div>
    </div>
    
    {% else %}
                   
      <div class="comment-heading">
        <div class="comment-bullet">
          </div>
          <div class="comment-info">
            <a href="#" class="comment-author"><a href = "{% url 'user_info' comment.creator.username %}">Comment by: {{comment.creator.username}}</a> | <strong>Thread Level: {{comment.identifier}}</strong></p>
          </div>
      </div>
    
      <div class="comment-body">
        <p>
        <strong> {{ comment.content}} </strong>
        </p>
        <a href = "{% url 'reply' id1=post.id id2=comment.id %}">Reply </a>
      </div>
    
    </div>
    
    {% endif %}

{% endfor %}

И моя функция CommentListView Function в моем views.py вместе с

def CommentListView(request,id):
    form = CommentForm()
    post = Post.objects.get(id =id)
    post.count_votes()
    post.count_comments()
 
    comments = []    
    def func(i,parent):
        children = Comment.objects.filter(post =post).filter(identifier =i).filter(parent=parent)
        for child in children:
            gchildren = Comment.objects.filter(post =post).filter(identifier = i+1).filter(parent=child)
            if len(gchildren)==0:
                comments.append(child)
            else:
                func(i+1,child)
                comments.append(child)
    func(0,None)
 
    if request.method == "POST":
        if request.user.is_authenticated:
            form = CommentForm(request.POST)
            if form.is_valid():
                content = form.cleaned_data['content']
                comment = Comment(creator = request.user,post = post,content = content,identifier =0)
                comment.save()
                return redirect(f'/post/{id}')
        return redirect('/signin')
 
    context ={
        'form': form,
        'post': post,
        'comments': list(reversed(comments)),
    }
    return render(request,'tnapp/commentpost.html', context)

Вернуться на верх