block.super has been added

Question

Hi there,

In html files, {{ block.super }} has been added and I don't know where it comes from. I think this is some modification by Kenneth outside the video, but I would like to understand how it is built and how it works.

Thanks for your help, below the code of one html file:

{% extends "courses/layout.html" %}
{% load humanize course_extras %}

{% block title %}{{ course.title }}{% endblock %}

{% block content %}
    <div class="row columns">
        {{ block.super }}
        <article>
            <h1 class="">{{ course.title }}</h1>
                <p>There are {{ steps|length|apnumber }} step{{ steps|length|pluralize }} in this course: {{ steps|join:", " }}</p>
            <div class="callout secondary">
                {{ course.description|markdown_to_html }}
            </div>

            <dl>
                {% for step in steps %}
                    <dt>
                        <a href="{{ step.get_absolute_url }}">{{ step.title }}</a>
                    </dt>
                    <dd>{{ step.description|markdown_to_html }}</dd>
                {% endfor %}
            </dl>
        </article>
    </div>
{% endblock %}

Besides, in course_list.html, there was a line to load the static file, and it disappears, however, everything works correctly, do you know why? Here is the code:

{% extends "courses/layout.html" %}

{% block title %}All{% endblock %}

{% block content %}
    <div class="row columns">
        {{ block.super }}
    </div>
    <div class="row">
        {%  for course in courses %}
            <div class="small-6 columns">
                <div class="callout">
                    <h5><a href="{% url 'courses:detail' pk=course.pk %}">{{ course.title }}</a></h5>
                    <div class="card-copy">
                        {{ course.description }}
                    </div>
                </div>
            </div>

            {% if forloop.counter|divisibleby:"2" %}
                </div>
                <div class="row">
            {% endif %}
        {% endfor %}
    </div>
{% endblock %}

Answer 1 · 2018-01-23T21:22:08Z

January 23, 2018 9:22pm

From the docs:

If you need to get the content of the block from the parent template, the {{ block.super }} variable will do the trick. This is useful if you want to add to the contents of a parent block instead of completely overriding it. Data inserted using {{ block.super }} will not be automatically escaped (see the next section), since it was already escaped, if necessary, in the parent template.

https://docs.djangoproject.com/en/2.0/ref/templates/language/#template-inheritance

Answer 2 · 2018-01-24T08:29:42Z

January 24, 2018 8:29am

Hi Henrik,

Thanks for your response, however when I comment the {{ block.super }} in html it doesn't change anything on the webpage.

Does 'extends "layout.html" ' make the job to get a block in it?

Answer 3 · 2018-01-24T14:54:56Z

January 24, 2018 2:54pm

{{ block.super }} takes what is between the blocks {% block block_name %}{% endblock %} from layout.html and insert it in the template where you use {{ block.super }}

layout.html

<title>{% block title %}My site{% endblock %}</title>

index.html

{% extends 'layout.html' %}

{% block title %}Home | {{ block.super }}{% endblock %}

The title in index.html will now be Home | My site.

I hope this makes sense?

Answer 4 · 2018-01-24T15:23:34Z

January 24, 2018 3:23pm

Henrik,

This example is perfectly understandable, however it still send an error in another case. Here is the message I just sent on another topic:

Hi there,

In my file quiz_form.html, there is a block {{ block.super }}, that generates an error:

NoReverseMatch at /courses/1/create_quiz/ Reverse for 'detail' with keyword arguments '{'pk': ''}' not found. 1 pattern(s) tried: ['courses\/(?P<pk>[0-9]+)\/$']

Here is the code below. There are layout.html (project directory):

<!doctype html>
{% load static from staticfiles %}
{% load course_extras %}
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" href="{% static 'css/foundation.min.css' %}">
        <link rel="stylesheet" href="{% static 'css/layout.css' %}">
        {% block css %}{% endblock %}
        <script src="{% static 'js/vendor/modernizr.js' %}"></script>
        <meta class="foundation-mq">
    </head>
    <body>
        <nav class="top-bar" role="navigation">
            <section class="top-bar-left">
                <ul class="dropdown menu" data-dropdown-menu role="menubar">
                    <li class="menu-text">The Learning Site</li>
                    <li class="has-submenu">
                        <a href="#">Courses</a>
                        <ul class="submenu menu vertical" data-submenu role="menu">
                            {% nav_courses_list %}
                            <li><a href="{% url 'courses:list' %}">See all &rarr;</a></li>
                        </ul>
                    </li>
                </ul>
            </section>
        </nav>
        {% if messages %}
            <div class="row">
                <div class="small-6 small-centered columns">
                    {% for message in messages %}
                        <div data-alert class="callout {{ message.tags }}">
                            {{ message }}
                            <a href="#" class="close">&times;</a>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
        {% block content %}{% endblock %}
        <footer class="row columns">
            <hr/>
            <div class="small-6 columns">
                <p>&copy; The Learning Site</p>
            </div>
            <div class="small-6 columns">
                <ul class="inline-list no-bullet float-right">
                    <li><a href="{% url 'courses:list' %}">Courses</a></li>
                </ul>
            </div>
        </footer>
        <script src="{% static 'js/vendor/jquery-2.1.4.min.js' %}"></script>
        <script src="{% static 'js/vendor/what-input.min.js' %}"></script>
        <script src="{% static 'js/foundation.min.js' %}"></script>
        {% block javascript %}{% endblock %}
        <script>$(document).foundation();</script>
    </body>
</html>

layout.html (app directory):

{% extends "layout.html" %}

{% block title %}Courses | {{ block.super }}{% endblock %}

{% block content %}
    {{ block.super }}
    <ul class="breadcrumbs">
        <li><a href="{% url 'home' %}">Home</a></li>
        <li><a href="{% url 'courses:list' %}">Courses</a></li>
        {% block breadcrumbs %}{% endblock %}
    </ul>
{% endblock %}

and quiz_form.html: the error disappear when I delete the block.super (inside the block content)

{% extends "courses/layout.html" %}

{% block title %}New Quiz | {{ course.title }} {{ block.super }} {% endblock %}

{% block breadcrumbs %}
    <li><a href="{% url 'courses:detail' pk=course.pk %}">{{ course.title }}</a></li>
{% endblock %}

{% block content %}
<div class="row columns">
{{ block.super }}
    <h1>Make a new quiz</h1>
    <form action="" method="POST">
        {% csrf_token %}
        {{ form.as_p }}
        <input type="submit" class="button" value="Save">
    </form>
</div>
{% endblock %}

I think I don't get very well the implementation of the {{ block.super }} but when I delete it from quiz_form.html, I don't have the error anymore but the tree below the nav bar disappeared (courses/Course/Text for example)

Thanks for your help

Answer 5 · 2018-01-24T16:02:55Z

January 24, 2018 4:02pm

Looking at the error it looks like you have a problem with your urls.

{{ block.super }} inside {% block content %} in 'courses/layout.html' does absolutely nothing since the main 'layout.html' {% block content %} is empty.

Welcome to the Treehouse Community

Looking to learn something new?

Simon Amz

Simon Amz

block.super has been added

5 Answers

Henrik Christensen

Henrik Christensen

Simon Amz

Simon Amz

Henrik Christensen

Henrik Christensen

Simon Amz

Simon Amz

Henrik Christensen

Henrik Christensen