Drupal 8 Comment module - How to configure comments module from ugly to beautiful - Theming comments module

Introduction

Drupal provides a powerful comment module, which comes as a part of core modules. You have to enable this module.

This module is not having good documentation, and the default theming makes it super ugly. I mean, who wants a permalink to a comment. Lets have a look the default look:

(The ugly look)

Drupal comments module

Configure Comments module

First enable this module from: /admin/modules
Now, you have to a comment type from /admin/structure/comment
Give it a name, and in Target entity type, select Content

Drupal comments module

Save it and Click on Manage Fields
There is already a body field present
Goto “Manage Form Display*
I don’t want to display subject field. Move Subject field to disabled section.
Click on Manage Display, Move Links to disabled section.
Make label as hidden.
Under same Manage form display, Click on setting icon of Comments
Select Number of rows to 2 only. This will make the height of textarea box smaller.
Check on Hide the help link About text formats.
Check on Hide text format guidelines.

Drupal comments module

Now, we will goto our content type where we want to show comments.

goto /admin/structure/types
On your desired content type, Click on Manage Fields
Add a new field
Select Comments under General section
In Preview comment, select Disabled. This will not show preview button on form.
Save
If you have not themed your content page, then you might need to re-order this field in Manage display section.
Save it.

Allowed Formats

If you have installed Allowed Formats module, it will be more flexible. It won’t give the drop down of selecting particular format for users.

goto your comment type: /admin/structure/comment
Edit the body field
Under Allowed Formats, select Basic Html and save

Theme comments form

1. Theme content output

This post is not about how to theme your content. However if you have themed your content already, you need to render comment field in your content like:

//Bootstrap code
{% raw %}
<div class="card mb-4 shadow-lg p-4">
    {{ content.field_comments }}
</div>
{% endraw %}

2. Theme Parent Comment twig file

The default twig file for comment form is:

/core/themes/classy/templates/field/field--comment.html.twig

Copy this file into your theme’s template folder. And, modified content is:

{% raw %}
{%
  set classes = [
    'field',
    'field--name-' ~ field_name|clean_class,
    'field--type-' ~ field_type|clean_class,
    'field--label-' ~ label_display,
    'comment-wrapper',
  ]
%}
{%
  set title_classes = [
    'title',
    label_display == 'visually_hidden' ? 'visually-hidden',
  ]
%}

{% set num_comments = comments | length %}

<div id="accordion">
  <div class="card-header234" id="commentCollapseId">
    <button class="btn btn-link" data-toggle="collapse" data-target="#commentsCollapseOne" aria-expanded="true" aria-controls="commentsCollapseOne">
        <h4{{ title_attributes.addClass(title_classes) }}>{{ label }}</h4>
    </button>
    <span class="small">(Click to Expand)</span>
  </div>

  <div id="commentsCollapseOne" class="collapse collapsed" aria-labelledby="commentCollapseId" data-parent="#accordion">
    <section{{ attributes.addClass(classes) }}>

    {% if num_comments == 0 %}
      <p>There are no comments</p>
    {% endif %}

    {% if comment_form %}
      <h4 class="title comment-form__title">{{ 'Add new comment'|t }}</h4>
      {{ comment_form }}
    {% else %}
      <p>Please <a href="/user">login</a> to post comments</p>
    {% endif %}
    
    {{ comments }}


    </section>
  </div>
</div>

{% endraw %}

In this twig file, following are important points:

I have used accordion of bootstrap
I have rendered comment form on top, then the comments if any
If there are no comments, and you have set permission not to allow anonymous user to post comment. User will see nothing. So to avoid this I have checked if the comment form is not available and set a message: Please login And if the user is authenticated one, and there are not comments. I have checked the number of comments, and put a message for no comments.

3. Theme Comment form and data

The actual twig file from base theme is:

/core/themes/classy/templates/content/comment.html.twig

Copy this file to your theme’s template directory. Following is the modified content:

{% raw %}
{% if threaded %}
  {{ attach_library('classy/indented') }}
{% endif %}
  
<mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
<hr>
<blockquote class="blockquote">
  <p class="mb-0">{{ content }}</p>
  <footer class="blockquote-footer"><cite title="Source Title">{{ author }}</cite></footer>
</blockquote>

{% if parent %}
  <p class="parent visually-hidden">{{ parent }}</p>
{% endif %}

{% endraw %}

Important points about above code:

For each comment, I have hidden the permalink and date of posting the comment
I have shown the author name as link.
If you want to theme how your username should be displayed, you need to see username.html.twig file

Permissions

By default, authenticated users are allowed to post comments without any approval. I wanted to show only approved comments, to avoid spams.

Goto: /admin/people/permissions
Look for comment configuration Skip comment approval
Uncheck it for authenticated users. This will prevent even authenticated users to post comments without approval.
save it. Clear cache.
Now, when some authenticated user will post comment. You need to approve the comments.
To approve the comments, goto: /admin/content/comment/approval
You will see a list of unapproved comments.
For the comments, you want to approve. Select them and on Action, select: Publish comment