Pooja Danu's Blog
Django Templates - 2

Django Templates - 2

Pooja Danu's photo
Pooja Danu
·

3 min read

Table of contents

Template inheritance

Template inheritance allows you to create a base template with common elements and then create child templates that extend this base template and provide specific content for different pages of your website.

By using template inheritance, you can avoid duplicating code and ensure consistency across your website. It also makes it easy to make changes to the overall layout or structure of your website by modifying the base template, with those changes automatically reflected in all the child templates.

Template inheritance is a powerful feature of Django's templating system that promotes code reuse, maintainability, and consistency in web development projects.

Lets create a base template in our app which will act as a base template for all.

Base Template (base.html)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Django </title>
</head>
<body>
    <h2> Welcome to My Django Website </h2>

    {% block start %}

    {% endblock %}

</body>
</html>

This is the base template (base.html) that serves as the foundation for our website. It contains the basic HTML structure common to all pages. However, it includes a {% block start %} tag. This block acts as a placeholder for content that will be provided by child templates.

In Djangos' template system, {% block %} tags are used to define blocks of content that can be overridden or extended by child templates.
Let's break down {% block start %} and {% endblock %} and explain their purposes:

  1. {% block start %}: This tag marks the beginning of a block named start. It defines a section of the template where content can be inserted. Any content placed between {% block start %} and {% endblock %} in the parent template can be overridden by child templates that extend this parent template.

  2. {% endblock %}: This tag marks the end of a block. It indicates where the block defined by the corresponding {% block %} tag ends.All content between the {% block %} and {% endblock %} tags is considered part of the block and can be overridden or extended by child templates. It's important to use {% endblock %} to close every {% block %} tag to properly define the boundaries of the block.

Child Template (about .html)

{% extends 'main.html' %}

{% block start %}

<h2> this is about page </h2>

{% endblock %}

The child template (about.html) extends the base template (base.html) using the
{% extends 'base.html' %} tag. This means that all the content and structure from the base template will be inherited by the child template.

However, the child template also defines a {% block start %} tag. This is where the magic of template inheritance happens. By defining a block with the same name as in the base template, the child template is able to override the content of that block.

In this case, the content inside the {% block start %} tag in about.html replaces the content inside the same block in base.html. So when this child template is rendered, the output will be the complete HTML page structure from base.html with the content specific to the homepage provided by about.html.

PythonDjango