Conditions and Control Flow

Sometimes a template should render something only when a condition is true.

That is a tag job.

Liquid tag syntax

Tags use:

{% if page.featured %}
  <p>Featured project</p>
{% endif %}

Unlike {{ ... }}, this block controls whether markup is included.

Guided experiment

Front matter:

featured: true

Template:

{% if page.featured %}
  <span>Featured</span>
{% endif %}

Build and inspect generated HTML.

Then change:

featured: false

Build again.

Compare the generated HTML, not just the browser.

Missing vs false

Test a page with the featured key removed entirely.

Does the conditional render?

Record the behavior.

This is why template logic needs assumptions you can state.

Branching

You can also model alternatives:

{% if page.status == "complete" %}
  <span>Complete</span>
{% else %}
  <span>In progress</span>
{% endif %}

Keep template logic readable.

If a page becomes a maze of nested conditions, the content model may need redesign.

Portfolio action

Add one purposeful conditional, such as:

• featured project badge;
• optional project link;
• optional image;
• status label.

Do not add conditions merely to satisfy the lesson.

Failure analysis

If a valid conditional never renders, inspect:

1. the front-matter value;
2. its type;
3. the key name;
4. the comparison value;
5. the generated result.

Checkpoint

Write one condition as plain English before writing Liquid.

Example:

If a project has a public repository URL, show the repository link. Otherwise, omit the link.

Then implement it.