Создание древовидных комментариев

В этом разделе мы добавим шаблоны, а также JavaScript код для добавления комментариев.

Первое, что нам необходимо, это создать шаблон для списка комментариев к статье:

В каталоге templates/blog, создадим папку comments, где затем создадим файл шаблона comments_list.html.

Далее добавим разметку на Bootstrap в этом файле:

{% load mptt_tags static %}
<div class="nested-comments">
{% recursetree post.comments.all %}
<ul id="comment-thread-{{ node.pk }}">
    <li class="card border-0">
        <div class="row">
            <div class="col-md-2">
                <img src="{{ node.author.profile.avatar.url }}" style="width: 100px;height: 100px;object-fit: cover;" alt="{{ node.author }}"/>
            </div>
            <div class="col-md-10">
                <div class="card-body">
                    <h6 class="card-title">
                        <a href="{{ node.author.profile.get_absolute_url }}">{{ node.author }}</a>
                    </h6>
                    <p class="card-text">
                        {{ node.content }}
                    </p>
                    <a class="btn btn-sm btn-dark btn-reply" href="#commentForm" data-comment-id="{{ node.pk }}" data-comment-username="{{ node.author }}">Ответить</a>
                    <hr/>
                    <time>{{ node.time_create }}</time>
                </div>
            </div>
        </div>
    </li>
     {% if not node.is_leaf_node %}
        {{ children }}
     {% endif %}
</ul>
{% endrecursetree %}
</div>

{% if request.user.is_authenticated %}
    <div class="card border-0">
       <div class="card-body">
          <h6 class="card-title">
             Форма добавления комментария
          </h6>
          <form method="post" action="{% url 'comment_create_view' post.pk %}" id="commentForm" name="commentForm" data-post-id="{{ post.pk }}">
             {{ form }}
             <div class="d-grid gap-2 d-md-block mt-2">
                <button type="submit" class="btn btn-dark" id="commentSubmit">Добавить комментарий</button>
             </div>
          </form>
       </div>
    </div>
{% endif %}

{% block script %}
<script src="{% static '/comments.js' %}"></script>
{% endblock %}

В этом коде мы используем форму комментариев только для авторизованных пользователей, так же мы подключаем скрипт comments.js, который напишем чуть позже. Комментарии в шаблоне мы выводим с помощью дерева MPTT.

Переходим к шаблону детальной статьи, templates/blog/post_detail.html, мы его особо не стилизировали, поэтому изменим его содержимое:

{% extends 'main.html' %}
{% load mptt_tags %}
{% load static %}
{% block content %}
<div class="card mb-3">
	<div class="row">
		<div class="col-4">
			<img src="{{ post.thumbnail.url }}" class="card-img-top" alt="{{ post.title }}" />
		</div>
		<div class="col-8">
			<div class="card-body">
				<h5>{{ post.title }}</h5>
                <p class="card-text">{{ post.description }}</p>
				<p class="card-text">{{ post.text }}</p>
				Категория: <a href="{% url 'post_by_category' post.category.slug %}">{{ post.category.title }}</a> / Добавил: {{ post.author.username }} / <small>{{ post.time_create }}</small>
			</div>
		</div>
	</div>
</div>
<div class="card border-0">
	<div class="card-body">
		<h5 class="card-title">
			Комментарии
		</h5>
		{% include 'blog/comments/comments_list.html' %}
	</div>
</div>
{% endblock %}

В этом шаблоне мы подключаем наш список комментариев.

Далее нам нужно отредактировать шаблон main.html, где мы подключим скрипт для установки CSRF токенов который будет в файле backend.js, а также блок для скриптов:

{% load static %}
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
            crossorigin="anonymous"></script>
</head>
<body>
{% include 'header.html' %}
<div class="container">
    <div class="row">
        <div class="col-lg-8 p-4">
        {% include 'includes/messages.html' %}
            {% block content %}
            {% endblock %}
            {% include 'pagination.html' %}
        </div>
        <div class="col-4 p-4">
            {% include 'sidebar.html' %}
        </div>
    </div>
</div>
{% include 'footer.html' %}
<script src="{% static 'backend.js' %}"></script>
{% block script %}{% endblock %}
</body>
</html>

В этом файле мы подключаем токен, а также создаем блок для подключения скриптов в других файлах, например в comments_list.html.

В следующем шаге мы добавим скрипты JavaScript и проверим работу.