Liquid
Liquid templating basics used by Jekyll and this theme.
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
Resources
Related
See also
- [[Jekyll]]
- [[Customization]]
- [[front-matter]]