Liquid cheatsheet

Creates an absolute path url. The path will include the value of the "url" and "baseurl" settings from the _config.yml file.

#liquid#url 
{{ "/assets/app.js" | absolute_url }}
// Returns https://shortcode.dev/assets/app.js
 copy

You cannot create an array directly in Liquid, however you can go around it by splitting a string.

#liquid#array 
 {%  assign listOfItems = "cup,pen,apple,book" | split: ',' %}
 copy

Assign data to a variable.

#liquid#variable 
 {% assign myVar = 'Say hello' %}

 {{ myVar }}
 copy

Capitalize string.

#liquid#string#filter 
 {{ "capitalize this sentence." | capitalize }}

Output:
Capitalize this sentence.
 copy

Capture is a very handy Liquid function for assigning structured data to a variable.

#liquid#variable 
 {% capture myVar  %}
     {% for item in array  %}
        {{ item.title  }}
     {% endfor  %}
 {% endcapture  %}

 {{ myVar  }}
 copy
#liquid 
 {% comment  %} Body of your comment  {% endcomment  %}
 copy

Get current time and date.

#liquid#date 
 {{ site.time  }}

Output:
2024-01-09 15:58:45 +0000
 copy

Format date to long strings.

#liquid#date#filter 
 {{ site.time | date_to_long_string  }}

Output:
09 January 2024
 copy

Format date to rfc822.

#liquid#date#filter 
 {{ site.time | date_to_rfc822  }}

Output:
Tue, 09 Jan 2024 15:58:45 +0000
 copy

Format date to strings.

#liquid#date#filter 
 {{ site.time | date_to_string  }}

Output:
09 Jan 2024
 copy

Format date to xml schema.

#liquid#date#filter 
 {{ site.time | date_to_xmlschema  }}

Output:
2024-01-09T15:58:45+00:00
 copy

Simple loop getting name, permalink and a number of posts for each collection type.

#liquid#navigation#collections#snippet 
<ul>
 {% for item in site.collections  %}
  <li>
      <a href="/ {{ item.permalink  }}" title="{{ item.label }}">
        {{ item.label }} ({{ site[item.label] | size }})
      </a>
  </li>
 {% endfor  %}
</ul>
 copy

You can escape liquid tags from being processed by using this pattern.

#liquid 
 {{"  {%  include file.html  "}} %}
 {% comment  %} It returns  {% include file.html  %} without parsing.  {% endcomment  %}
 copy

Example of a simple Liquid for loop returning a list of pages.

#liquid#for#loop 
<ul>
{% for page in site.pages %}
  <li>
      <a title="{{ page.title }}" href="{{ page.url }}">{{ page.title }} </a>
  </li>
{% endfor %}
</ul>
 copy

Use forloop.last to select the last item in the for loop.

#liquid#for#loop#last 
<ul>
{% for page in site.pages %}
  <li>
      <a title="{{ page.title }}" href="{{ page.url }}">{{ page.title }}{% if forloop.last == true %} - last item{% endif %}</a>
  </li>
{% endfor %}
</ul>
 copy

Get a collection of all posts and display the title and the url in a list format.

#liquid#posts 
<ul>
    {% for post in site.posts %}
    <li>
        <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
    {% endfor %}
</ul>
 copy

A simple script to get all tags from the front matter of a post/page.

#liquid#tags 
{% if page.tags.size > 0 %}
    {% for tag in page.tags %}<span>#{{ tag }}</span>{% endfor %}
{% endif %}
 copy

Conditional if statement.

#liquid#conditional 
{% if page.title %}
  <h1>{{ page.title }}</h1>
{% endif %}
 copy

Include files from the "_include" directory. You can also pass parameters to the include tags.

#liquid 
 {% include page_header.html title=page.title  %}
 copy

Converts a variable to a string. Useful while debugging.

#liquid#filter 
 {{  page.tags | inspect }}

Output:
[&quot;liquid&quot;, &quot;filter&quot;]
 copy

Convert data to json format.

#liquid#filter 
{{ page.tags | jsonify }}
Outputs:
["liquid","filter"]
 copy

You can use limit attribute to restrict the numbers of returned results by the for loop.

#liquid#for#loop 
<ul>
{% for page in site.pages limit:5 %}
  <li>
      <a title="{{ page.title }}" href="{{ page.url }}">{{ page.title }} </a>
  </li>
{% endfor %}
</ul>
 copy

Converts markdown to HTML code.

#liquid#filter 
{{ page.title | markdownify }}
 copy

Counts the number of words in the text.

#liquid#filter 
{{  "How many words is in this phrase?" | number_of_words }}
7
 copy

Returns the .

#liquid#posts 
{% for post in site.posts %}
<p>
    {{ post.excerpt }}
</p>
{% endfor %}
 copy

Creates a relative path url. The path will include the value of the "baseurl" setting from the _config.yml file if set.

#liquid#url 
 {{  "/assets/app.js" | relative_url }}
 copy

Filters out first quoted characters.

#liquid#filter 
 {{ ", one, two, three, four" | remove_first: ", " }}

Output:
one, two, three, four
 copy

Convert sass to css code. Use "scssify" flag to convert scss.

#liquid#filter 
{{ page.sass | sassify }}
 copy

Count the number of characters in a string or length of an array. "." or "|" syntax can be used.

#liquid#string#array#filter 
 {{ arrayOfItems.size  }}
 {% comment  %} or  {% endcomment  %}
// or
 {{  "How many characters?" | size }}
 {% comment  %} This will return 20  {% endcomment  %}
 copy

Convert some text to a URL safe string. Use the following flags for different results - "pretty", "ascii", "latin".

#liquid#filter 
{{ "It works 100%, even with an 'ó' character!" | slugify }}
it-works-100-even-with-an-ó-character

{{ "It works 100%, even with an 'ó' character!" | slugify: "pretty" }}
it-works-100-,-even-with-an-'ó'-character!

{{ "It works 100%, even with an 'ó' character!" | slugify: "ascii" }}
it-works-100-even-with-an-character

{{ "It works 100%, even with an 'ó' character!" | slugify: "latin" }}
it-works-100-even-with-an-o-character
 copy

Convert string to an integer.

#liquid#filter 
{{ "22" | to_integer }}
22
 copy

Trim string to the number of characters specified. By default the truncated string will end with ellipsis (...) however you can replace it by passing your ending as the second parameter.

#liquid#string#filter 
{{  "Some string to be truncated" | truncate:9 }}
    String...
{{  "Some string to be truncated" | truncate:9, "...trimmed" }}
    String...trimmed
 copy

Ignore if the condition is met.

#liquid#conditional 
 {% unless page.title == 'home'  %}
  Not a homepage
 {% endunless  %}
 copy

Transform all string to uppercase.

#liquid#string#filter 
 {{ "make uppercase" | upcase }}

Output:
MAKE UPPERCASE
 copy

You can set a default value for a variable to fall back to.

#liquid#variable 
{{ page.language | default: 'EN' }}
 copy

Escape special characters to use in xml.

#liquid#xml#filter 
{{ page.content | xml_escape }}
 copy