Skip to content

Liquid

Liquid is the templating language used by Jekyll to process templates and create dynamic content.

Basic Syntax

Output (Double Braces)

{% raw %}

{{ page.title }}
{{ site.description }}
{{ content }}

{% endraw %}

Logic (Braces with Percent)

{% raw %}

{% if page.title %}
  <h1>{{ page.title }}</h1>
{% endif %}

{% for post in site.posts %}
  <li>{{ post.title }}</li>
{% endfor %}

{% endraw %}

Common Filters

Text Manipulation

{% raw %}

{{ "hello" | capitalize }}       <!-- Hello -->
{{ "hello world" | upcase }}     <!-- HELLO WORLD -->
{{ page.content | truncate: 100 }}
{{ page.content | strip_html }}

{% endraw %}

URL Helpers

{% raw %}

{{ "/about/" | relative_url }}   <!-- Prepends baseurl -->
{{ "/about/" | absolute_url }}   <!-- Full URL with domain -->

{% endraw %}

Date Formatting

{% raw %}

{{ page.date | date: "%B %d, %Y" }}  <!-- January 15, 2025 -->
{{ page.date | date_to_xmlschema }}   <!-- 2025-01-15T00:00:00+00:00 -->

{% endraw %}

Arrays

{% raw %}

{{ page.tags | join: ", " }}
{{ site.posts | size }}
{{ page.categories | first }}

{% endraw %}

Control Flow

Conditionals

{% raw %}

{% if page.layout == "post" %}
  <!-- Post content -->
{% elsif page.layout == "page" %}
  <!-- Page content -->
{% else %}
  <!-- Default content -->
{% endif %}

{% endraw %}

Loops

{% raw %}

{% for post in site.posts limit:5 %}
  <a href="{{ post.url }}">{{ post.title }}</a>
{% endfor %}

{% for tag in page.tags %}
  <span>{{ tag }}</span>
{% endfor %}

{% endraw %}

Includes

Include reusable components:

{% raw %}

{% include navigation/navbar.html %}
{% include components/post-card.html post=post %}

{% endraw %}

Pass parameters to includes:

{% raw %}

{% include card.html 
   title="My Card" 
   content="Card content here" 
%}

{% endraw %}

Theme Examples

Explore Liquid usage in Zer0-Mistakes:

  • _layouts/ - Page templates
  • _includes/ - Reusable components
  • _includes/navigation/ - Navigation components

Resources

See also

  • [[Jekyll]]
  • [[Customization]]
  • [[front-matter]]