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:
|
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:
|
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 |