Comment template for specific comment type

Question

How can I have a comment template (comment.html.twig) per comment type?

The Twig Template naming conventions documentation explains how I can get a comment template per node content type (comment--node-[type].html.twig), but it doesn’t mention comment types.

I have a node content type with multiple comment fields (one for each comment type), so filtering by node content type doesn’t help me.

Answer 1

Enable Twig Debugging, then you'll get template suggestions printed as HTML comments directly into the markup.

I did that and got the following output:

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'comment__field_my_comment_field__article' -->
<!-- FILE NAME SUGGESTIONS:
   * comment--field-my-comment-field--article.html.twig
   * comment--field-my-comment-field.html.twig
   x comment.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/classy/templates/content/comment.html.twig' -->

So, the templates are supposed to be named like the following pattern:

comment--field-name-of-the-comment-field-in-the-content-type--content-type.html.twig
comment--field-name-of-the-comment-field-in-the-content-type.html.twig

Answer 2

The best way to Debug this is to enable twig debug open up or create sites/default/services.yml

change

 http.response.debug_cacheability_headers: true
 twig.config: 
   auto_reload: true
   cache: true
   debug: true

once done run drush cr or clear your cache

then go to the page with the comment on them and inspect the element in chrome you will see ... some thing like

<!-- FILE NAME SUGGESTIONS:
 XXXXXX
  -->

then theme the new comment template file to your liking