Templates

As mentioned on the Source files page, every element in a source file must have a corresponding template. The template is effectively a function that takes the attributes and content of the element as arguments, and returns the appropriate HTML. Within a template, variable references are indicated by surrounding them with {{ and }}. Information about the source file element is stored in the special variable this. For example, you can refer to the content of the element like this: {{this.content}}. If the element has a name attribute, you could reference it like this: {{this.name}}.

In many cases, a template does nothing more than variable substitution. For example, a template for the event-listing element might look like this:

<section class="event-listing">
  <h1 class="event-listing__name">{{this.name}}</h1>
  <div class="event-listing__date">{{this.month}}/{{this.day}}/{{this.year}}</div>
  <div class="event-listing__location">{{this.location}}</div>
  <div class="event-listing__price">{{this.price}}</div>
  <p class="event-listing__description">
    {{this.content}}
  </p>
</section>

However, as templates are expanded by Jinja, you can do anything that is supported by a Jinja template. For example, it might be convenient to have a short-hand way to create simple tables in a document, something like this:

<table>
      | Hot | Cold
Dry   | 24  | 31
Rainy | 17  | 19
</table>

The following template takes the content of this element and arranges it into a proper HTML table:

<div class="content-table-container">
  <table class="content-table">
    {% for row in this.content.split('\n') %}
    <tr>
      {% for cell in row.split('|') %}
      <td>{{ cell.strip() }}</td>
      {% endfor %}
    </tr>
    {% endfor %}
  </table>
</div>

You may have noticed that in both of these examples, classes were used on some of the HTML elements. For more information on how Salal supports styling, see Using CSS styles.