Usage: {{comments}}
Description
The {{comments}} helper outputs Ghost’s member-based commenting system. Learn more about comments.
Comments are visible only when they have been (1) enabled by the publication owner and (2) the person visiting the page has access to the post.
Basic example
{{comments}}
By default, {{comments}} outputs a title and comment count. These elements, along with the color mode and the saturation of the avatar's background color, can be customized via attributes.
Attributes
| Name | Description | Options | Default |
|---|---|---|---|
title | Header text for comment section | Any string | Member discussion |
count | Boolean to toggle comment count on or off | true or false | true |
mode | Set light or dark mode for comments | auto, light, or dark | auto (determined by the parent element's CSS color property) |
saturation | Set saturation of avatar background color | number | 60 |
Example with attributes
{{comments title="Join the club" count=false mode="light" saturation=80}}
{{! Customizes header text, hides comment count, sets element to light mode and avatar background color saturation to 80% }}
Comment count
Use {{comment_count}} to output the number of comments a post has. This option is useful for displaying the comment count on the homepage or at the top of the post. Developers can also use it to customize the output of the {{comments}} helper.
Attributes
| Name | Description | Options | Default |
|---|---|---|---|
singular | The singular name for a comment | Any string | comment |
plural | The plural name for comments | Any string | comments |
empty | What to output when there are no comments | Any string | Output is empty when comment count equals zero |
autowrap | Wraps comment count in an HTML tag | HTML tag or false | span |
class | Add a custom class to wrapper element | Any string | "" |
Examples
{{comment_count empty="" singular="comment" plural="comments" autowrap="span" class=""}}
{{! default output: <span>5 comments</span> }}
{{comment_count singular="" plural=""}}
{{! output: <span>5</span> }}
{{comment_count empty="0"}}
{{! output: <span>0</span>. (The default is an empty output.) }}
{{comment_count autowrap="div" class="style-me"}}
{{! output: <div class="style-me">5 comments</span> }}
{{comment_count autowrap="false"}}
{{! output: 5 comments (just text!) }}
Additional customization
Use the comments helper with {{#if}} for more granular control over output. {{#if comments}} returns true when (1) comments have been enabled and (2) the reader has access to the post.
Advanced example
{{#if comments}}
<h2>Discussion</h2>
<a href="/guides">Community guidelines</a>
{{comment_count}}
{{comments title="" count=false mode="light" saturation=80}}
{{/if}}
