Using Liquid Templating for Dynamic Content

Explore how to use the Liquid templating language to add dynamic content and logic to your Jekyll site, enhancing its interactivity and functionality.

Introduction

Liquid is a templating language used by Jekyll to process templates. It allows you to add dynamic content, use variables, and implement logic in your site’s pages and posts. Understanding Liquid is essential for maximizing the power of Jekyll as a static site generator.

Basic Syntax

Liquid syntax is simple and consists of objects, tags, and filters:

• Objects output content into the template and are denoted by double curly braces: {{ }}.
• Tags create logic and control flow in templates and are denoted by curly braces and percent signs: {% %}.
• Filters modify the output of objects and are used within an object tag: {{ 'data' | filter }}.

Displaying Data with Objects

You can use objects to display data from your site’s configuration file (_config.yml), front matter, or page content:

{{ site.title }} {{ page.author }}

Implementing Logic with Tags

Tags allow you to implement control flow statements like if, else, elsif, and loops using for.

Conditional Statements

{% if page.title %}

{{ page.title }}

{% else %}

Untitled Page

{% endif %}

Loops

To iterate over a list of items, such as posts:

{% for post in site.posts %}

{% endfor %}

Using Filters to Modify Output

Filters allow you to modify the output of objects for formatting or transforming data:

This filter changes the string to uppercase.

Practice Exercise

1. Create a new page in your Jekyll site that lists the titles of all posts.
2. Use conditional logic to display a message if there are no posts.
3. Apply a filter to the post titles to alter their appearance.

Additional Resources

• Liquid Templating Language Documentation
• Jekyll Variables and Liquid Tags

< Previous Next >

You can use the arrows  ← → on your keyboard to navigate between lessons.