Airship Templating

Complete the Airship Schema tutorial before starting this Airship Templating. This explains how to render the pages and collections for this application.

Create Templates

If you run airship land after setting up your Airship Schema, all of the necessary templates will download in your project. categories.html and category.html be included but aren't necessary for this project and can be deleted.

If for some reason the necessary templates do not generate, you can create the following templates manually:

  • compartments/templates/root.html
  • compartments/templates/airship-schema.html
  • compartments/templates/airship-templating.html
  • compartments/templates/styling.html
  • compartments/templates/elements/index.html
  • compartments/templates/elements/show.html

In your Text Editor, the template files will be organized like this:

Classic Rendering Templates

Page Rendering

The __root__ page contains a "Github" field, "Description" field, and a "Body" field. The Airship Schema page, Airship Templating page and Styling page all have a "Body" field.

We display the fields with embedded handlebars expressions by variable_name. A handlebars expression is a {{, variable_name, followed by a }}.

Handlebars HTML-escapes values returned by a {{expression}}. Because the "Body" field's type contains HTML, a "triple-stash", {{{, must be used to render it.

/templates/styling.html

<div>
  <div class='container content'>
    <div class='body'>{{{ fields.body }}}</div>
  </div>
</div>

Collection Rendering

compartments/templates/elements/index.html will render all of our items from our Elements collection. Each item contains "Name", "Image", and "Description" fields. We need to render the "Name", "Image", and permalink for each item in the collection.

Use handlebar's each helper to iterate over the collection:

templates/elements/index.html

{{#each items}}
  <a href='/elements/view/{{ permalink }}' class='column is-3 element'>
    <div class='card'>
      <div class='card-image'>
        <figure class="image">
        {{#each fields.image}}
          <img src="{{ url }}" alt="{{ fields.name }}">
        {{/each}}
        </figure>
      </div>
      <div class='card-content'>
        <div class="media-content">
          <p>{{ fields.name }}</p>
        </div>
      </div>
    </div>
  </a>
{{/each}}

Run the Project

In your terminal, run:

airship serve

This command will start your airship server. Open your browser and navigate to localhost:9001.