JSON-T Directives

Directives in JSON-T are like commands. They tell the renderer how to render a section of JSON. You can identify them because they use an extra dot, and they often come in pairs (ex.{.section foo}).

Section

Sections do most of the work in JSON Template. They allow you to "zoom in" on a part of the JSON context, removing duplicated dot notation prefixes throughout a section of code. Here are two examples, one using a section and one without:

<!-- JSON-T using section -->

{.section website}
  {siteTitle}
{.end}

<!-- JSON-T using dot notation -->

{website.siteTitle}

There are two things you need to know about Section and Repeated Section:

1. The content inside a section will only display if the section exists
2. Sections define scope, meaning they set the root for any data tags within

Repeated Section

<!-- super basic repeated section example -->

{.repeated section items}
  If there are any items, repeat this info for each item
{.end}

NOTE: Inside a repeated section you can number each item with an instance of {@index} which outputs the current index of the item. Index numbers start with 0.

Or Clause

You can use an or statement within a section or repeated section to display something if the condition of the section or repeated section is not met ... for example, if the section is missing or false:

<!-- super basic or statement -->

{.section item}
  Item exists.
{.or}
  Item does not exist.
{.end}

Alternates With Clause

Within a repeated section, the alternates with allows you to insert delimiters between each item that is repeated. Handy for commas, slashes or even horizontal rules, this block is expanded in between every pair of repeating sections.

{.repeated section items}
  This stuff shows for each item.
{.alternates with}
  ------ {# show this dashed line in between each item}
{.end}

Var Directive

The var directive allows you to temporarily store a value for reference later. This can be useful along with sections to keep code concise and legible.

{.var @myTitle website.siteTitle}

A var allows you to create a variable and then use it later within any section or repeated section within the current JSON-T file. Here's an example:

{.var @firstImg items.0}
{.var @pageThumb collection.mainImage}

{.section collection}
  <div class="wrapper{.if @firstImg} has-image{.end}">
    <div class="thumbnail-container">
      <img {@pageThumb|image-meta} data-load="false" />
    </div>
  </div>
{.end}

Comment Directive

Occasionally, you may want a comment that would not end up rendering in your HTML. This JSON-T comment is going to accomplish that for you. There are two types of comments available, single line and multiline.

{# This is a single line comment}

{##BEGIN}
    This is a longer, more verbose,
    mulitline comment for when
    you have much more to say
{END##}