Support and Documentation

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.

{
  "_template": "SearchResults.hbs", 1
  "numberReturned": 12 2
}

1

Provides the name of the corresponding template.

2

Provides the value for the element numberReturned.

{{!-- File name SearchResults.hbs --}}
{{#block "SearchResults"}}
    {{#element "numberReturned"}} 1
        <div>{{format "searchResultMessage" count=this}}</div> 2
    {{/element}}
{{/block}}

1

Provides the context for the element numberReturned.

2

Performs a call to message formatter searchResultMessage in the file SearchResults_en.properties. (For an explanation of where to place resource bundles and how to name them, see Location of resource bundles.) The value passed to the message formatter is this, which evaluates to 12.

# 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.

{
  "_template": "Byline.hbs", 1
  "contentType": "article", 2
  "authorName": "Beau Tye" 3
}

1

Provides the name of the corresponding template.

2

Provides the value for the element contentType.

3

Provides the value for the element authorName.

{{!-- File name Byline.hbs --}}
{{#block "Byline"}}
    {{#element "authorName"}} 1
        <div>{{format "bylineMessage" authorName=this}}</div> 2
    {{/element}}
{{/block}}

1

Provides the context for the element authorName.

2

Performs a call to message formatter bylineMessage in the file Byline_en.properties. (For an explanation of where to place resource bundles and how to name them, see Location of resource bundles.) The value passed to the message formatter is this, which evaluates to article.

# 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>
. See also: