CODEWITHSUNDEEP
htmlcssdjango
Joelad
Joelad

Reputation: 490

Can header and footer be called from the base?

Currently my dilemma is I want the div in my base.html to be in my home_page.html but I need it around my header, main and footer.

This is my base.html

<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
    {# header #}

    {# /header #}
    {% block content %}{% endblock %}
    {# footer #}

    {# footer #}
</div>

And this is my home_page that extends base.

{% extends "../base.html" %}
{% load static %}
{% load wagtailcore_tags wagtailimages_tags %}
{% block body_class %}Home{% endblock %}
{% block extra_css %}
    {# Override this in templates to add extra stylesheets #}

{% endblock %}
{% block extra_js %}
    {# Override this in templates to add extra javascript #}

{% endblock %}
{% block content %} {#    html stuff sits in here#}
        <main role="main" class="inner cover">

{% endblock %}

Is there a way to call on the header and footer specifically in the homepage.html?

Upvotes: 1

Views: 89

Answers (2)

bruno desthuilliers
bruno desthuilliers

Reputation: 77912

I only want this div to be on the home page and not all the pages

I assume that what you mean here is that you only want this div to have this particular set of classes for the home page, and not for other pages (IOW, having a div with no classes or other classes is ok for the other pages).

If that's the case, the solution is simple: leave the div where it is, but wrap the div's classes into it's own block (with default - eventually empty - values), and override thsi block in the home page, ie:

base.html:

<div class="{% block page-css-class %}{% endblock %}">
    {# header #}

    {# /header #}
    {% block content %}{% endblock %}
    {# footer #}

    {# footer #}
</div>

and home.html

{% extends "../base.html" %}

{% block page-css-class %}cover-container d-flex h-100 p-3 mx-auto flex-column{% endblock %}

{# your remaining code here #}

Upvotes: 2

Abhyudai
Abhyudai

Reputation: 934

extends tag is used to inherit your parent template into the child template. It then looks for theblock tags in your parent template and replaces it with the values of the child template.
include tags loads a template and renders with the current context. You probably want to use {% include "footer.html" with my_context_variable=value %} to pass additional context.You can read more about it here.

Upvotes: 0

Related Questions