This document demonstrates various Liquid tag patterns and their usage in Jekyll. Each example shows both the rendered output and the Liquid syntax used to create it, making it an excellent learning resource for understanding how Liquid templating works.

Table of Contents

Basic Liquid Variables

Site Variables

Rendered Output:

  • Site Title: My Info Just Under Glass
  • Site Description: MIJUG.NET serves the communities of Southeast Michigan, Ohio, and Florida with technology, sustainability, and community engagement resources. A platform by Kranson Enterprises for sharing knowledge and connecting communities.
  • Site URL: https://www.mijug.net
  • Build Time: November 24, 2025 at 09:13 PM

Liquid Syntax:

- **Site Title**: {{ site.title }}
- **Site Description**: {{ site.description }}
- **Site URL**: {{ site.url }}{{ site.baseurl }}
- **Build Time**: {{ site.time | date: "%B %d, %Y at %I:%M %p" }}

Page Variables

Rendered Output:

  • Page Title: Liquid Tags Examples
  • Page Date: November 24, 2025
  • Page URL: /docs/liquid-tags-examples/
  • Page Layout: page

Liquid Syntax:

- **Page Title**: {{ page.title }}
- **Page Date**: {% if page.date %}{{ page.date | date: "%B %d, %Y" }}{% else %}No date set{% endif %}
- **Page URL**: {{ page.url | relative_url }}
- **Page Layout**: {{ page.layout }}

Control Flow Tags

Conditional Logic

Rendered Output:

✅ Success: This page has a title: “Liquid Tags Examples”

📝 Published: This content is published (not a draft)

Liquid Syntax:

{% if page.title %}
> **✅ Success**: This page has a title: "{{ page.title }}"
{% else %}
> **❌ Error**: This page doesn't have a title
{% endif %}

{% unless page.draft %}
> **📝 Published**: This content is published (not a draft)
{% endunless %}

Case Statements

Rendered Output:

📄 This is a regular page

Liquid Syntax:

{% assign content_type = page.layout %}
{% case content_type %}
{% when 'post' %}
📝 This is a blog post
{% when 'page' %}
📄 This is a regular page
{% when 'documentation' %}
📚 This is documentation
{% else %}
📋 This is content of type: {{ content_type }}
{% endcase %}

Loop Tags

Site Posts Loop

Rendered Output:

Recent Posts:

Liquid Syntax:

{% if site.posts.size > 0 %}
#### Recent Posts:
{% for post in site.posts limit:3 %}
- [{{ post.title }}]({{ post.url | relative_url }}) - {{ post.date | date: "%B %d, %Y" }}
{% endfor %}
{% else %}
No posts found.
{% endif %}

Documentation Pages Loop

Rendered Output:

Documentation Pages:

Liquid Syntax:

{% assign docs = site.docs | sort: 'nav_order' %}
{% if docs.size > 0 %}
#### Documentation Pages:
{% for doc in docs limit:5 %}
- [{{ doc.title }}]({{ doc.url | relative_url }})
{% endfor %}
{% endif %}

Site Data Loop (Categories)

Rendered Output:

Available Categories:

  • Tutorial (tutorial): Step-by-step learning guides

  • Getting Started (getting-started): Initial setup and configuration guides

  • Development (development): Software development topics

  • TypeScript (typescript): TypeScript specific content

  • Jekyll (jekyll): Jekyll static site generator content

  • Testing (testing): Testing strategies and frameworks

  • Deployment (deployment): Deployment and DevOps topics

  • Configuration (configuration): Setup and configuration guides

  • Best Practices (best-practices): Recommended approaches and patterns

  • HTML (html): HTML markup and web standards

  • Web Development (web-development): General web development topics

  • Announcements (announcements): Site announcements and updates

  • Linux (linux): Linux operating system topics

  • Documentation (documentation): Documentation and guides

  • Navigation (navigation): Site navigation and structure

Liquid Syntax:

{% if site.data.categories %}
#### Available Categories:
{% for category in site.data.categories %}
- **{{ category[1].name }}** ({{ category[0] }}): {{ category[1].description }}
{% endfor %}
{% endif %}

Site Data Loop (Tags)

Rendered Output:

  • TypeScript: Microsoft’s typed superset of JavaScript

  • Jekyll: Transform your plain text into static websites and blogs

  • Development: Software development tools and practices

  • VS Code: Visual Studio Code editor and extensions

  • WSL: Windows Subsystem for Linux

Liquid Syntax:

{% if site.data.tags %}
#### Popular Tags:
{% for tag in site.data.tags limit:5 %}
- **{{ tag[1].name }}**: {{ tag[1].description }}
{% endfor %}
{% endif %}

