Skip to content

So... nunjucks?

Nunjucks was made by Mozilla ❤️

Written by Eva Dee on (about a 2 minute read).

What is Nunjucks? permalink

A templating language is like a preprocessor for HTML (what SASS is to CSS) 👍.

Template engines are tools that help us break HTML code into smaller pieces that we can reuse across multiple HTML files.

They also give you the power to feed data into variables that help you simplify your code (from).

Why use it?

  • It lets you break HTML code into smaller files
  • It lets you use data to populate your markup (DRY code baby)
  • I'm learning 11ty, where Nunjucks is the preferred templating language.

File extension permalink

Can be .njk but also just .html.

Variables permalink

This is how you write variables:

  • also

You can also do if and for and other stuff (just like in JavaScript).

Filters permalink

Filters are functions (note the | ). Filters can be builtin or made by you.

Some built-in filters:

  • capitalize
  • lower
  • random
  • replace
  • reverse
  • safe
  • trim
  • urlize (Convert URLs in plain text into clickable links:)

Template inheritance permalink

Template inheritance is where nunjucks really shines!

Includes permalink

include pulls in other templates in place (especially partials)

  • filenames that begin with _ are not built so they are ideal for partials.

Extends permalink

  • extends allow you to define a template document with “blocks” inside of it that are meant to take chunks of content.

  • this allows us to define a base template, and then override parts of it within the child template. This is known as template inheritance.

Macros (import) permalink

  • macros are imports with parameters - a.k.a. functions!

Whitespace permalink

  • You can tell the engine to strip all leading or trailing whitespace by adding a minus sign (-) to the start or end block or a variable.

Autoescaping permalink

  • If autoescaping is turned on in the environment, all output will automatically be escaped for safe output. To manually mark the output as safe, use the safe filter. Nunjucks will not escape this output.