Skip to content

Jekyll Liquid

Useful tricks of Liquid, which are used in Jekyll.

1. Liquid

Jekyll uses the Liquid templating language to process templates.

Generally in Liquid you output content using two curly braces e.g. {%- raw -%}{{ variable }}{% endraw %} and perform logic statements by surrounding them in a curly brace percentage sign e.g. {%- raw -%}{% if statement %}{% endraw %}. To learn more about Liquid, check out the official Liquid Documentation.

1. Comment

Allows you to leave un-rendered code inside a Liquid template. Any text within the opening and closing comment blocks will not be output, and any Liquid code within will not be executed. Input: 

{%- raw -%}
Anything you put between {% comment %} and {% endcomment %} tags
is turned into a comment.
{% endraw %}
Output: 
Anything you put between  tags
is turned into a comment.

2. Raw

Raw temporarily disables tag processing. This is useful for generating content (eg, Mustache, Handlebars) which uses conflicting syntax. Input:

{% raw %}
In Handlebars, {% raw %} {{ this }} {% endraw %}will be HTML-escaped, but {% raw %}{{{ that }}}{% endraw %} will not. {% endraw %}

Output: 

  In Handlebars, {% raw %} {{ this }} {% endraw %}will be HTML-escaped, but {% raw %}{{{ that }}}{% endraw %} will not.

3. forloop.first

Returns true if it's the first iteration of the for loop. Returns false if it is not the first iteration. 

{%- raw -%}
{% for product in collections.frontpage.products %}
    {% if forloop.first == true %}
        First time through!
    {% else %}
        Not the first time.
    {% endif %}
{% endfor %}
{% endraw %}

4. Blank Line

Input: 

{%- raw -%}
{% assign my_variable = "tomato" %}
{{ my_variable }}
{% endraw %}
Output: 
tomato
Notice, one blank line above the desired output.

Add dash - to the input: 

{%- raw -%}
{%- assign my_variable = "tomato" -%}
{{ my_variable }}
{% endraw %}
Output: 
tomato

5. Iteration

for 

{%- raw -%}
{% for product in collection.products %}
  {{ product.title }}
{% endfor %}
{% endraw %}

limit Limits the loop to the specified number of iterations. Input: 

{%- raw -%}
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array limit:2 %}
  {{ item }}
{% endfor %}
{% endraw %}
Output: 
1 2

6. References