Liquid
By Amr
Liquid templating basics used by Jekyll and this theme.
Estimated reading time: 3 minutes
Table of Contents
Liquid
Liquid is the templating language used by Jekyll to process templates and create dynamic content.
Basic Syntax
Output (Double Braces)
{{ page.title }}
{{ site.description }}
{{ content }}
Logic (Braces with Percent)
{% if page.title %}
<h1>{{ page.title }}</h1>
{% endif %}
{% for post in site.posts %}
<li>{{ post.title }}</li>
{% endfor %}
Common Filters
Text Manipulation
{{ "hello" | capitalize }} <!-- Hello -->
{{ "hello world" | upcase }} <!-- HELLO WORLD -->
{{ page.content | truncate: 100 }}
{{ page.content | strip_html }}
URL Helpers
{{ "/about/" | relative_url }} <!-- Prepends baseurl -->
{{ "/about/" | absolute_url }} <!-- Full URL with domain -->
Date Formatting
{{ page.date | date: "%B %d, %Y" }} <!-- January 15, 2025 -->
{{ page.date | date_to_xmlschema }} <!-- 2025-01-15T00:00:00+00:00 -->
Arrays
{{ page.tags | join: ", " }}
{{ site.posts | size }}
{{ page.categories | first }}
Control Flow
Conditionals
{% if page.layout == "post" %}
<!-- Post content -->
{% elsif page.layout == "page" %}
<!-- Page content -->
{% else %}
<!-- Default content -->
{% endif %}
Loops
{% for post in site.posts limit:5 %}
<a href="{{ post.url }}">{{ post.title }}</a>
{% endfor %}
{% for tag in page.tags %}
<span>{{ tag }}</span>
{% endfor %}
Includes
Include reusable components:
{% include navigation/navbar.html %}
{% include components/post-card.html post=post %}
Pass parameters to includes:
{% include card.html
title="My Card"
content="Card content here"
%}
Theme Examples
Explore Liquid usage in Zer0-Mistakes:
_layouts/- Page templates_includes/- Reusable components_includes/navigation/- Navigation components