Using if else statements with Nunjucks

Conditions statements let you tests a condition and selectively display content. The is a very useful when using Nunjucks with Eleventy.

Many situations call for specific types of these conditions, so I wanted to show a collection of the conditions that I frequently use when developing with Eleventy and Nunjucks.

In Nunjucks there are two conditional statement syntax options to choose from that are very similar to how Twig (PHP) templating language works:

  1. The traditional "conditional" syntax {% if %} that is like the liquid syntax.
  2. or the "expression" syntax {{ }} that is easier to type.

Both versions of the syntax function the same. I use the expression syntax whenever there is no else statement needed.

Create an active state for navigations

As with many of these statements there are multiple ways to create conditions. Which method you use is up to you and what works best with your developments methodology.

Option 1: Chain it to the front matter

This is a two part process, first we need to add a key to our page or category index.njk front matter. Here I used the key - "tag". Now Nunjuck has a reference to that page or category.

---
tag: blogPages
---

Now we echo the active class as a string and add the the if expression to the navigation anchor. I like this method as I use the "tags" key for multiple other conditions as well.

<a href="/blog/" class="{{ 'active' if tag == "blog-page"}}">BLOG</a>

Then add the CSS class a.active.

Option 2: Page URL variable

Use the Eleventy page.url variable for accessing a current page URL and the Nunjucks in operator.

Conditional Syntax

<a href="/blog/" class="{% if '/blog' in page.url %}active{% endif %}BLOG</a>

With the conditional syntax you need to use the endif operator.

Expression syntax

<a class="nav__item {{ 'active' if '/blog' in page.url }}" href="/blog">Blog</a>{% endif %}

If else statements

This statement is so useful. Here we check if the there is a front matter key of "toolsPages" and if there is we add the custom h1 to that page. I duplicate this if statement in an .njk file for all the category pages h1's and descriptions. This way I can store them all in one file and easily add and update them.

{%- if tags == "toolsPages" %}
<h1 class="cat--title">Free Tools For SEO and More!</h1>
{%- endif -%}

For a bonus tip: The dash at the begin and end of the syntax will remove any line breaks in your final HTML.

You can use the if statement like a true or false boolean also. Like if you want to show the post image from the post.njk file. You can setup your front matter data and use a key that sets the post image to true. I use "on" as a reference but it is not needed.

---
image: /assets/blog/11ty/nunjucks-if/nunjucks-if.jpg
imageAlt: Using if else statements with Nunjucks
postImage: true
---

The postImage: true tells the if statement that it is true. To make it false we just remove the the postImage: true key from the post front matter.

{%- if (postImage) -%}
<img src="{{ image }}" alt="{{ imageAlt }}"  width="1000" height="500">
{%- else -%}{%- endif -%}

We can also use the if condition to check for data beyond the post.njk file. This will check if the post front matter has a key of "excerpt" and if it does it will post that excerpt, else it will use the eleventyConfig addFilter excerpt function I use in the eleventy.js file. This is handy if you want to have custom excerpts beyond your excerpt addFilter function.

<p class="post--summary">
{%- if (post.data.excerpt) -%}{{ post.data.excerpt }}
{%- else -%}
{{ post.templateContent | excerpt }}{%- endif -%}
<a href="{{ post.url }}" class="read-more under--clr"> Read more...</a></p>

Else if and else statements

This if else statement will go through each one and add the title and meta description to that page. The else statement is for all the posts which gets the title and description for each post from its front matter.

{%- if tag == 'home-page' -%}
<title>Design 2 SEO...</title>
<meta name="description" content="Design 2 SEO was...">
{%- elif tag == 'tools-page' -%}
<title>Tools - Design 2 SEO</title>
<meta name="description" content="As technology...">
{%- else -%}
<title>{{ title }} - Design 2 SEO</title>
<meta name="description" content="{{ description }}">
{%- endif -%}

This again is very handy as you can manage all your title and descriptions from one file.

Conclusion

Nunjucks offers many options to converting your Node.js JavaScript data to HTML and these are just some of the main condition that I frequently use. I find it may be best to stick to the simpler conditions as there is limited documentation and it is mainly used by Eleventy.js.

Resources