Article page
Article page
The Article page template is rendered when a user navigates to https://{yoursubdomain}.zendesk.com/hc/{locale}/articles/{article_id}.
Available properties
You can use the following properties in the Article page template.
| Name | Type | Description |
|---|---|---|
| article | object | An article object |
| attachments | array | An array of attachment objects |
| comments | array | An array of article comment objects |
| comment_sorters | array | An array of filter objects. Useful for sorting the comments. See Sorters below |
| promoted_articles | array | An array of promoted article objects |
| section | object | A section object. The object's articles property contains only the first 10 articles for performance reasons |
| ticket_forms | array | An array of ticket form objects |
| help_center | object | A help_center object that holds information and settings about the current help center |
| settings | object | A settings object with custom settings for the current theme |
| signed_in | boolean | Whether the user is logged in or not |
| featured_posts | array | An array of featured post objects |
Available helpers
You can use the following helpers in this page template. You can also use any built-in helpers, global helpers, or global advanced helpers.
| Name | Description |
|---|---|
| breadcrumbs | Breadcrumbs for the article page. See breadcrumbs helper |
| pagination | Pagination links. See pagination helper |
| share | Sharing elements. See share helper |
| subscribe | A link to follow or unfollow new comments in the article |
| form | A form for data input. See bellow the available forms for this page |
| related_articles | A list of related articles. See related articles helper |
| request_callout | A link to submit a new request, if available. See request_callout helper |
| comment_callout | A link to submit a new comment, if available. See comment_callout helper |
Available forms
You can add the following form to the Article page template:
| Name | Description |
|---|---|
| comment | A form to create a new article comment |
Use the form helper to insert it. See Form Helper.
Available identifiers
The following identifiers are available in this page:
| Identifier | Form | Field(s) | Description |
|---|---|---|---|
| body | comment | textarea, wysiwyg | Identifies a text field for article comments |
Sorters
Iterating through the comment_sorters array of filter objects adds the following links to the page:
| Link text | Action |
|---|---|
| Date | Sorts by most recent comment creation time in descending order |
| Votes | Sorts by highest vote sum in descending order |
Official comments are always given the highest priority and shown at the top.
Example
<nav class="sub-nav clearfix">{{breadcrumbs}}{{subscribe}}</nav><article class="main-column"><header class="article-header clearfix"><h1>{{article.title}}</h1><div class="article-metadata"><div class="article-avatar"><img src="{{article.author.avatar_url}}" alt="Avatar"></div><div class="article-author">{{article.author.name}}</div><div class="article-updated">{{article.updated_at}}</div></div></header><div class="article-body markdown">{{article.body}}</div><footer class="article-footer clearfix">{{article.vote 'up' class='article-vote-up' selected_class='article-voted' role='button'}}{{article.vote 'down' class='article-vote-down' selected_class='article-voted' role='button'}}{{share}}</footer><section class="article-comments"><div class="article-comments-header"><h2>Comments</h2><div class="comment-sorters">{{#each comment_sorters}}<a aria-selected="{{selected}}" href="{{url}}">{{name}}</a>{{/each}}</div></div><ul>{{#each comments}}<li class="comment"><div class="comment-vote vote">{{vote 'up' class='vote-up' selected_class='vote-voted'}}{{vote 'sum' class='vote-sum'}}{{vote 'down' class='vote-down' selected_class='vote-voted'}}</div><div class="comment-container">On {{date created_at}}, {{author.name}} wrote: {{body}}</div></li>{{/each}}</ul>{{#form 'comment' class='comment-form'}}<div class="comment-avatar">{{user_avatar class='user-avatar'}}</div><div class="comment-container">{{wysiwyg 'body' rows='4'}}<div class="comment-form-controls">{{input type='submit'}}</div></div>{{/form}}</section></article>