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>
Copied to clipboard

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.

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
Element Description
header

The comment title. Placed above the comment text.

HTML elements Supported HTML elements