Step 8

Let's try something! Open index.js and update the route handler for GET /:

app.get("/", (req, res) => {
  res.render("index.njk", { message: "This is a message!" });
});

Notice I'm passing an object containing a message property to the index.njk template file.

Save index.js and visit http://localhost:5001/:

Notice the message appears at the top of the page and it is dismissible.

How did this happen? Well, open index.njk and notice the body block starts with

{{ super() }}

This statement means include whatever is already defined in the body block inside the base template (base.njk). So open base.njk and notice the content of the body block:

{% block body %}
  {% if message %}
    {% include "alert.njk" %}
  {% endif %}
{% endblock %}

The statement above indicate, if there is a message variable passed to the template, then include the content of alert.njk in that place. So, open alert.njk:

<div class="alert">
  <div class="closebtn" onclick="this.parentElement.style.display='none';">&times;</div>
  {{ message }}
</div>

The alert.njk basically contains the dismissible message element that was displayed when you visited the app's homepage.