Nunjucks - Add Custom Function

  • Estimated read time: 3 min read
  • Written by Chad Campbell on Oct 23rd 2016

As of the time of writing, this site used Nunjucks in the views. While creating one of my utility apps, specifically Delimiter, I needed a custom function. If you look at Delimiter, you'll notice that it takes up the entire width of the page. However, this post that you're currently reading uses a fixed width. I wanted to control the layout on the server-side, at design-time. For that reason, I wanted a custom function that looked like this:

function getLayoutClass(layout) {
    let className = '';
    if (layout === 'full') {
        className = "container-fluid";
    } else {
        className = 'container';
    }
    return className;            
}

This function is pretty straightforward. container and container-fluid are class names in Bootstrap. I wanted to choose one of them based on the value of layout. But the real question was, how do I use this function within my views, which are rendered by Nunjucks? To do this, I knew I had to break down the problem into two steps.

Step 1

The first step was to make the function available to the templates. That means, I had to figure out where in my Node app to place the getLayoutClass that would make it accessible in my Nunjucks template (i.e. .html file).

In my pursuit of trying to figure that out, I discovered the addGlobal function. This function let's you add a globally scoped value across all of your Nunjucks views. To actually add it, I chained a call to addGlobal onto my configure call. That means when I wired up Nunjucks in my app, it ended up looking like this:

nunjucks
    .configure(path.join(__dirname, '../views'), { express: app })
    .addGlobal('getLayoutClass', function(layout) {
        let className = '';
        if (layout === 'full') {
            className = "container-fluid";
        } else {
            className = 'container';
        }
        return className;
    })
;

Same function as defined before. Just written slightly differently. My next step was to actually call this function from my template.

Step 2

I knew I would need the value in a couple of spots in my template. For that reason, I created a variable in my template using the set tag. I used the set tag in my template like this:

{% The "mode" variable is passed into the template. It will either be 'full' or 'fixed' for now. %}
{% set layoutClass = getLayoutClass(mode) %}

Once the layoutClass variable was created and set, I could use it in the template. I ended up using this variable like this:

Hello. This is a block of text.

With these two steps, I was able to create and use a reusable custom function in Nunjucks. The trickier part was probably step 1. Still, I hope you found this post helpful. If you did, I hope you'll check out some of the training courses I've created. If there are topics you're curious about, please feel free to mention them in the comments below. Thanks for reading.


Comments

comments powered by Disqus

Chad Campbell
Chad Campbell

Chad is an independent software professional. He has been named a Microsoft MVP five times. His books have been translated into multiple languages and distributed worldwide. He holds a computer science degree from Purdue University, where he also studied psychology.

Chad has built sites, apps, frameworks, libraries, and platforms using Java, .NET, and Node. He's ran his own startups and has created software for Fortune 100 companies. In short, Chad knows how to create software. From ideation to delivery. From start-to-finish.


Follow Chad Online