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
- 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. - 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.
- 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
- Loading the Template: When Django loads the
current_datetime.html
template, it first processes the{% extends "base.html" %}
tag to load thebase.html
template. - Replacing Blocks: Django identifies the
{% block %}
tags in thebase.html
template. For thecurrent_datetime.html
template, it replaces the{% block title %}
with “Current Date” and{% block content %}
with the specific content for that view. - 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 forfooter
, it would inherit the footer from thebase.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.