Skip to content

Instantly share code, notes, and snippets.

@sloanlance
Forked from magicznyleszek/jekyll-and-liquid.md
Last active September 17, 2022 11:33
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sloanlance/475fe0fcfcbda031177c590cdd0d6bef to your computer and use it in GitHub Desktop.
Save sloanlance/475fe0fcfcbda031177c590cdd0d6bef to your computer and use it in GitHub Desktop.
Jekyll & Liquid Cheatsheet (A fork of the gist by "magicznyleszek", FKA "smutnyleszek")
See: `Jekyll & Liquid Cheatsheet.md`

Jekyll & Liquid Cheatsheet

A list of the most common features in Jekyll and Liquid. You may use Jekyll with GitHub Pages, iff the proper version is used.

Jekyll

Running

Running a local server for testing purposes:

jekyll serve
jekyll serve --watch --baseurl ''

Creating a final outcome (or for testing on a server):

jekyll build
jekyll build -w

The -w or --watch flag is for enabling auto-regeneration, the --baseurl '' one is useful for server testing.

Liquid

Output

Simple output:

Hello {{name}}
Hello {{user.name}}
Hello {{ 'leszek' }}

Filtered output:

The word "hello" has {{ 'hello' | size }} letters.
Today is {{ 'now' | date:  "%Y %h" }}.

The where filter is useful for getting specific item from an array:

{% assign currentItem = site.data.foo | where:"slug","bar" %}
{{ newArray[0].name }}

Most common filters:

  • where: select elements from array with a specific property value: {{ site.posts | where:"category","foo" }}
  • group_by: group elements from array by a property: {{ site.posts | group_by:"category" }}
  • markdownify: convert Markdown to HTML
  • jsonify: convert data to JSON: {{ site.data.dinosaurs | jsonify }}
  • date: reformat a date
  • capitalize: capitalize words in the input sentence
  • downcase: convert an input string to lowercase
  • upcase: convert an input string to uppercase
  • first: get the first element of an array
  • last: get the last element of the passed in array
  • join: join elements of an array with a specified character
  • sort: sort elements of the array: {{ site.posts | sort: 'author' }}
  • size: return the size of an array or string
  • strip_newlines: strip all newlines (\n) from string
  • replace: replace each occurrence: {{ 'foofoo' | replace:'foo','bar' }}
  • replace_first: replace the first occurrence: {{ 'barbar' | replace_first:'bar','foo' }}
  • remove: remove each occurrence: {{ 'foobarfoobar' | remove:'foo' }}
  • remove_first: remove the first occurrence: {{ 'barbar' | remove_first:'bar' }}
  • truncate: truncate a string down to n characters
  • truncatewords: truncate a string down to n words
  • prepend: prepend a string: {{ 'bar' | prepend:'foo' }}
  • append: append a string: {{ 'foo' | append:'bar' }}
  • minus, plus, times, divided_by, modulo: calculations: {{ 4 | plus:2 }}
  • split: split a string on a matching pattern: {{ "a~b" | split:~ }}

Tags

Tags are used for the logic in your template.

Comments

Output may be hidden by surrounding it in comment tags:

We made 1 million dollars {% comment %} in losses {% endcomment %} this year

Raw

Disables tag processing.

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

If / Else

Simple expression with if/unless, elsif [sic!] and else.

{% if user %}
    Hello {{ user.name }}
{% elsif user.name == "The Dude" %}
    Are you employed, sir?
{% else %}
    Who are you?
{% endif %}
{% unless user.name == "leszek" and user.race == "human" %}
    Hello non-human non-leszek
{% endunless %}
# array:  [1,2,3]
{% if array contains 2 %}
    array includes 2
{% endif %}

Case

For more conditions.

{% case condition %}
    {% when 1 %}
        hit 1
    {% when 2 or 3 %}
        hit 2 or 3
    {% else %}
        don't hit
{% endcase %}

For loop

Simple loop over an array:

{% for item in array %}
    {{ item }}
{% endfor %}

Simple loop over a range:

{% for i in (1..10) %}
    {{ i }}
{% endfor %}

There are helper variables for special occasions:

  • forloop.length: total number of iterations in the current loop
  • forloop.index: index of the current iteration
  • forloop.index0: index of the current iteration (zero based)
  • forloop.rindex: number of iterations remaining
  • forloop.rindex0: number of iterations remaining (zero based)
  • forloop.first: Boolean flag indicating whether the current iteration is the first
  • forloop.last: Boolean flag indicating whether the current iteration is the last

Limit and offset starting collection:

# array:  [1,2,3,4,5,6]
{% for item in array limit:2 offset:2 %}
    {{ item }}
{% endfor %}

You can also reverse the loop:

{% for item in array reversed %}
...

Storing variables

Storing data in variables:

{% assign name = 'leszek' %}

Combining multiple strings into one variable:

{% capture full-name %}{{ name }} {{ surname }}{% endcapture %}

Permalinks

Permalinks are constructed using templates:

/:categories/:year/:month/:day/:title.html

These variables are available:

  • year: year from the filename
  • short_year: same as above but without the century
  • month: month from the filename
  • i_month: same as above but without leading zeros
  • day: day from the filename
  • i_day: same as above but without leading zeros
  • title: title from the filename
  • categories: specified categories for the post
@sloanlance
Copy link
Author

sloanlance commented May 23, 2018

This needs some work, but I wanted to preserve it before it disappears completely. The links I'd found to the original gist were broken, but I was glad it was still in Google's cache. At first, I recreated this gist from the cache, but then I realized the links were broken is that the user smutnyleszek had changed their name to magicznyleszek. So the original gist still exists.

I've made some corrections. I have limited experience with Liquid, so I'm uncertain which terms are used to describe the language. I may not have described it well here.

To-do

  • Generalize the "Permalinks" section.
  • Clarify use of single and double quote marks (' and "). Some arguments in filter examples use single, while others use double. Be consistent.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment