Templating Rules

Render context

A render context is a JSON structure that includes information about the current context. For example a single post could look like this:

{
   "title": "My post title",
   "link": "https://mysite.com/link-to-my-post" 
}

Content interpolation

To inject content from a render context into your template, use the following syntax: {{title}}

For example:

<a class="post" href="{{link}}">
   <h2 class="post__title">{{title}}<h2>
</a>

Conditions

To render content when a specific condition is met, you can use the following syntax:

<a href="{{homeUrl}}" class="header__home-link">
   <!-- render the following if the logoPath property evaluates truthy -->
   {{#logoPath}}
      <img src="{{logoPath}}" class="header__home-link-image">
   {{/logoPath}}
   <!-- render the following if the logoPath property evalutes falsy -->
   {{!#logoPath}}
      <span class="header__home-link-title">{{projectName}}</span>   
   {{/logoPath}}
</logo>

This sample code would render the project's logo if a logo has been uploaded, otherwise the project name would be rendered.

The following conditions evaluate falsy:

• empty array,

• false,

• undefined property.

Inline conditions

Inline conditions can be used to conditionally render specific content within a single line of code (for example a class name). To do this you can use {{# myCondition : render-if-true #}}, or the negated condition {{!# myCondition : render-if-false #!}}:

<article class="post {{!# image : post--no-img #!}}">
   <!-- post content ... -->
</article>

Arrays

Iterating over an array is done in the same way as defining conditions. Let's consider the following array of posts that should be rendered:

{
   "posts": [
      {"title": "My post title", link: "https://mysite.com/post-1"},
      {"title": "My post 2 title", link: "https://mysite.com/post-2"}
      {"title": "My post 3 title", link: "https://mysite.com/post-3"}
   ]
}

To render those in a list, you can use the following template code:

<ul class="post-list">
   {{#posts}}
      <li class="post-list__entry"><a href="{{link}}">{{title}}</a></li>
   {{/posts}}
</ul>

To query a post at a specific index, you can use {{#posts[0]}}, for example:

{{#posts[0]}}
<article class="featured__post">{{title}}</article>
{{/posts[0]}}

To iterate over a part of an array, you can specify the lower and the upper index (e.g. {{#posts[1-5]}} — this would iterate from the second to the sixth posts). You can also omit the start or the end index, e.g. {{#posts[1-]}} would start at the second post and would iterate until the end of the array is reached.

Querying object properties

To query a specific property of an object, you can use the following syntax:

{{contact.street}}

For example, to render the contact information you could use the following template: