Overview

The Harmony template system uses Liquid, a simple, secure template language that’s easy to learn, and very powerful. The liquid wiki has a lot more information on working with liquid as well. There are two types of markup in Liquid: Output and Tag. Output markup (which may resolve to text) is surrounded by

{{ matched pairs of braces }}

Tag markup, which cannot resolve to text but may output HTML, is surrounded by

{% matched pairs of braces and percent signs %}

This is a simple example of what a full template in Harmony may look like.

{% include 'header' %}
  <h1>{{ item.title }}</h1>
  {% if item.data.video_url != blank %}
  <div class="media">
    <div id="video"><div id="video-swf"></div></div>
  </div>
  {% endif %}
  {{ item.data.content }}
{% include 'footer' %}

Objects and Collections

In each template, you’ll have access to several default object variables that relate to the page. The most important is item, which is the object for the current page. Next, you will always have access to the site object, which is the current site and pertinent data. If you’re on any page inside of a blog, you’ll have access to the blog object. If you’re on an archive or label page inside a blog, you’ll also be given the posts object, which is an array of blog posts for that page. You also have access to various pieces of data about users and assets, when they’re available.

Read more about objects and collections.

Using Filters

Filters help you modify or extend various pieces of data. They are tacked on after text, or an object, with a pipe character to perform their specific functions.

{{ item | link_to_item }}

You can also chain filters together to perform complex tasks.

{{ item.data.related_item | downcase | item_from_path | assign_to: 'related' }}

Read more about the available filters.

Template Tags

Tags in templates allow you to create more dynamic markup in a simple, elegant way. For example, to create an unordered list of your sites navigation, Harmony provides you with the nav liquid tag.

{% nav site.navigation %}

This will generate a richly identified and location aware navigation ul, so all you need to do it style it appropriately.

Find out more about template tags.

Loops and Conditionals

Liquid gives you the power to perform many common programming loops and conditional tests to make your templates very dynamic and adaptable. From if and else, to for loops and case statements, it’s easy to program powerful and unique templates.

Learn more about loops and conditionals.