> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ghost.org/llms.txt
> Use this file to discover all available pages before exploring further.

# comments

> Usage: `{{comments}}`

***

The `{{comments}}`helper outputs Ghost’s member-based commenting system. [Learn more about comments.](https://ghost.org/help/commenting)

Comments are visibleonly when they have been (1) enabled by the publication owner and (2) the person visiting the page has access to the post.

### Basic example

```handlebars theme={"dark"}
{{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

```handlebars theme={"dark"}
{{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

```handlebars theme={"dark"}
{{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

```handlebars theme={"dark"}
{{#if comments}}
   <h2>Discussion</h2>
   <a href="/guides">Community guidelines</a>
   {{comment_count}}
   {{comments title="" count=false mode="light" saturation=80}}
{{/if}}
```
