Conditional text
Using resource bundles, you can implement conditional text in your templates' output. Conditional text has different values depending on a variable's value. Examples of conditional text include the following:
Localization—Display "snail" in English or "escargot" in French.
Plurals—Display "one doughnut" for singular or "two doughnuts" for plural.
Variants–Display "written by" if the content type is an article or "recorded by" if the content type is a video.
Styleguide uses the nodejs module messageformat.js to evaluate conditional text.
Evaluating plurals
You can use a resource bundle and the helper {{format}}
to conditionally output the singular or plural form of a noun, or to output numerals versus numbers. The example in this section uses a data file, template, and properties file to output the singular or plural form of the number of search results based on a passed quantity.
{{!-- File name SearchResults.hbs --}} {{#block "SearchResults"}} {{#element "numberReturned"}} 1 <div>{{format "searchResultMessage" count=this}}</div> 2 {{/element}} {{/block}}
Provides the context for the element | |
Performs a call to message formatter |
# File name SearchResults_en.properties searchResultMessage=There {count, plural, =0{are no results} one{is 1 result} other{are # results}}.
In the previous snippet, the message formatter searchResultMessage
receives a single parameter count
passed from the previous template. The message formatter then outputs the correct form of the plural based on the value of the parameter count
. At runtime, Styleguide evaluates and outputs the plural form as follows:
<div>There are 12 results.</div>
Textual variants
You can use a resource bundle and the helper {{format}}
to output textual variants using logic similar to Java's switch
statement. The example in this section uses a data file, template, and properties file to output "written by" for articles, "recorded by" for videos, and "submitted by" for any other content type.
{{!-- File name Byline.hbs --}} {{#block "Byline"}} {{#element "authorName"}} 1 <div>{{format "bylineMessage" authorName=this}}</div> 2 {{/element}} {{/block}}
Provides the context for the element | |
Performs a call to message formatter |
# File name Byline_en.properties bylineMessage={type, select, article {Written by} video {Recorded by} other {Submitted by}} {authorName}
In the previous snippet, the message formatter bylineMessage
receives a single parameter type
passed from the previous template. The message formatter then evaluates the select
statement based on the value of the parameter type
. At runtime, Styleguide evaluates and outputs the variant as follows:
<div>Written by Beau Tye</div>