Dynamic Templates with Conditional Includes

Dynamic Behavior in Static Sites

Jekyll is a static site generator, but with the help of Liquid—its templating engine—you can create layouts and includes that behave dynamically based on page variables, site settings, or collection metadata. This enables advanced templating strategies without JavaScript or backend logic.

What Are Conditional Includes?

Conditional includes are HTML fragments that are only loaded if specific conditions are met. In Jekyll, you can use Liquid's {% if %}, {% case %}, and {% unless %} blocks to selectively include templates depending on page data, URL, layout, or collection context.

Use Cases for Conditional Includes

• Show breadcrumbs only on blog posts
• Load a table of contents on documentation pages
• Insert a signup box only on specific templates
• Display a notice on draft content
• Enable language switcher on multilingual pages

Basic Example: Conditional Header Banner

You may want a hero banner only on the homepage:

<div class="hero-banner">
  <h2>Welcome to Our Site</h2>
</div>


{% if page.url == "/" %}
  {% include banner.html %}
{% endif %}

Explanation

By checking page.url, we ensure the banner is only included at the site root. This avoids loading unnecessary content across all pages.

Advanced Use: Conditional Sidebar Components

On documentation pages, you might want to show different sidebar components depending on the page section.

<aside class="sidebar">
  {% if page.section == "api" %}
    {% include sidebar-api.html %}
  {% elsif page.section == "guides" %}
    {% include sidebar-guides.html %}
  {% else %}
    {% include sidebar-default.html %}
  {% endif %}
</aside>

With this approach, your documentation sidebar adapts based on front matter.

Using Site-Wide Configuration in Logic

Let’s assume you want to show a maintenance notice globally but only when enabled in the config file:

<div class="maintenance-notice">
  Site is under scheduled maintenance.
</div>


{% if site.maintenance_mode %}
  {% include maintenance.html %}
{% endif %}


maintenance_mode: true

Conditional Logic with Collection Pages

If you're using multiple collections like _projects and _clients, you can tailor the layout depending on the collection type.

---
layout: base
---

{% if page.collection == "projects" %}
  <div class="project-meta">
    Client: {{ page.client }}
  </div>
{% endif %}

<div class="project-content">
  {{ content }}
</div>

Tip:

Using collection-specific logic inside shared layouts allows you to minimize the number of layout files while still customizing output behavior.

Combining Includes with Logic

You can nest includes inside conditionals, or conditionals inside includes. Both are valid. But in larger sites, using includes within includes helps reduce visual clutter and improve modularity.

Pattern Example

{% if page.layout == "post" %}
  {% include shared/post-meta.html %}
{% endif %}

Now post-meta.html becomes its own template fragment, reusable across different parts of your site.

Using Page Variables as Feature Toggles

You can activate or deactivate sections within a page using custom front matter flags. For instance, toggling a newsletter form:

---
layout: page
show_newsletter: true
---


{% if page.show_newsletter %}
  {% include shared/newsletter-form.html %}
{% endif %}

This technique gives content editors or site admins more control over which components are rendered without touching HTML files.

Case Study: International Navigation System

In multilingual websites, you can use conditionals to dynamically load the right navigation system:

{% if page.lang == "en" %}
  {% include nav/en.html %}
{% elsif page.lang == "fr" %}
  {% include nav/fr.html %}
{% endif %}

Use Front Matter for Language

---
layout: docs
lang: en
---

This approach allows you to manage content per locale, while reusing the same layout and logic templates for all languages.

Best Practices for Conditional Includes

1. Keep Logic Minimal in Layouts

Don't overload your layout files with complex Liquid logic. Move repetitive or heavy conditionals into partials (include files) for better readability and maintainability.

2. Use Descriptive Booleans

Instead of ambiguous flags like show_this: true, prefer enable_commenting: true or hide_sidebar: false.

3. Group Related Includes

Create folders like shared/, partials/, or sections/ to categorize reusable include files.

4. Document Conditional Behavior

In your developer README or internal documentation, describe what each condition does and where it applies. This reduces onboarding time for new contributors.

Testing Dynamic Templates

Since Jekyll is a static generator, you must test all paths manually. A few steps to validate dynamic behavior:

1. Check your build locally with bundle exec jekyll serve
2. Navigate to pages with and without the condition triggered
3. Inspect the HTML to verify includes are (or are not) rendered

Conclusion

Conditional includes are a powerful way to build smart, modular templates in Jekyll. They let you customize output for different page types, collections, or user states—while keeping your layouts clean and efficient. With thoughtful use of front matter and site-wide config, your static site can behave almost like a dynamic web application.

Coming Up Next

In the next article, we’ll learn how to organize and version your include files and layout fragments to scale your Jekyll site in a team environment.