A Live Developer Journal

Exploring Liquid templating language

Liquid is a templating language which I am exploring to figure out how to make my static website appear to be more dynamic.

All liquid code can be categorised into 'objects', 'tags' and 'filters'. Objects tell liquid where to display content on the page: {{ page.title }}. Tags create the logic and control flow for templates {% ... %}. Tags can be categorised into: Control flow, iteraton and variable assignments. Filters change the output of a Liquid object {{ "world!" | capitalize | prepend: "Hello, " }} . Multiple filters can be used on one output, and they are applied from left to right.

Operators


{% if product.type == "Shirt" or product.type == "Shoes" %}
  This is a shirt or a pair of shoes.
{% endif %}

Contains

Checks for the presense of a substring inside a string, or the presence of a string in an array of strings. It can only search strings.


{% if product.tags contains "Hello" %}
  This product has been tagged with "Hello".
{% endif %}

Truthy or falsy


{% if happy %}
  Happy and you know it!
{% endif %}

Even empty strings are truthy.

Types

You can initialize Liquid variables using the assign (creates a new variable) or capture (captures string inside of opening and closing tags and assigns it to a variable) tags.

You can access items in an array using iteration tags:


<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
{% for user in site.users %}
  {{ user }}
{% endfor %}

You can use bracket notation to access items in an array:


{{ site.users[0] }}
{{ site.users[1] }}
{{ site.users[2] }}

You can't initialize arrays in Liquid, but you can use the split filter to break a string into an array of substrings.

Whitespace control

Use a hyphen to remove white space before or after strings (or both): {%- -%}

Tags

Comments


Anything you put between {% comment %} and {% endcomment %} tags
is turned into a comment.

Control flow

If


{% if product.title == "Awesome Shoes" %}
  These shoes are awesome!
{% endif %}

Unless


{% unless product.title == "Awesome Shoes" %}
  These shoes are not awesome.
{% endunless %}

elseif/else


{% if customer.name == "kevin" %}
  Hey Kevin!
{% elsif customer.name == "anonymous" %}
  Hey Anonymous!
{% else %}
  Hi Stranger!
{% endif %}

case/when


{% assign handle = "cake" %}
{% case handle %}
  {% when "cake" %}
     This is a cake
  {% when "cookie" %}
     This is a cookie
  {% else %}
     This is not a cake nor a cookie
{% endcase %}

Iteration

For


{% for product in collection.products %}
  {{ product.title }}
{% endfor %}

Else


{% for product in collection.products %}
  {{ product.title }}
{% else %}
  The collection is empty.
{% endfor %}

Break


{% for i in (1..5) %}
  {% if i == 4 %}
    {% break %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}

Continue


{% for i in (1..5) %}
  {% if i == 4 %}
    {% continue %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}

For loop parameters

Cycle


{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}

output:
one
two
three
one

Cycles can be used to apply odd/even classes to rows in a table. You can also use them to apply a unique class to the last product thumbnail in a row etc.

Tablerow


<table>
{% tablerow product in collection.products %}
  {{ product.title }}
{% endtablerow %}
</table>

OUTPUT:
<table>
  <tr class="row1">
    <td class="col1">
      Cool Shirt
    </td>
    <td class="col2">
      Alien Poster
    </td>
    <td class="col3">
      Batman Poster
    </td>
    <td class="col4">
      Bullseye Shirt
    </td>
    <td class="col5">
      Another Classic Vinyl
    </td>
    <td class="col6">
      Awesome Jeans
    </td>
  </tr>
</table>

Table row parameters:

Variables

You can initialize Liquid variables using the assign (creates a new variable) or capture (captures string inside of opening and closing tags and assigns it to a variable) tags.

Increment


{% increment my_counter %}
{% increment my_counter %}
{% increment my_counter %}

OUTPUT:
0
1
2

Decrement


{% decrement variable %}
{% decrement variable %}
{% decrement variable %}

OUTPUT:
-1
-2
-3