Liquid tips and tricks

Menu

Liquid is a templating language developed by the people at Shopify and used extensively. I happen to use it every now and then on the websites we develop with Jekyll and this is a list of tips and tricks.

Official Documentation

This is easy… it now lives here!

Make an integer into a string

To make an integer into a string, use the capture command:

{% capture post_year %}{{post.year}}{% endcapture %}

Use a default value for empty variables

Use default: to manage empty values:

{{ data.name | default: "... data name is empty!"}}

will print “...data name is empty” if data.name is indeed empty.

Make a string into an array

Use the split command to make a string into an array.

{% assign publication_types = 'book,editor,book_chapter,journal,conference,workshop' | split: ',' %}

will return the array “[‘book’, ‘editor’, ‘book_chapter’, ‘journal’, ‘conference’, ‘workshop’]”, on which we can iterate using the for command.

Reverse the order of a list

Use the reversed tag to reverse a list. For instance:

{% for post in site.categories.MYCATEGORY reversed %}
  ...
{% end %}

will list posts in chronological order.

Group data by key

Use group_by to group data by a key; group_by generates a hash (in the example grouped_books), which can be iterated on with a for loop. Each element of has a key, accessible with name, and a list of elements, which can be accessed using items.

This is an example in which a list of books, stored as YAML data, is grouped and outputted by year.

Notice that since “year” is an integer, sorting and reversing guarantees that the most recent entries are listed first.

{% assign grouped_books = site.data.bookstream | group_by: 'completed_year' | sort: 'name' | reverse %}

{% for group in grouped_books %}
<h1>{{ group.name }}</h1>

<ul>
{% for book in group.items %}
<li><img src="covers/{{book.cover}}" alt="Read in {{book.duration}} days, my rating: {{book.rating}}"></li>
{% endfor %}
</ul>

{% endfor %}

Select and print data by key

This is similar to the previous example, but we explicitly control the order in which groups are outputed.

We have YAML data with a list of publications, each with the key publication_type. We want to generate a list of all publications, in a specific order.

The variable publication_types defines the order in which entries have to be grouped and presented. We then iterate over publication_types and select an element from the list of publications if its publication_type is the right one.

Notice that if we have N categories, this loops N times over the data.

{% assign publication_types = 'book,editor,book_chapter,journal,conference,workshop' | split: ',' %}

{% for pt in publication_types %}

## {{pt}}

{% for pub in site.data.publications %}
{% if pub.pub_type == pt %}

1. {{ pub.rendered }}
   {% if pub.link -%}
   {% if pub.link contains ".pdf" -%}
   <a href="{{pub.link}}" class="download-paper">[Download]</a>
   {% else -%}
   <a href="{{pub.link}}" class="moreinfo-paper">[Link]</a>
   {% endif -%}
   {% endif -%}
   {% if pub.abstract != nil and pub.abstract != "" -%}
   <span class="abstract-button my-button">[Abstract]</span>
   {% endif -%}
   <span class="abstract">{{ pub.abstract }}</span>
   <span class="bibtex">{{ pub.bibtex }}</span>
{% endif %}
{% endfor %}

{% endfor %}