Variable Assignment and Manipulation

Rendered Output:

Calculated Values:

  • Current Year: 2025
  • Site Age: 0 years
  • Estimated Reading Time: 14 minute(s)
  • Word Count: 2676 words

Liquid Syntax:

{% assign current_year = site.time | date: "%Y" %}
{% assign site_age = current_year | minus: 2025 %}
{% assign word_count = page.content | default: "" | number_of_words %}
{% assign reading_time = word_count | divided_by: 200 | plus: 1 %}

### Calculated Values:
- **Current Year**: {{ current_year }}
- **Site Age**: {{ site_age }} years
- **Estimated Reading Time**: {{ reading_time }} minute(s)
- **Word Count**: {{ word_count }} words

String Filters

Rendered Output:

Text Transformations:

  • Original: Jekyll and Liquid are powerful tools for static site generation
  • Capitalize: Jekyll and liquid are powerful tools for static site generation
  • Upcase: JEKYLL AND LIQUID ARE POWERFUL TOOLS FOR STATIC SITE GENERATION
  • Downcase: jekyll and liquid are powerful tools for static site generation
  • Truncate: Jekyll and Liquid…
  • Truncate Words: Jekyll and Liquid are powerful…
  • Replace: Hugo and Liquid are powerful tools for static site generation

Liquid Syntax:

{% assign sample_text = "Jekyll and Liquid are powerful tools for static site generation" %}

### Text Transformations:
- **Original**: {{ sample_text }}
- **Capitalize**: {{ sample_text | capitalize }}
- **Upcase**: {{ sample_text | upcase }}
- **Downcase**: {{ sample_text | downcase }}
- **Truncate**: {{ sample_text | truncate: 20 }}
- **Truncate Words**: {{ sample_text | truncatewords: 5 }}
- **Replace**: {{ sample_text | replace: "Jekyll", "Hugo" }}

Array Filters

Rendered Output:

Array Operations:

  • Technologies Array: TypeScript • Jekyll • Ruby • Node.js • VS Code
  • First Item: TypeScript
  • Last Item: VS Code
  • Array Size: 5
  • Sorted: Jekyll, Node.js, Ruby, TypeScript, VS Code
  • Reversed: VS Code → Node.js → Ruby → Jekyll → TypeScript

Liquid Syntax:

{% assign technologies = "TypeScript,Jekyll,Ruby,Node.js,VS Code" | split: "," %}

### Array Operations:
- **Technologies Array**: {{ technologies | join: " • " }}
- **First Item**: {{ technologies | first }}
- **Last Item**: {{ technologies | last }}
- **Array Size**: {{ technologies | size }}
- **Sorted**: {{ technologies | sort | join: ", " }}
- **Reversed**: {{ technologies | reverse | join: " → " }}

Date Filters

Rendered Output:

Date Formatting:

  • Full Date: Monday, November 24, 2025
  • Short Date: 11/24/2025
  • Time: 09:13 PM
  • ISO 8601: 2025-11-24T21:13:54-05:00
  • RFC 822: Mon, 24 Nov 2025 21:13:54 -0500

Liquid Syntax:

{% assign current_date = site.time %}

### Date Formatting:
- **Full Date**: {{ current_date | date: "%A, %B %d, %Y" }}
- **Short Date**: {{ current_date | date: "%m/%d/%Y" }}
- **Time**: {{ current_date | date: "%I:%M %p" }}
- **ISO 8601**: {{ current_date | date_to_xmlschema }}
- **RFC 822**: {{ current_date | date_to_rfc822 }}

Math Filters

Rendered Output:

Mathematical Operations:

  • Base Number: 42
  • Plus 10: 52
  • Minus 5: 37
  • Times 2: 84
  • Divided by 3: 14
  • Modulo 7: 0

Liquid Syntax:

{% assign base_number = 42 %}

### Mathematical Operations:
- **Base Number**: {{ base_number }}
- **Plus 10**: {{ base_number | plus: 10 }}
- **Minus 5**: {{ base_number | minus: 5 }}
- **Times 2**: {{ base_number | times: 2 }}
- **Divided by 3**: {{ base_number | divided_by: 3 }}
- **Modulo 7**: {{ base_number | modulo: 7 }}

URL Filters

Rendered Output:

URL Manipulations:

  • Relative URL: /docs/example
  • Absolute URL: https://www.mijug.net/docs/example
  • URL Encode: hello+world+%26+special+chars%21
  • CGI Escape: hello+world+%26+special+chars%21

Liquid Syntax:

