Express not rendering Nunjucks properly

Question

I am not sure if this is an issue with express or wether I am doing something wrong with nunjucks. I want to create a template hierarchy where template contains all the commons parts and specific pages extend template. For some reason the body field is block. If I change extend directive to include inside the template.nunj everything works properly but I can't extend header. I also tried explicitly declaring the header block in template.nunj and index.nunj and called super() but for some reason either the header or the body comes blank.

express setup:

nunjucks.configure(path.resolve(__dirname, '.', 'views'), {
    autoescape: true,
    express: app,
    watch: true, 
    cache: false,
});

app.set('view engine', 'nunj');

layout.nunj:

<!DOCTYPE html>
<html lang="en">

{% extends './common/header.nunj' %}

<body>
    <div class="container">
        {% block mainContainer %} 
            <p>This should be working</p>
        {% endblock %}
    </div>
</body>

</html>

index.nunj

{% extends 'layout.nunj' %}

{% block mainContainer %} 
    {{ super() }}
    <p>This should be rendering</p>
{% endblock %}

header.nunj

{% block header %}
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="/css/style.css">
        <title>Dari Dictionary</title>

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    </head>
{% endblock %}

Because including it won't allow me to customize it in child templates. — Yasin Yaqoobi, Dec 11 '16 at 02:21

score -1 · Answer 1 · answered Dec 11 '16 at 02:47

According to http://jinja.pocoo.org/docs/dev/templates/#template-inheritance. You cannot add new block in Child Template or plain html. You have to use the blocks define in the base template, layout in this case.

Layout.nunj

<!DOCTYPE html>
<html lang="en">
    <head>
      {% block header %}
      {% endblock %}
    </head>
<body>
    <div class="container">
        {% block mainContainer %} 
            <p>This should be working</p>
        {% endblock %}
    </div>
</body>
</html>

header.nunj

{% extends 'layout.nunj' %}
{% block header %}
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/style.css">
    <title>Dari Dictionary</title>

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
{% endblock %}

index.nunj

{% extends 'header.nunj' %}

{% block mainContainer %} 
    {{ super() }}
    <p>This should be rendering</p>
{% endblock %}

This is an incorrect template hierarchy. It doesn't make sense to extend your layout inside your header. Also, your statement about adding new block is incorrect. You can't add multiple blocks of the same name but you can easily add new blocks in the child that's not in the parent. — Yasin Yaqoobi, Dec 12 '16 at 02:08
Show me a working exemple when you add new block in child template. — mrdotb, Dec 12 '16 at 14:38

Express not rendering Nunjucks properly

1 Answers1