Skip to content

Latest commit

 

History

History
92 lines (68 loc) · 4.03 KB

templates.rst

File metadata and controls

92 lines (68 loc) · 4.03 KB
Raw

Using custom comment templates

Besides the standard templates of django-comments, this package provides a comments/comment.html template to render a single comment.

It's default looks like:

{% load i18n %}
<div{% if preview %} id="comment-preview"{% else %} id="c{{ comment.id }}"{% endif %} class="comment-item">
 {% block comment_item %}
   {% if preview %}<h3>{% trans "Preview of your comment" %}</h3>{% endif %}
     <h4>
       {% block comment_title %}
         {% if comment.url %}<a href="{{ comment.url }}" rel="nofollow">{% endif %}
         {% if comment.name %}{{ comment.name }}{% else %}{% trans "Anonymous" %}{% endif %}{% comment %}
         {% endcomment %}{% if comment.url %}</a>{% endif %}
         <span class="comment-date">{% blocktrans with submit_date=comment.submit_date %}on {{ submit_date }}{% endblocktrans %}</span>
         {% if not comment.is_public %}<span class="comment-moderated-flag">({% trans "moderated" %})</span>{% endif %}
         {% if USE_THREADEDCOMMENTS and not preview %}<a href="#c{{ comment.id }}" data-comment-id="{{ comment.id }}" class="comment-reply-link">{% trans "reply" %}</a>{% endif %}
       {% endblock %}
     </h4>

     <div class="comment-text">{{ comment.comment|linebreaks }}</div>
 {% endblock %}
</div>

Note

The id="comment-preview", data-comment-id fields are required for proper JavaScript actions. The div id should be id="c{{ comment.id }}", because Comment.get_absolute_url() points to it.

Adding a Bootstrap 4 layout, including Gravatar would look like:

{% load i18n gravatar %}

<div id="{% if preview %}comment-preview{% else %}c{{ comment.id }}{% endif %}" class="comment-item{% if comment.user_id and comment.user_id == comment.content_object.author_id %} by-author{% endif %}">
  {% if preview %}<h3>{% trans "Preview of your comment" %}</h3>{% endif %}
  <div class="media">
    {% gravatar comment.email css_class='user-image' %}
    <div class="media-body">
      <h4>
        {% block comment_title %}
          {% if comment.url %}<a href="{{ comment.url }}" rel="nofollow">{% endif %}
          {% if comment.name %}{{ comment.name }}{% else %}{% trans "Anonymous" %}{% endif %}{% comment %}
          {% endcomment %}{% if comment.url %}</a>{% endif %}
          {% if not comment.is_public %}<span class="comment-moderated-flag">({% trans "moderated" %})</span>{% endif %}
          {% if comment.user_id and comment.user_id == comment.content_object.author_id %}<span class="comment-author-flag">[{% trans "author" %}]</span>{% endif %}
        {% endblock %}
      </h4>

      <div class="comment-text">{{ comment.comment|linebreaks }}</div>
      <div class="comment-tools">
        {% if USE_THREADEDCOMMENTS and not preview %}<a href="#c{{ comment.id }}" data-comment-id="{{ comment.id }}" class="comment-reply-link">{% trans "reply" %}</a>{% endif %}
        <span class="comment-date">{{ comment.submit_date }}</span>
      </div>
    </div>
  </div>
</div>

Warning

While extremely popular, Gravatar is a huge privacy risk, as it acts like a tracking-pixel for all your users. It also exposes email addresses as the MD5 hashes can be reverse engineerd. See the GDPR <gdpr> notes for more information.

Customize date time formatting

To override the displayed date format, the template doesn't have to be overwritten. Instead, define DATETIME_FORMAT in a locale file. Define the following setting:

FORMAT_MODULE_PATH = 'settings.locale'

Then create settings/locale/{XY}/formats.py with:

DATETIME_FORMAT = '...'

This should give you consistent dates across all views.