Helpers

Helpers

Helpers are template expressions that perform certain actions. Help Center has the following kinds of helpers:

• Built-in helpers- block helpers from Handlebars available in all templates
• Global helpers- custom helpers available in all templates
• Shared helpers- custom helpers available only in specific templates
• Advanced helpers- global and shared custom helpers that provide advanced functionality

Note:Some helpers output different HTML based on your theme's Templating API version. These differences are noted in the helper's documentation. To check your theme's version, seeAbout Guide templating versionsin Zendesk help.

Built-in helpers

Help Center templates support the following built-in Handlebars block helpers:

• if
• unless
• each
• with

To learn how to use them, seeHandlebars built-in helpersin the Handlebars docs.

Global helpers

In addition to the built-in Handlebars helpers listed above, Help Center provides the following custom helpers, available in all templates:

• asset
• calc
• compare
• concat
• contains
• date
• dc
• excerpt
• filter
• is
• isnt
• json_stringify
• link
• not
• page_path
• slice
• 搜索
• t
• user_avatar
• user_name

Shared helpers

There are also some other custom helpers that are page specific and therefore are only available in certain pages:

• breadcrumbs
• form
• pagination
• share
• subscribe
• vote
• change_password
• my_profile

asset helper

{{asset 'filename'}}

Inserts the relative path of the specified asset.

Parameters

• filenamethe filename of the asset

Attributes

• prefix(optional) adds a prefix to the filename.
• suffix(optional) adds a suffix to the filename.
• cdn="legacy"(optional) specifies whether or not to use the legacy CDN for this asset to maintain legacy behavior for older themes. Only available for customers who migrated a theme to the new theming experience. For any new customers who created a Help Center after November 2017, this attribute is not necessary and should not be set.

Availability

• All pages

Example

            

             
<scriptsrc="{{asset'jquery_plugin.js'}}">script><imgsrc="{{asset'background_image.png'}}"/><imgsrc="{{asset category.id prefix='image-'suffix='.png'}}"/>
            

Output

            

             
<scriptsrc="/zendesk_cdn_path/jquery_plugin.js">script><imgsrc="/zendesk_cdn_path/background_image.png"/><imgsrc="/zendesk_cdn_path/image-12345.png"/>
            

calc helper

(calc left "operator" right)

Subexpression返回一个算术运算的结果. If the operation is invalid and cannot be safely performed,nilis returned.

You can also use the helper in a normal expression:

{{calc 1 "+" 1}}

The example renders2.

Parameters

• leftthe left operand of the arithmetic operation.
• operator之一+,-,*,/,%,**.
• rightthe right operand of the arithmetic operation.

Attributes

• float(optional, boolean) the operation is performed with floating-point arithmetics. Default:false.

Availability

• All pages

Example

            

             
You have {{calc settings.badge_count "-" user.badges.length)}} badges left to earn.
            

Output

Givensettings.badge_countis25anduser.badges.lengthis10:

            

             
You have 15 badges left to earn.
            

concat helper

(concat“foo”“酒吧”)

Subexpressionthat concatenates up to 10 string arguments. Any argument beyond the 10th string is ignored. If any of the arguments are not strings, the helper returnsnil.

You can use the helper in a normal expression:

{{concat "foo" "bar"}}

The example rendersfoobar.

Parameters

• str1(optional, string) First string to concatenate
• str2(optional, string) Second string to concatenate
• strN(optional, string) Nth string to concatenate

Attributes

None.

Availability

• All pages

Example

            

             
{{concat "a" "b" "c"}}
            

Output

            

             
abc
            

