Multiple level template inheritance in Jinja2?

Question

I do html/css by trade, and I have been working on and off django projects as a template designer. I’m currently working on a site that uses Jinja2, which I have been using for about 2 weeks. I just found out through reading the documentation that Jinja2 doesn’t support multiple level template inheritance, as in you can’t do more than one

{% extends "foo" %}

per rendering. Now I’m pretty sure you can do this in Django, which is powerful because you can specify a base template, specify 3 or 4 templates based on that, and then build the meat of your pages using those base templates. Isn’t the point of inheritance so you have more power to abstract so your only really messing with unique code?

In any case I have no idea what to do here. I don’t know if there is some way I can do it that will work as well as it could with the Django templates. I’m not exactly an expert at either Django or Jinja(2) but I can provide any information needed.

Asked By: Rey

||

Source

Answer 1

The way the documentation worded it, it seemed like it didn’t support inheritance (n) levels deep.

Unlike Python Jinja does not support
multiple inheritance. So you can only
have one extends tag called per
rendering.

I didn’t know it was just a rule saying 1 extends per template…. I now know, with some help from the jinja irc channel.

Answered By: Rey

Answer 2

One of the best way to achieve multiple level of templating using jinja2 is to use ‘include’
let say you have ‘base_layout.html‘ as your base template

<!DOCTYPE html>
<title>Base Layout</title>
<div>
  <h1>Base</h1>
  .... // write your code here
  {% block body %}{% endblock %}
</div>

and then you want to have ‘child_layout.html‘ that extends ‘base_layout.

{% include "base_layout.html" %}
  <div>
  ... // write your code here
  </div>
{% block body %}{% endblock %}

and now your page can just extends ‘child_layout.html‘ and it will have both base_layout.html and child_layout.html

{% extends "child_layout.html" %}
{% block body %}
  ...// write your code here
{% endblock %}

Answered By: Toni

Answer 3

See the documentation extending, including, and importing.

This provides the means of getting functionality from multiple files for different purposes and is different from the depth of the nesting.
You can perfectly have a template that extends a template that extends a template…

Answered By: brita_

Answer 4

I recently faced the same issue. I wanted to inherit several child templates and it worked. To illustrate it I would like to show you a solution that worked for me:

I had a base.html file that has block content and extended by manage.html. and that manage.html has a block sub_manage which is extended by internet_market.html, so visually it looks like:

|- base.html (block content)
|--manage.html (extends base.html)
|---sub_manage.html (extends manage.html)

when I rendered it, everythink worked fine, which means that you can have several {% extends %} in one render. the only thing is that if you are using relative links to your css or js files then it might not work, rather it will render, but it won’t find your css/js files.
like:

<head>  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
<style type="text/css">
</head>

In that case you have to use dynamic links by using url_for. like:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{url_for("static", filename = "css/bootstrap.min.css")}}">
<script type="text/javascript" src="{{url_for("static", filename = "js/bootstrap.min.js")}}"></script>
<style type="text/css">

Answered By: Max

Answer 5

Try this, this work for me thanks to @Ixm answer.

base.html

<html >
    <body>
      {% block content %}{% endblock %}
    </body>
</html>

content.html

{% extends "base.html" %}
{% block content %}
<table>
  <tr>
  {% include "footer.html" %}
  </tr>
</table>
{% endblock %}

footer.html

{% block footer %} <td> test</td>{% endblock %}

and call with

env = Environment(loader=FileSystemLoader(os.path.join(path, "Layouts")))
template = env.get_template('content.html')
html = template.render()
print html

Answered By: Carlos Rodriguez

Answer 6

You could use the following way to combine different contents into a single layout.html for various layout designs:

{% if instance == 'type1' %}

{% elif instance == 'type2' %}

{% else %}

{% endif %}

…and call:

render_template('layout', instance='%s' % instance)

in python code.

Answered By: lei dong

Answer 7

After struggling for a long time, I found {{super}} for multiple levels of inheritance in jinja2 templates.

The following is inspired from https://stackoverflow.com/a/31093830/1300775.

base.html

<html>
<body>
  {% block title %}
    Brand
  {% endblock %}
</body>

layer-1.html

  {% extends "base.html" %}
  {% block title %}
    {{ super() }} - Section
  {% endblock %}

layer-2.html

  {% extends "layer-1.html" %}
  {% block title %}
    {{ super() }} - Article
  {% endblock %}

Rendering template layer-2.html will output Brand - Section - Article (give or take a few spacing characters due to the indentation).

Answered By: Damien

Answer 8

Multiple inheritance and multiple-level inheritance are not the same. I understand the question is related to the latter.

Let me show my workaround for the problem:

parent-template.html

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

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Your Title</title>
    <link rel='stylesheet' href="{{ url_for('static', filename='css/main.css') }}">
    {% block head %}{% endblock %}
</head>

<body>
    {% block nav %}{% endblock %}
    {% block body %}{% endblock %}
</body>

</html>

child-template.html

{% extends 'parent-template.html' %}

{% block nav %}
<header>
    <div>
        <nav>
            ...
            [navbar html code]
            ...
        </nav>
    </div>
</header>
{% endblock %}

login.html (where I don’t need navbar)

{% extends 'parent-template.html' %}

{% block body %}
<header>
    ...
    [header html code]
    ...
</header>
<main>
    ...
    [main html code]
    ...
</main>
{% endblock %}

home.html (where I need navbar)

{% extends 'child-template.html' %}

{% block body %}
<main>
    ...
    [main html code]
    ...
</main>
{% endblock %}

Both login.html and home.html uses all the data from parent-template, but only home.html uses data from child-template (the navbar).

Answered By: S.Dave

Multiple level template inheritance in Jinja2?

Question:

Answers: