Liquid Templating System

Avenger uses Liquid Templating Engine to generate the HTML files. You can still use the template if you do not plan to use the Liquid files, however this documentation will cover how the liquid files are arranged.

Basically, Liquid is a static site generator which runs using Grunt. It uses partial files (includes, layouts and blocks) to generate the final HTML files.

Structure

The folder structure for the liquid files are:

| templates\           <= all the liquid content files
|    includes\         <= all the partial HTML files
|    layouts\          <= all the layout files

All liquid files have an extension of .liquid, however while referencing in include or layout, the .liquid is ommitted.

The partial files (includes) are simply chunks of HTML that are repeated in multiple places. By including the tag {% include FILENAME %} that chunk of HTML is inserted in either the layout or the liquid content files.

The layout files in _layouts_ form the base layout of each HTML file. By inserting {% layout 'FILENAME' %} at the top of each content file we know which base layout to use.

The liquid content files are where all the content is put, you will note the following structure in our content files.

{% layout 'layout' %}
{% block title %}{% endblock %}

{% block breadcrumb %}
{% endblock %}

{% block styles %}
{% endblock %}

{% block scripts %}
{% endblock %}

{% block content %}
{% endblock %}

The first {% layout 'layout' %} block specifies that we will use the layouts\layout.liquid file. All the {% block %}s will be inserted in the layout file in the specified places. - The title will be inserted in the place of page title - The breadcrumb will be inserted as the list of breadcrumbs, - The styles block is for inserting link tags at the <head> of the html files - The scripts block will insert your script tags right before the </body> - And finally, the content tag is for the actual HTML content that will go into the file.

You can find more information on Liquid bin the Liquid Documentation, however we have purposely kept things as simple as possible and only limited

Generating HTML files from Liquid

Simply run grunt liuqid from Node.js Command Prompt and grunt will generate all the HTML files in the root directory