contains helper

            

             
{{#contains haystack needle}}...{{/contains}}
            

Use thecontainshelper to check if one string is contained within another, and execute a template block conditionally. The expression evaluatestrueif theneedlecan be found within thehaystack. Otherwise, it returnsfalse. The check is case-sensitive.

If the expression evaluates totrue, thecontainsblock is executed, if given. Otherwise, theelseblock is executed, if given.

Parameters

• haystack(required, string)
• needle(required, string)

Attributes

None.

Availability

• All pages

Example

            

             
{{#contains article.title "Urgent"}}<strong>{{article.title}}strong>{{else}}{{article.title}}{{/contains}}
            

compare helper

(compare left "operator" right)

Subexpressionthat returns a boolean value representing the comparison result of 2 operands using a binary operator. If the operation is invalid and therefore cannot be safely performed, the helper returnsnil.

You can also use the helper in a regular expression:

{{compare 1 "=" 2}}

The example rendersfalse.

Parameters

• leftthe left operand of the comparison.
• operator之一the following:==,>,>=,<,<=.
• rightthe right operand of the comparison.

Attributes

None.

Availability

• All pages

Example

            

             
{{#if (compare user.badges.length ">" 0)}}You have earned {{user.badges.length}} badges!{{else}}You have not earned any badges, yet.{{/if}}
            

Output

Given the user has earned 2 badges:

            

             
You have earned 2 badges!
            

date helper

{{date timestamp}}

Formats a timestamp into a human-friendly string. The formatted string is localized for the supported languages.

Parameters

• timestampan ISO8601 timestamp such as "2015-04-23T13:32:58Z", typically expressed as a Help Center datetime property such asarticle.created_at

Attributes

• format(optional, string) displays the date in a specific format. Can be any of the following values:short,medium,longandfull
• timeago(optional, boolean) iftrue, inserts the date as time elapsed since the present. Example: "2 months ago". Default isfalse. Only one formatting option (eitherformatortimeago) can be specified at a time.formatwill take precedence if both are specified
• class(可选的字符串)HTML class to render

formatoptions

You can use any of the following available formats to control the display of date and time stamps. The examples are for the en-us locale, but the formats will differ based on the locale setting.

Availability

• All pages

Example

            

             
{{date article.created_at class='metadata'}}{{date article.created_at class='metadata' timeago=true}}{{date article.created_at class='metadata' format='short'}}
            

Output

            

             
<timedatetime="2015-01-23T13:32:58Z"class="metadata">January 23, 2015 13:32time><timedatetime="2015-01-23T13:32:58Z"class="metadata">2 months agotime><timedatetime="2015-01-23T13:32:58Z"class="metadata">01/23/2015time>
            

dc (dynamic content) helper

{{dc 'identifier'}}

Use thedchelper to show dynamic content translated according to the current locale.

Parameters

• identifierindicates the dynamic content to be inserted and translated

Ifidentifierdoesn't exist, a default message is shown.

See thisarticleto learn how to add new dynamic content.

Attributes

None.

Availability

• All pages

Example

            

             
{{dc 'example'}}{{dc 'foo'}}
            

Output

Supposing thatexampleis defined as dynamic content andfoois not:

            

             
This is an example.Could not find the placeholder for dynamic content named foo
            

excerpt helper

{{excerpt string}}

Inserts the first few lines of a content item such as an article or post. If the argument contains any HTML tags, they will be stripped out before the text truncation takes place.

Parameters

• stringa content item, usually expressed as a Help Center content property such asarticle.body

Attributes

• characters(optional, integer) the number of characters to display from the start of the item. Default is 120

Availability

• All pages

Example

            

             
{{excerpt article.body characters=100}}
            

Output

            

             
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqu...
            

filter helper

(filter collection on="property_name" attribute="string")

Subexpressionthat returns a collection on the specified property, containing those items whereallof the specified conditions match. Returns an empty collection in case of an error. Omittingonor specifying an unknown property name will cause an error. Specifying an attribute not listed in Attributes below will cause an error.

Parameters

• collectionan array of Curlybars objects such asuser.badges
• attributea condition such asstarts_withorcontains. See Attributes below for the full list

Attributes

• on(required, string) a string representing the property of the objects in the collection. The value of that property is the subject to the filtering rules. You can use dot notation to access nested properties. Example:author.name. All the remaining attributes are interpreted as filters to be applied to the specified property.
• starts_with(optional, string) a string value representing the asserted prefix of the subject.
• ends_with(optional, string) a string value representing the asserted suffix of the subject.
• contains(optional, string) a string value representing the asserted infix of the subject.
• equals(optional, any) a value representing the asserted identity of the subject.

Availability

• All pages

Example

            

             
{{#each (filter user.badges on="category_slug" starts_with="abc" ends_with="cba")}}Matching badge: {{category_slug}}{{/each}}
            

Output

            

             
Matching badge: abc1cbaMatching badge: abc2cbaMatching badge: abc3cba
            

is helper

            

             
{{#is 'left' 'right'}}...{{/is}}
            

Use theishelper to execute a template block conditionally, given an expression result. If the comparison evaluates totrue(the two values are equal), then theis块将executed, if given. Otherwise, if the comparison evaluates tofalse, theelse块将executed, if given. The comparison is always based on the===JS operator.

Parameters

• leftvalue that will be used in the comparison. This is required and can be a path, a string, a number a boolean or a variable
• rightvalue that will be used in the comparison. This is required and can be a path, a string, a number a boolean or a variable

Attributes

None.

Availability

• All pages

Example

            

             
{{#is article.author.name 'John'}}The author of the article is John.{{else}}The author of the article is not John.{{/is}}
            

isnt helper

            

             
{{#isnt 'left' 'right'}}...{{/isnt}}
            

Use theisnthelper to execute a template block conditionally, given an expression result. If the comparison evaluates totrue(the two values are not equal), then theisnt块将executed, if given. Otherwise, if the comparison evaluates tofalse, theelse块将executed, if given. The comparison is always based on the!==JS operator.

Parameters

• leftvalue that will be used in the comparison. This is required and can be a path, a string, a number a boolean or a variable
• rightvalue that will be used in the comparison. This is required and can be a path, a string, a number a boolean or a variable

Attributes

None.

Availability

• All pages

Example

            

             
{{#isnt article.author.name 'John'}}The author of the article is not John.{{else}}The author of the article is John.{{/isnt}}
            

json_stringify helper

Converts a normal string into a JSON string that you can use in your JavaScript.

            

             
{{json_stringify 'string'}}
            

Parameters

• stringa normal string with unescaped newlines, quotes, or unicode characters

Attributes

None.

Availability

• All pages

Example

            

             
<script>vartitle={{json_stringify article.title}};script>
            

Output

            

             
<script>vartitle="Setting the \"enduser\" value";script>
            

link helper

{{link 'identifier'}}

Use thelinkhelper to link to other pages in Help Center. This helper is available in all page templates.

This will render both the HTML tag and link text. A default string in the proper locale is used for the link text. For example, thenew_requestidentifier will render the default "Submit a Request" string as a link. You can also customize the string by using the block version of thelinkhelper. Example:

            

             
{{#link 'identifier'}}Custom link text{{/link}}
            

If you only need a URL, see thepage_path helper.

The link helper also takes care of hiding the link from certain users. For example, in a restricted Help Center you may want to hide the "Submit a Request" link from unregistered users. You can display alternative text when the link is hidden. Example:

            

             
{{#link 'identifier'}}Link text{{else}}This link is not available for you{{/link}}
            

Note that the alternative text won't be wrapped in a link tag.

Parameters

• identifierindicates the destination page to link to

You can link to the following destination pages:

Attributes

Varies from identifier to identifier. Seebelow.

Availability

• All pages

Example

            

             
{{link 'new_request' class='submit-a-request' role='button'}}{{#link "my_activities" class="my-activities" role="button"}}{{t "my_activites"}}{{else}}<span>Activities are not available for youspan>{{/link}}
            

Output

            

             
<ahref="/new_request"class="submit-a-request"role="button">Submit a Requesta><span>Activities are not available for youspan>
            

Link identifiers

help_center link

{{link 'help_center'}}

Displays a link to the Help Center home page.

Attributes

• class(optional, string) an HTML class
• role(optional, string) an HTML role
• selected(可选的字符串)HTML aria-selected attribute. Can be "true" or "false"
• target(可选的字符串)HTML target attribute

Availability

• All templates

Example

            

             
{{link 'help_center' class='help-center-link'}}
            

new_request链接

{{link 'new_request'}}

Displays a link to the page for submitting a new request.

If you useticket forms(available in the Enterprise plan), you can link to a specific ticket form with theticket_form_idattribute. You can get the id from the administrator interface in Zendesk Support or from theTicket forms API.

Attributes

• class(optional, string) an HTML class
• role(optional, string) an HTML role
• selected(可选的字符串)HTML aria-selected attribute. Can be "true" or "false"
• target(可选的字符串)HTML target attribute
• ticket_form_id(可选的字符串)id of the ticket form to display. Requires a ticket form that's visible to end users. Available only on the Enterprise plan.

Availability

• All templates

Examples

            

             
{{link 'new_request' class='submit-a-request' role='button'}}{{link 'new_request' ticket_form_id='1234'}}
            

my_activities link

{{link 'my_activities'}}

Displays a link to the page with the end user's activities. If signed in as an agent or Help Center manager, the link is not displayed.

Attributes

• class(optional, string) an HTML class
• role(optional, string) an HTML role
• selected(可选的字符串)HTML aria-selected attribute. Can be "true" or "false"
• target(可选的字符串)HTML target attribute

Availability

• All templates

Example

            

             
{{link 'my_activities' class='my-activities' role='button'}}
            

requests link

{{link 'requests'}}

Displays a link to the page listing the end user's requests. The link is not displayed if the user is anonymous.

Attributes

• class(optional, string) an HTML class
• role(optional, string) an HTML role
• selected(可选的字符串)HTML aria-selected attribute. Can be "true" or "false"
• sort_by(可选的字符串)request attribute to sort by. Valid values:created_atandupdated_at.
• target(可选的字符串)HTML target attribute

Availability

• All templates

Example

            

             
{{link 'requests' class='requests-link'}}
            

request link

Displays a link to the page showing a single request.

Attributes

• id(required, integer) the id of a request
• class(optional, string) an HTML class
• target(可选的字符串)HTML target attribute

Availability

• All templates

Example

            

             
{{link 'request' id=request.id, class='followup-link'}}
            

contributions link

{{link 'contributions'}}

Displays a link to the page listing the end user's community contributions. The link is not displayed if the user is anonymous.

Attributes

• class(optional, string) an HTML class
• role(optional, string) an HTML role
• selected(可选的字符串)HTML aria-selected attribute. Can be "true" or "false"
• target(可选的字符串)HTML target attribute

Availability

• All templates

Example

            

             
{{link 'contributions' class='contributions-link'}}
            

订阅链接

{{link 'subscriptions'}}

Displays a link to the page listing the content items that the end user is following. The link is not displayed if the user is anonymous.

Attributes

• class(optional, string) an HTML class
• role(optional, string) an HTML role
• selected(可选的字符串)HTML aria-selected attribute. Can be "true" or "false"
• target(可选的字符串)HTML target attribute

Availability

• All templates

Example

            

             
{{link 'subscriptions' class='subscriptions-link'}}
            

community link

{{link 'community'}}

Displays a link to the community main page. The link is not displayed if the community is disabled.

Attributes

• class(optional, string) an HTML class
• role(optional, string) an HTML role
• selected(可选的字符串)HTML aria-selected attribute. Can be "true" or "false"
• target(可选的字符串)HTML target attribute

Availability

• All templates

Example

            

             
{{link 'community' class='community-entrance' role='button'}}
            

主题link

{{link 'topics'}}

Displays a link to the page that lists all community topics. The link is not displayed if the community is disabled.

Attributes

• class(optional, string) an HTML class
• role(optional, string) an HTML role
• selected(可选的字符串)HTML aria-selected attribute. Can be "true" or "false"
• target(可选的字符串)HTML target attribute

Availability

• All templates

Example

            

             
{{link'topics'class='community-topics-link'role='button'}}
            

sign_in link

{{link 'sign_in'}}

If your Help Center requires users to sign in and the user is not signed-in, displays a link to the page for signing-in.

Attributes

• class(optional, string) an HTML class
• role(optional, string) an HTML role
• selected(可选的字符串)HTML aria-selected attribute. Can be "true" or "false"
• target(可选的字符串)HTML target attribute

Availability

• All templates

Example

            

             
{{link 'sign_in' class='submit-a-request'}}
            

sign_out link

{{link 'sign_out'}}

Render a link to the home page for signing-out. The link will be hidden in preview mode.

Attributes

• class(optional, string) an HTML class
• role(optional, string) an HTML role
• selected(可选的字符串)HTML aria-selected attribute. Can be "true" or "false"
• target(可选的字符串)HTML target attribute

Availability

• All templates

Example

            

             
{{link 'sign_out' class='sign-out'}}
            

user_profile link

{{link 'user_profile' id=user.id}}

Displays a link to the user's profile page

• If user profiles are enabled, links to the user's profile
• If user profiles are disabled, links to the agent interface if the current user is an agent. Otherwise displays the body without linking

Attributes

• id(required, id) the user's id
• class(optional, string) an HTML class
• role(optional, string) an HTML role
• selected(可选的字符串)HTML aria-selected attribute. Can be "true" or "false"
• target(可选的字符串)HTML target attribute

Availability

• All templates

Example

On the User Profile page:

            

             
{{link 'user_profile' id=user.id class='user-profile-link'}}
            

On the Article Page:

            

             
{{#each comments}}{{link 'user_profile' id=author.id class='user-profile-link'}}{{/each comments}}
            

posts link

{{link 'posts'}}

Displays a link to the posts page.

Attributes

• class(optional, string) an HTML class
• role(optional, string) an HTML role
• selected(可选的字符串)HTML aria-selected attribute. Can be "true" or "false"
• target(可选的字符串)HTML target attribute

Availability

• All templates

Example

            

             
{{link 'posts' class='posts-link'}}
            

搜索result link

{{link 'search_result'}}

Displays a link to the search results page. If thecontent_tag_idattribute is used, it links to the search page rendering the results that are tagged with the given content tag.

Attributes

• class(optional, string) an HTML class
• role(optional, string) an HTML role
• selected(可选的字符串)HTML aria-selected attribute. Can be "true" or "false"
• target(可选的字符串)HTML target attribute
• content_tag_id(可选的字符串)id of the content tag

Availability

• All templates

Example

            

             
{{link 'search_result' class='search-link'}}
            

not helper

(not value)

Subexpressionthat returns the negated value of the argument.

Parameters

• valuethe value to be negated.

Attributes

None.

Availability

• All pages

Example

            

             
{{if (not settings.supress_warnings)}}You have been warned.{{/if}}
            

Output

Givensettings.supress_warningsis set tofalse:

            

             
You have been warned.
            

page_path helper

{{page_path 'identifier'}}

If you don't need the HTML and link text rendered by thelink helper, you can use thepage_pathhelper. It's available in all Help Center pages.

Parameters

• identifierindicates the destination page to link to

The identifiers are the same as thelink helper.

Attributes

The attributes are also the same, except for the CSS-related ones likeclass,roleandselected, which aren't supported.

Availability

• All pages

Example

            

             
{{page_path 'new_request' ticket_form_id='1234'}}
            

Output

            

             
/path_to_request_form
            

搜索helper

{{search}}

Inserts a search box.

Parameters

None.

Attributes

• scoped(optional, boolean) Ifscopedis true and the helper is on the category, section, or article page, searches only the articles in the current category. If the helper is on the topic or post page, searches only the posts in the current topic. Default is false.
• submit(optional, boolean) If true, render the submit button. Default is false.
• instant(optional, boolean) If true, enablesInstant Searchto provide HC article suggestions while you type in the search box. Instant Search article suggestions do not respect thescopedparameter if it is set.
• class(optional, string) class name to be added to the form
• placeholder(optional, string) placeholder value for the search input element

Availability

• All pages

Example

            

             
{{search}}
            

Output

If inserted in the Home page:

            

             
<formaccept-charset="UTF-8"action="/hc/en-us/search"class="搜索"method="get"role="搜索"><inputname="utf8"type="hidden"value="✓"/><inputid="query"name="query"placeholder="Search"type="搜索"/><inputname="commit"type="submit"value="Search"/>form>
            

slice helper

(slice collection start length)

Subexpressionthat returns a sub-array starting at thestartindex and continuing forlengthelements. Negative indices count backward from the end of the array. Returns an empty array if the starting index is out of range.

Parameters

• collectionan array of Curlybars objects such asuser.badges.
• starta number representing the start index of the array.
• lengtha number representing the number of elements to follow after the start index.

Attributes

None.

Availability

• All pages

Example

            

             
Positive start index:{{#each (slice user.badges 0 3)}}- Matching badge: {{name}}{{/each}}Negative start index:{{#each (slice user.badges -3 3)}}- Matching badge: {{name}}{{/each}}
            

Output

Given an array of badges with the names: 1, 2, 3, 4, 5:

            

             
Positive start index:- Matching badge: 1- Matching badge: 2- Matching badge: 3Negative start index:- Matching badge: 3- Matching badge: 4- Matching badge: 5
            

user_avatar helper

{{user_avatar class='user_avatar'}}

Use theuser_avatarhelper to insert the current user avatar image. An image is always shown, anonymous users see a default fallback avatar image. For performance reasons Help Center uses a special internal data attribute in the generated HTML image element to load the actual image file using JavaScript.

Parameters

None.

Attributes

• class(optional, string) a space separated list of class names that will be added to the generatedtag

Availability

• All pages

Example

            

             
{{user_avatar class='rounded-avatar'}}
            

Output

            

             
<imgalt="Avatar"class="rounded-avatar"src="https://secure.gravatar.com/avatar/123456"/>
            

user_name helper

{{user_name}}

Use theuser_namehelper to insert the current user name or alias. For performance reasons Help Center uses a special internal data attribute in an empty HTML span element to load the name using JavaScript.

Parameters

None.

Attributes

None

Availability

• All pages

Example

            

             
{{user_name}}
            

Output

            

             
<spandata-user-name="[user name or alias]">[user name or alias]span>
            

t (translation) helper

{{t 'key'}}

Use thethelper to show translated texts for each locale available in your Help Center.

Parameters

• keythe key for the translated text. See theavailable keysbelow.

Attributes

Some keys accept one or more of the following optional attributes.

Availability

• All pages

Example

            

             
{{t 'back_to_homepage'}}{{t 'post_count' count=1}}{{t 'show_all_articles' count=section.article_count}}{{t 'found_helpful' upvotes=article.upvote_count total=article.vote_count}}
            

Output

            

             
Take me back to the home page7 postsSee all 13 articles4 out of 5 found this helpful
            

Available keys

You can use any of the following available keys to display translated strings.

Available keys for table headers:

Available keys for form field labels:

breadcrumbs helper

{{breadcrumbs}}

Inserts a breadcrumbs navigation element to identify the location of the current page.

Parameters

None.

Attributes

None.

Availability

• Article page
• Category page
• Contributions page
• Request page
• Request List page
• Search Results page
• Section page
• Following page
• New Community Post page
• New Request page
• Community Post page
• Community Topic List page
• Community Topic page
• Community Post List page

Example

            

             
{{breadcrumbs}}
            

Output

The markup the helper generates depends on several factors, including:

• The theme's Templating API version
• The page it's used on
• 特定的文章,部分,和类别in your help center
• The name of your help center

For example, on the Article page, the following is the helper's output for an article within the subsection "Announcements subsection", the section "Announcements", and the category "General":

              

               
<olclass="breadcrumbs"><lititle="My Help Center"><ahref="/hc/en-us">My Help Centera>li><lititle="General"><ahref="/hc/en-us/categories/123-General">Generala>li><lititle="Announcements"><ahref="/hc/en-us/sections/456-Announcements">Announcementsa>li><lititle="Announcements subsection"><ahref="/hc/en-us/sections/789-Announcements-subsection">Announcements subsectiona>li>ol>
              

              

               
<navaria-label="Current location"><olclass="breadcrumbs"><li><ahref="/hc/en-us">My Help Centera>li><li><ahref="/hc/en-us/categories/123-General">Generala>li><li><ahref="/hc/en-us/sections/456-Announcements">Announcementsa>li><li><ahref="/hc/en-us/sections/789-Announcements-subsection">Announcements subsectiona>li>ol>nav>
              

form helper

Some pages in Help Center include one or more forms. Form helpers simplify building forms and form elements.

            

             
{{#form form_name}}...{{/form}}
            

This will safely insert an HTML form in the templates. See the page-specific documentation to find out which forms you can use in each template.

You must use the form helpers likelabel,input, andcheckboxto render the form fields. See morebelow.

Parameters

• form_name之一the following:comment,organization,post,request, orrequests

Attributes

• class(可选的字符串)HTML class to render
• id(可选的字符串)HTML id attribute to render

Availability

Example

            

             
{{#form 'comment' class='comment-form'}}...{{/form}}
            

Output

If inserted in an Article page:

            

             
<formclass="comment-form"accept-charset="UTF-8"action="/hc/articles/123456/comments"method="post"><inputname="utf8"type="hidden"value="✓">...form>
            

Form field helpers

Help Center provides the following form field helpers that must be used inside the form helper:

• input
• textarea
• checkbox
• label
• select
• multiselect
• required
• validate
• error

You can also use these advanced form field helpers:

• wysiwyg
• token_field

Identifiers

Identifiers distinguish similar fields inside the same form. The following identifiers are available:

input

{{input 'identifier'}}

Creates a textbox based on the given identifier.

Parameters

• identifierthe name of the field (optional). Depends on the page and the form that has the field. Seeidentifiers. In some cases, such as when you want to create a submit button, you don't need an identifier.

Attributes

• type(可选的字符串)type of the input, valid values are:text,submit,email,number. Default istext
• class(可选的字符串)HTML class to assign to the form
• id(可选的字符串)html id (only available if no identifier is given, otherwise the identifier will set this value)
• name(可选的字符串)HTML name. Only available if no identifier is given. Otherwise the identifier will set this value
• value(可选的字符串)value of the input
• label(可选的字符串)HTML placeholder. Only available if no identifier is given. Otherwise the identifier will set this value
• autofocus(optional, boolean) whether the input field is auto-focused or not. False by default
• required(optional, boolean) whether the input field is mandatory or not

Examples

            

             
{{input type='submit' name='submit' id='submit-button'}}{{input 'first_name' type='text' class='small'}}{{input type='text' class='small' id='first_name' name='user[first_name]' label='Please insert your name'}}
            

textarea

{{textarea 'identifier'}}

Creates a textarea based on the given identifier.

Parameters

• identifierthe name of the field (required). Depends on the page and the form that has the field. Seeidentifiers.

Attributes

• class(可选的字符串)HTML class to assign to the form
• rows(optional, string) specifies the visible height of a text area, in lines
• cols(optional, string) specifies the visible width of a text area

Example

            

             
{{textarea 'body' rows='4' class='awesome'}}
            

checkbox

{{checkbox 'identifier'}}

Creates a checkbox based on the given identifier.

Parameters

• identifierthe name of the field (required). Depends on the page and the form that has the field. Seeidentifiers.

Attributes

• class(可选的字符串)HTML class to assign to the form

Example

            

             
{{checkbox 'mark_as_solved' class='red'}}
            

label

{{label 'identifier'}}

Creates a label based on the given identifier.

Parameters

• identifierthe name of the field (required). Depends on the page and the form that has the field. Seeidentifiers.

Attributes

• class(可选的字符串)HTML class to assign to the form
• for(可选的字符串)form element the label is bound to

Example

            

             
{{label 'mark_as_solved' for='request-status-select' class='red'}}
            

select

{{select 'identifier'}}

Creates a select input based on the given identifier.

The markup this helper generates depends on several factors, including:

• The identifier
• The theme's Templating API version

Parameters

• identifierthe name of the field (required). Depends on the page and the form that has the field. Seeidentifiers.

Attributes

• class(可选的字符串)HTML class to assign to the form

Example

            

             
{{select 'mark_as_solved' class='red'}}
            

multiselect

{{multiselect 'identifier'}}

Creates a multiselect input based on the given identifier.

Parameters

• identifierthe name of the field (required). Depends on the page and the form that has the field. Seeidentifiers.

Example

            

             
{{multiselect 'content_tags'}}
            

required

            

             
{{#required 'identifier'}}block{{/required}}
            

Executes the block if the 'identifier' field is required.

Parameters

• identifierthe name of the field (required). Depends on the page and the form that has the field. Seeidentifiers.

Example

            

             
{{#required 'mark_as_solved'}}This is required.{{else}}This is not required.{{/required}}
            

validate

            

             
{{#validate 'identifier'}}block{{/validate}}
            

Executes the block if the 'identifier' field has errors.

Parameters

• identifierthe name of the field (required). Depends on the page and the form that has the field. Seeidentifiers.

Example

            

             
{{#validate 'mark_as_solved'}}The data introduced has errors.{{else}}The data introduced is right.{{/validate}}
            

error

{{error 'identifier'}}

Renders the error message associated with the given identifier, if any.

Parameters

• identifierthe name of the field (required). Depends on the page and the form that has the field. Seeidentifiers.

Example

            

             
{{error 'mark_as_solved'}}
            

pagination helper

{{pagination}}

Renders pagination elements that let a user browse more than one page.

This will only render if the number of elements is greater than the size of a page.

Parameters

• identifierindicates the array to paginate. Only available in the section page.

The following identifiers are available:

Attributes

None.

Availability

• Home page
• Article page
• Contributions page
• Request List page
• Search Results page
• Section page

Example

            

             
{{pagination}}
            

Output

On the second page if inserted in a Section page:

            

             
<navclass="pagination"><ul><liclass="pagination-first"><ahref="/hc/en-us/sections/123-MySection">«a>li><liclass="pagination-prev"><ahref="/hc/en-us/sections/123-MySection"rel="prev">‹a>li><li><ahref="/hc/en-us/sections/123-MySection"rel="prev">1a>li><liclass="pagination-current"><span>2span>li><li><ahref="/hc/en-us/sections/123-MySection?page=3"rel="next">3a>li><liclass="pagination-next"><ahref="/hc/en-us/sections/123-MySection?page=3"rel="next">›a>li><liclass="pagination-last"><ahref="/hc/en-us/sections/123-MySection?page=3">»a>li>ul>nav>
            

share helper

{{share}}

Adds elements for sharing content on social media.

Parameters

None.

Attributes

None.

Availability

• Article page

Example

            

             
{{share}}
            

Output

If inserted in an Article page:

            

             
<ulclass="share"><li><ahref="[sharing url to Facebook]"class="share-facebook">Facebooka>li><li><ahref="[sharing url to Twitter]"class="share-twitter">Twittera>li><li><ahref="[sharing url to LinkedIn]"class="share-linkedin">LinkedIna>li><li><ahref="[sharing url to Google]"class="share-googleplus">Google+a>li>ul>
            

Note that the sharing urls might change in the future if the social media service changes their sharing API.

subscribe helper

{{subscribe}}

Inserts a "Follow" button that gives visitors the option of receiving update notifications by email. A section follower is notified when somebody adds an article or comment. A topic follower is notified when somebody adds a post or a comment. An article or post follower is notified when somebody adds a comment. An organization follower is notified when somebody in the same organization creates a new request. A user follower is notified when the user adds an article, post, or comment.

Parameters

None.

Availability

• Section page
• Article page
• Topic page
• Post page
• Request List page
• User Profile page

Example

            

             
{{subscribe}}
            

Output

在文章页面,如果用户没有订阅:

            

             
<buttondata-selected="false"aria-expanded="true"aria-haspopup="menu"type="button"id="[element id]">Followbutton>
            

In article page, if user is subscribed:

            

             
<buttondata-selected="true"aria-expanded="true"aria-haspopup="menu"type="button"id="[element id]">Unfollowbutton>
            

vote helper

{{vote 'element' class='element-class' selected_class='element-selected-class'}}

Use thevotehelper to insert vote-related elements. These elements must apply to a specific votable resource (i.e. an article). When the user is authenticated and therefore able to vote, all vote elements are synced (i.e. if user votes up in an article, its labels and counters update their values without refreshing the page). When the user is not authenticated, the 'up' and 'down' buttons act like normal links, redirecting user to the sign in page.

Parameters

• element之一the following:up,down,label,sum, orcount

Attributes

• class(可选的字符串)class of the element
• selected_class(可选的字符串)class to be added to the element when it is selected (applies to 'up' and 'down' elements only)
• role(可选的字符串)HTML role to render. Only available in Templating API v1.

Availability

• Article Page (within anarticle object)
• Article Page (within anarticle comment object)
• Post Page (within apost object)
• Post Page (within apost comment object)

Example

Supported variables vary based on your Templating API version.

              

               
{{#with article}}{{投票“了”类= article-vote-up selected_class='article-voted' role='button'}}{{投票“下来”类= article-vote-down selected_class='article-voted' role='button'}}{{vote 'label' class='article-vote-label'}}{{vote 'count' class='article-vote-count'}}{{vote 'sum' class='article-vote-sum'}}{{/with}}
              

              

               
{{#with article}}{{投票“了”类= article-vote-up selected_class='article-voted'}}{{投票“下来”类= article-vote-down selected_class='article-voted'}}{{vote 'label' class='article-vote-label'}}{{vote 'count' class='article-vote-count'}}{{vote 'sum' class='article-vote-sum'}}{{/with}}
              

Output

The rendered output varies based on your Templating API version.

              

               
<arole="button"rel="nofollow"class="article-vote-up article-voted"aria-selected="true"title="Yes"href="#">a><arole="button"rel="nofollow"class="article-vote-down"aria-selected="false"title="No"href="#">a><spanclass="article-vote-label">2 out of 3 found this helpfulspan><spanclass="article-vote-count">3span><spanclass="article-vote-sum">1span>
              

              

               
<arole="button"rel="nofollow"class="article-vote-up article-voted"title="Yes"href="path_to_sign_in">a><arole="button"rel="nofollow"class="article-vote-down"title="No"href="path_to_sign_in">a><spanclass="article-vote-label">2 out of 3 found this helpfulspan><spanclass="article-vote-count">3span><spanclass="article-vote-sum">1span>
              

              

               
<buttontype="button"class="article-vote-up article-voted"aria-pressed="true">Yesbutton><buttontype="button"class="article-vote-down"aria-pressed="false">Noa><spanclass="article-vote-label">2 out of 3 found this helpfulspan><spanclass="article-vote-count">3span><spanclass="article-vote-sum">1span>
              

change_password helper

{{change_password}}

Inserts a button that lets end users launch the Change Password modal. The button will only appear for end users and if changing passwords is available.

Attributes

• class(可选的字符串)class of the element
• role(可选的字符串)HTML role to render

Example

            

             
{{change_password}}
            

Output

            

             
<buttondata-action="change-password"title="Opens a dialog">Change passwordbutton>
            

Availability

• Header
• Footer
• User Profile page

my_profile helper

{{my_profile}}

If user profiles are enabled, the helper renders a link to the user's user profile page.

If user profiles are disabled, but endusers can edit profile data, a button to launch a Edit Profile modal is rendered.

You can also customize the string by using the block version of themy_profilehelper.

Attributes

• class(optional, string) an HTML class
• role(optional, string) an HTML role

Example

            

             
{{my_profile}}{{#my_profile}}Custom My Profile text{{/my_profile}}
            

Output

if user profiles are enabled:

            

             
<ahref="[path to user profile]">My profilea><ahref="[path to user profile]">Custom My Profile texta>
            

if user profiles are disabled, but users can edit profile data:

            

             
<buttondata-action="edit-profile">Edit my profilebutton><buttondata-action="edit-profile">Custom My Profile textbutton>
            

Availability

• Header
• Footer