KevsRobots Learning Platform

Mastering Markdown for Documentation with Jekyll

70% Percent Complete

Introduction to Markdown and Jekyll
Creating Content with Markdown and Jekyll
Enhancing Your Site
Publishing Your Site

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.

By Kevin McAleer,    2 Minutes

Using Liquid Templating for Dynamic Content cover image

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 %}

{{ post.title }}

{{ post.excerpt }}

{% endfor %}

Using Filters to Modify Output

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

{{ ‘Welcome to Jekyll!’ upcase }}

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

< Previous Next >