Explain Template Inheritance with example.

4.A] Explain Template Inheritance with example.

Answer:-

Template Inheritance in Django is a technique for managing and reusing HTML across different pages of a web application. It allows you to define a base template with common layout elements and then extend this base template in other templates, providing a clean and maintainable way to handle site-wide design changes.

How Template Inheritance Works

  1. Base Template: Create a base template (base.html) that includes the common structure of your site, such as headers, footers, and navigation bars. This template will define “blocks” that child templates can override or fill with content.
  2. Child Templates: Create child templates that extend the base template. In these templates, you only include the unique content specific to that page. The child templates inherit the common layout from the base template and can override specific blocks.
  3. Blocks: Define blocks in the base template where the child templates can insert their content. A block is a placeholder for content that can be replaced or added to by child templates.

Example of Template Inheritance

1. Base Template (base.html)

Create a base template that includes the common elements of your site. In this example, base.html includes a header, a block for content, and a footer.

<!-- base.html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about/">About</a></li>
                <li><a href="/contact/">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    {% block footer %}
    <footer>
        <hr>
        <p>Thanks for visiting my site.</p>
    </footer>
    {% endblock %}
</body>
</html>

2. Child Template for Current Date (current_datetime.html)

Create a child template that extends the base.html template and fills in the blocks with content specific to the current date.

<!-- current_datetime.html -->
{% extends "base.html" %}

{% block title %}Current Date{% endblock %}

{% block content %}
    <p>It is now {{ current_date }}.</p>
{% endblock %}

3. Child Template for Future Time (hours_ahead.html)

Create another child template that extends the base.html template and provides content for a different view.

<!-- hours_ahead.html -->
{% extends "base.html" %}

{% block title %}Future Time{% endblock %}

{% block content %}
    <p>In {{ hour_offset }} hour(s), it will be {{ next_time }}.</p>
{% endblock %}

How It Works

  1. Loading the Template: When Django loads the current_datetime.html template, it first processes the {% extends "base.html" %} tag to load the base.html template.
  2. Replacing Blocks: Django identifies the {% block %} tags in the base.html template. For the current_datetime.html template, it replaces the {% block title %} with “Current Date” and {% block content %} with the specific content for that view.
  3. Fallback Content: If a child template does not override a block, Django uses the content from the base template. For example, if the hours_ahead.html template did not define a block for footer, it would inherit the footer from the base.html template.

Benefits of Template Inheritance

  • Reduced Redundancy: Common layout elements are defined once in the base template, reducing the need to duplicate HTML across multiple templates.
  • Maintainability: Changes to the common layout (e.g., navigation bar, footer) can be made in one place (the base template), and those changes will automatically apply to all child templates.
  • Flexibility: Child templates can override only the parts they need to change, keeping the structure consistent while allowing for different content.

Leave a Reply

Your email address will not be published. Required fields are marked *