Templates

Working with Templates

Templates are the heart of the Harmony theming system. Each page1 in your site is assigned a template, which is used to render the page when a user visits that page. Templates determine the markup for the page, what data is to be collected, and how that data is displayed. You have complete control over how you present your data, where, and in what form. It’s the ultimate in flexibility. 1Not only are pages assigned a template, but every item in your site, such as blog posts, blog archives, and more.

The Template Language

Harmony uses Liquid2 to access data and script its templates. Liquid is great for two reasons. First, it’s simple, and easy to grasp and use quickly. Second, it’s secure. It doesn’t let you do anything destructive or accidental. It gives you access to each piece of data entered into the Harmony administration area, and allows you to manipulate, loop, and mark up that data as you like. In other words, you’re in control of exactly how your site looks. 2For more details on how to use liquid, and the tools Harmony provides in your templates, check out the Harmony Templates section.

Template Data

Template Data

The key to Harmony templates lies in its custom template data structure. This allows you to define what data to collect for any given template, and how to show that data in the resulting page. When you go to edit a page in the ‘Manage Content’ section of Harmony, you’re presented with form fields to collect the template data you define in the template assigned to that page.

To create a new piece of template data, click the [+] at the bottom left of the Template Data sidebar, and select the type of data to collect. You can collect short or long text, file uploads, radio buttons, check boxes, and select lists. Once you’ve created your template data, you can edit it to add help text, options, require it to save the page, or add options to types that allow it. For long text, you can also pass the input through the textile, markdown, or WYSIWYG filters, which will add a helper bar to the top of the text area when editing content. Template data can be reordered, and that will update the order of the form when managing your content.

Once your data is setup, you can use the data in the template using the variable name on the template data item in the sidebar. Or, even easier, simply place your cursor where you’d like the data in your template, and click the icon on the desired template data, and the template will insert the code needed to display the data right in your template.

For more specific information on the Liquid template language, check out the Harmony Templates section.