Comment block

Attention

For Turbo pages, you can turn on comments that use your HTTP API. For more information, see Comments and authorization on Turbo pages.

To place a comment block, use the nested structure of <div> tags:

<div data-block="comments" data-url="https://example.com">
    <div data-block="comment"
         data-author="Alice Little"
         data-avatar-url="https://clck.ru/KyKNk"
         data-subtitle="10 Nov 2019"
    >
        <div data-block="content">
            <p>Text of comment 1</p>
        </div>
        <div data-block="comments"> 
            <div data-block="comment"
                 data-author="Mad Hatter"
                 data-avatar-url="https://clck.ru/KyKPP"
                 data-subtitle="12 Nov 2019"
            >
                <div data-block="content">
                    <p>Reply to comment 1</p>
                </div>
            </div>
        </div>
    </div>
    <div data-block="comment"
         data-author="Cheshire Cat"
         data-avatar-url="https://clck.ru/KyKPy"
         data-subtitle="11 Nov 2019"
    >
        <div data-block="content">
            <p>Text of comment 2</p>
        </div>
    </div>
</div>

The number of nesting levels is unlimited.

Note

The first 40 comments are processed (the content of the div element with the comment value in the data-block attribute).

Attribute

Description

data-block*

Take the following values:

  • comments — The comments list block.

  • comment — A comment in the list.

  • content — The comment content of the comment.

data-author*

The comment author's name.

data-avatar-url

Link to the avatar of the comment's author.

The picture must be in JPG or PNG format, no less than 64 × 64 pixels.

data-subtitle

Additional line (for example, for the comment date.) Placed under the author's name.

data-url

Link to the page for adding comments.

Used only in the top level div element.

* Required attribute.

The content of the comment:

Element Description
header The comment title. Placed above the comment text.
HTML elements Supported HTML elements
Contact support
Previous
Share
Next
Feedback form