### URL Manipulations:
- **Relative URL**: {{ "/docs/example" | relative_url }}
- **Absolute URL**: {{ "/docs/example" | absolute_url }}
- **URL Encode**: {{ "hello world & special chars!" | url_encode }}
- **CGI Escape**: {{ "hello world & special chars!" | cgi_escape }}

Advanced Liquid Examples

Dynamic Content Based on Page Properties

Rendered Output:

This page is tagged with:

Liquid Syntax:

{% if page.tags %}
#### This page is tagged with:
{% for tag in page.tags %}
{% if site.data.tags[tag] %}
- **{{ site.data.tags[tag].name }}**: {{ site.data.tags[tag].description }}
{% else %}
- **{{ tag }}**: (No description available)
{% endif %}
{% endfor %}
{% endif %}

Conditional Content Loading

Rendered Output:

📋 Table of Contents: This page includes an auto-generated table of contents.

🔗 Parent Page: This page is part of the “Getting Started” section.

Liquid Syntax:

{% if page.toc == true %}
> **📋 Table of Contents**: This page includes an auto-generated table of contents.
{% endif %}

{% if page.parent %}
> **🔗 Parent Page**: This page is part of the "{{ page.parent }}" section.
{% endif %}

Complex Data Processing

Rendered Output:

Content Statistics:

  • Blog Posts: 20
  • Documentation Pages: 21

  • Total Content Pages: 41

  • Average Content per Type: 20 pages

Liquid Syntax:

{% assign total_posts = site.posts | size %}
{% assign total_docs = site.docs | size %}
{% assign total_content = total_posts | plus: total_docs %}

#### Content Statistics:
- **Blog Posts**: {{ total_posts }}
- **Documentation Pages**: {{ total_docs }}
- **Total Content Pages**: {{ total_content }}
{% if total_content > 0 %}
- **Average Content per Type**: {{ total_content | divided_by: 2 }} pages
{% endif %}

Include Tags (if templates exist)

Attempting to Include Common Components:

Raw Tags for Code Examples

Displaying Liquid Syntax:

{% assign greeting = "Hello" %}
{% assign name = "World" %}
{{ greeting }}, {{ name }}!

{% for i in (1..5) %}
  Number: {{ i }}
{% endfor %}

Capture Tags for Complex Content

Rendered Output:

Captured Content:

This is a complex content block that includes:

  • Multiple lines
  • Markdown formatting
  • Variables: My Info Just Under Glass
  • Current date: 2025-11-24

Liquid Syntax:

{% capture complex_content %}
This is a complex content block that includes:
- Multiple lines
- **Markdown formatting**
- Variables: {{ site.title }}
- Current date: {{ site.time | date: "%Y-%m-%d" }}
{% endcapture %}

### Captured Content:
{{ complex_content }}

Comment Tags

Validation and Error Handling

Rendered Output:

Safe Variable Access:

  • Page Author: Bob Kranson
  • Page Excerpt: This document demonstrates various Liquid tag patterns and their usage in Jekyll. Each example sh…
  • Page Categories: development

Null Checks:

✅ Null check working properly - undefined variables are handled gracefully.

Liquid Syntax:

### Safe Variable Access:
- **Page Author**: {{ page.author | default: "Anonymous" }}
- **Page Excerpt**: {{ page.excerpt | default: "No excerpt available" | strip_html | truncate: 100 }}
- **Page Categories**: {% if page.categories %}{{ page.categories | join: ", " }}{% else %}Uncategorized{% endif %}

### Null Checks:
{% assign test_variable = page.nonexistent_field %}
{% if test_variable %}
This won't display because the variable is null.
{% else %}
✅ Null check working properly - undefined variables are handled gracefully.
{% endif %}

Performance Considerations

Rendered Output:

  • Posts with ‘post’ layout: 20
  • Reusing the same calculation: 20

Liquid Syntax:

{% comment %}
Use assign for repeated calculations to avoid recomputation
{% endcomment %}
{% assign expensive_calculation = site.posts | where: "layout", "post" | size %}

- **Posts with 'post' layout**: {{ expensive_calculation }}
- **Reusing the same calculation**: {{ expensive_calculation }}

Best Practices Demonstrated

  1. Use unless for negative conditions
  2. Prefer assign over direct computation in loops
  3. Use default filter for undefined variables
  4. Use raw tags when displaying Liquid syntax
  5. Use capture for complex multi-line content
  6. Always check for existence before using site.data

💡 Pro Tip: This page demonstrates that Liquid tags are properly configured and working in your Jekyll setup. Each section shows both the rendered output and the exact Liquid syntax used, making it easy to learn and copy patterns for your own content.

Last updated: September 25, 2025