Set up Nunjucks in Node.js

Nunjucks

There are many template engines for node.js, but nunjucks can be written in python. See here for detailed documentation. https://mozilla.github.io/nunjucks/

Almost the same as Jinja2. http://jinja.pocoo.org/docs/dev/

Install nunjucks npm

$ npm install nunjucks --save

Load with app.js

app.js

var express = require('express');
var path = require('path');
var nunjucks = require('nunjucks');
var app = express();

// nunjucks view engine
nunjucks.configure('views', {
    autoescape: true,
    express: app
});
// setup view engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

If you are using ʻexpress, specify it in nunjucks.configure. view engine is now html`.

Variable declaration

{% set x = 5 %}

Variable display

{{ x }}

if statement

{% if variable %}
  It is true
{% endif %}

for statement

{% set items = [{"title": "a"}, {"title": "b"}] %}
{% for item in items %}
  <p>{{ item.title }}</p>
{% endfor %}

If you want to convert in date format

Try using a library called nunjucks-date-filter. It seems that moment is used as a template.

Install nunjucks-date-filter and consolidate

$ npm install nunjucks-date-filter --save
$ npm install consolidate --save

Set in app.js

app.js

var express = require('express');
var path = require('path');
var nunjucks = require('nunjucks');
var dateFilter = require('nunjucks-date-filter');
var cons = require('consolidate');
var app = express();

// nunjucks view engine
cons.requires.nunjucks = require('nunjucks');
var env = cons.requires.nunjucks.configure('views', {
    autoescape: true,
    express: app
});
// date format
dateFilter.setDefaultFormat('YYYY-MM-DD');
env.addFilter('date', dateFilter);

// setup view engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

How to write in html

// with no format
This blog has been created at {{ creation_date | date }}.
 
// with a custom format
This blog has been created at {{ creation_date | date("YYYY") }}.
 
// with an addition first
This blog has been created at {{ creation_date | date("add", 7, "days") | date }}.