The functionality for managing post comments is ready. Now we need to adapt the post/detail.html template to do the following things:
- Displays the total number of comments for the post.
- Displayed a list of comments.
- Displayed a form for adding a new comment.
First, you need to add all the comments. Open the post/detail.html template and add the following code to the content block:
{% with comments.count as total_comments %}
<h2>
{{ total_comments }} comment{{ total_comments|pluralize }}
</h2>
{% endwith %}
Django’s ORM is used here in the template – it executes QuerySet comments.count(). It’s important to note that Django’s template language doesn’t use brackets to call methods. The {% with %} tag allows you to assign a value to a new variable. It will be available up to the {% endwith %} tag.
The {%
with %}
template tag is useful because it avoids the risk of changing the database or accessing methods multiple times. The pluralize template filter is used to display the plural suffix in the word comment depending on the value of total_comments. Filters take the value of the variable to which they were applied as input and return the calculated value. A separate topic will be devoted to template filters. The pluralize filter returns a string with an “s” if the value is different from 1. The text will be rendered as 0 comments, 1 comment or N comments. Django includes many tags and template filters which can be used to display the desired information. Now let’s include a list of comments. Add the following lines to the post/detail.html template before the previous code:
{% for comment in comments %}
<div class=“comment“>
<p class=“info“>
Comment {{ forloop.counter }} by {{ comment.name }}
{{ comment.created }}
</p>
{{ comment.body|linebreaks }}
</div>
{% empty %}
<p>There are no comments yet.</p>
{% endfor %}
The {% for %} template tag is used to loop through the comments. The default message is displayed when the comments list is empty. It tells you that no comments were left for the post. They are enumerated with a variable {{ forloop.counter }} which contains a loop counter in each iteration. Then the author name, date, and body of the comment are displayed. Finally, you need to render the form or display a success message if the message has been validated. Add the following lines below the previous code:
{% if new_comment %}
<h2>Your comment has been added.</h2>
{% else %}
<h2>Add a new comment</h2>
<form action="." method="post">
{{ comment_form.as_p }}
{% csrf_token %}
<p><input type="submit" value="Add comment"></p>
</form>
{% endif %}
It should be clear: if a new_comment object exists, a success message is displayed. Otherwise a <p> paragraph element is rendered for each field with the CSRF token enabled, which is mandatory for POST requests. Open https://127.0.0.1:8000/blog/ in your browser and click on the post to open it. The following will appear:
Add some comments using the form. They should appear below the post in chronological order:
Open https://127.0.0.1:8000/admin/blog/comment/ in your browser. You’ll see an admin panel with a list of comments you’ve made. Click on one of them to edit, uncheck Active and click Save. The program will redirect you to the list of comments again and the Active column will show an inactive icon for the next comment. It will look like the first message in the following screenshot.
If you go back to the post page, you will see that the deleted comment is not displayed and is not counted in the total. Thanks to the active field, you can disable unacceptable messages and not show them in posts.
