[Solved]-Jinja {% extends %}

by

13👍

✅

You are replacing the body when you use the same block tag in your home.html that in your header.html

{% block content %}

You should use a different name if you dont want to replace it.

In addition you can use:

{{ block.super() }}

If you want to extend the block content data, notice it’s a different issue from extending a template.

👤lapinkoira

1👍

It is not clear to me what you are expecting.

The Jinja documentation about templates is pretty clear about what a block does:

All the block tag does is tell the template engine that a child template may override those placeholders in the template.

In your example, the base template (header.html) has a default value for the content block, which is everything inside that block. By setting a value in home.html, you are overriding that default value with another block.

If you want to add content below your navigation menu, simply rework your template to the following:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>M4A</title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'css/header.css' %}" />
<link rel="icon" href="../../static/image/logo.png">
</head>
<body class="body" style="background-color:#f9f9f9">
    <ul>
    <li><a href="/"><img src="../../static/image/logoRect.png" width="25"> </a></li>
    <li><a href="/movies">Movies</a></li>
    <li><a class="left" href="">Search</a></li>
    <li><a class="left" href="/profile/">Profile</a></li>
    <li><a class="left" href="#about">Explore</a></li>
</ul>
{% block content %}<p>This will appear if you don't set a block in the inheriting template.</p>{% endblock %}
</body>
</html>
👤brianpck

1👍

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

    <head>
    <meta charset="UTF-8">
    <title>M4A</title>
    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/header.css' %}" />
    <link rel="icon" href="../../static/image/logo.png">
    </head>

    {% block content %}
     <body class="body" style="background-color:#f9f9f9">
        <ul>
            <li><a href="/"><img src="../../static/image/logoRect.png" width="25"> </a></li>
            <li><a href="/movies">Movies</a></li>
            <li><a class="left" href="">Search</a></li>
            <li><a class="left" href="/profile/">Profile</a></li>
            <li><a class="left" href="#about">Explore</a></li>
        </ul>
     </body>
    {% endblock %}

    </html>

make body inside in block and change body backgound 

{% extends "START/header.html" %}

{% block content %}
<body class="body" style="background-color:#f23d49">
    <p> TEST</p> <!-- for example -->
</body>
{% endblock %}
👤Pushpendra Kumar

Leave a comment