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
brand	object	A brand object representing the current brand
user	object	A user object representing the current user

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>