Node.js app with Nunjucks (Part 3)
After building the basic Node.js app and configuring Nunjucks, we have everything ready and can start creating individual pages and learning about inheritance.
Template inheritance
First, you should create some subdirectories in the views directory to logically structure the templates. You need layouts where you keep the templates containing the overall page structure. Move the index.njk file there. You also need partials, where you will keep templates of the elements that are common to all or most pages, like the header and footer. And finally, you also need a mainContent directory where you will keep templates of the individual pages main content.
.
├── package.json
├── package-lock.json
├── src
│ ├── controllers
│ │ └── indexController.ts
│ ├── index.ts
│ └── views
│ ├── layouts
│ │ └── index.njk
│ ├── mainContent
│ └── partials
└── tsconfig.jsonOnce that’s done, open the index.njk file and start moving its parts to their own template files. In the partials directory, create a head.njk file and move the head section there. Then use the include tag to add it to the index.njk so that every time the latter is rendered, the content of the former will be pulled in exactly in the place where the include tag is placed.
It has to be inside {% %} since Nunjucks uses specific tokens to enclose variables, blocks, and comments (this is actually configurable; for details, see the customising syntax section of the documentation).
{{ variableName }}
{% some logic here %}
{# some comment here #}Next, create a file named home.njk in the mainContent directory and move to it the <h1> header from index.njk. However, this time instead of including the new partial template in the index.njk, add a <main> element to the <body>, and inside it create a new block tag with the mainContent identifier. It also requires a closing tag indicating the end of the block.
Then in home.njk, enclose the <h1> header in a block with the same identifier and make this partial template a child of index.njk, using the extends tag. This will cause the mainContent block in parent to be overwritten during rendering by the one in child. But you can also render the contents of the parent block inside a child block by calling the special function super() (check the documentation for details).
{% extends "layouts/index.njk" %}
{% block mainContent %}
<h1>{{ headerText }}</h1>
{% endblock %}Once this is done, your project structure should look like this:
.
├── package.json
├── package-lock.json
├── src
│ ├── controllers
│ │ └── indexController.ts
│ ├── index.ts
│ └── views
│ ├── layouts
│ │ └── index.njk
│ ├── mainContent
│ │ └── home.njk
│ └── partials
│ └── head.njk
└── tsconfig.jsonHappy coding!
If you’re interested in how these skills can be applied to larger projects, be sure to check out our Azure Application Modernisation Playbook.
About the author
Maciej Modzelewski is a Java Developer here at Version 1.
Originally published at http://maciejmodzelewski.com on February 15, 2024.
