Django / Django Templates

Creating and Extending Base Templates

This tutorial delves into the concept of Template Inheritance in Django. We will learn how to create a base template and extend it in child templates, promoting code reuse and con…

Tutorial 2 of 5 5 resources in this section

Django Basics Django Installation and Setup Django Models Django Views and URL Routing Django Templates Django Forms and Validation Django Admin Panel Django Authentication and Authorization Django REST Framework (DRF) Django Middleware Django Signals Django File Uploads and Media Management Django Deployment and Production

Section overview

5 resources

Covers the Django templating engine, template inheritance, and dynamic content rendering.

1. Introduction

1.1. Tutorial's Goal

This tutorial aims to provide a comprehensive understanding of template inheritance in Django. By the end of this tutorial, you will learn how to create a base template and extend it in child templates.

1.2. What the user will learn

Basics of Template Inheritance
Creating a Base Template
Extending a Base Template in Child Templates

1.3. Prerequisites

A basic understanding of Django, Python, and HTML is required. Familiarity with Django's templating language will be helpful.

2. Step-by-Step Guide

2.1. What is Template Inheritance?

Template inheritance is a feature in Django's templating system that allows you to build a base "skeleton" template that contains all the common elements of your site, and then extend it in child templates for different parts of your site.

2.2. Creating a Base Template

A base template usually contains elements like the site title, navigation bar, footer etc. Here's an example:

<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <header>
        <!-- navigation bar -->
    </header>
    <main>
        {% block content %}
        {% endblock %}
    </main>
    <footer>
        <!-- footer -->
    </footer>
</body>
</html>

In this example, {% block title %}{% endblock %} and {% block content %}{% endblock %} are placeholders for content that will be filled in by child templates.

2.3. Extending a Base Template

To extend a base template, we use the {% extends "base.html" %} tag at the top of the child template. Here's an example:

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

{% block title %}
Home Page
{% endblock %}

{% block content %}
<p>Welcome to the Home Page!</p>
{% endblock %}

In this example, the {% block title %} and {% block content %} tags in the base template are replaced with the content in the child template.

3. Code Examples

Here are some more practical examples:

3.1. Example 1: Extending the Base Template with Different Titles

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

{% block title %}
About Page
{% endblock %}

{% block content %}
<p>Welcome to the About Page!</p>
{% endblock %}

3.2. Example 2: Extending the Base Template with Multiple Content Blocks

<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <header>
        <!-- navigation bar -->
    </header>
    <main>
        {% block content1 %}
        {% endblock %}
        {% block content2 %}
        {% endblock %}
    </main>
    <footer>
        <!-- footer -->
    </footer>
</body>
</html>

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

{% block title %}
Home Page
{% endblock %}

{% block content1 %}
<p>Welcome to the Home Page!</p>
{% endblock %}

{% block content2 %}
<p>Enjoy your stay.</p>
{% endblock %}

4. Summary

In this tutorial, we've learned about template inheritance in Django, how to create a base template, and extend it in child templates. This promotes code reuse and consistency across your site.

5. Practice Exercises

5.1. Exercise 1

Create a base template with a navigation bar, main content area, and footer. Then create three child templates (Home, About, Contact) that extend the base template.

5.2. Exercise 2

Modify the base template from Exercise 1 to include a sidebar content block. Extend this new base template in a child template.

5.3. Exercise 3

Create a base template with two content blocks. Then create a child template that only fills one of the content blocks.

Solutions

Solution to Exercise 1

Link to Solution

Section overview

1. Introduction

1.1. Tutorial's Goal

1.2. What the user will learn

1.3. Prerequisites

2. Step-by-Step Guide

2.1. What is Template Inheritance?

2.2. Creating a Base Template

2.3. Extending a Base Template

3. Code Examples

3.1. Example 1: Extending the Base Template with Different Titles

3.2. Example 2: Extending the Base Template with Multiple Content Blocks

4. Summary

5. Practice Exercises

5.1. Exercise 1

5.2. Exercise 2

5.3. Exercise 3

Solutions

Solution to Exercise 1

Solution to Exercise 2

Solution to Exercise 3

Need Help Implementing This?

Related topics

HTML

CSS

JavaScript

Python

SQL

PHP

Popular tools

Favicon Generator

Watermark Generator

HTML Minifier & Formatter

Meta Tag Analyzer

EXIF Data Viewer/Remover

Latest articles

AI in Drug Discovery: Accelerating Medical Breakthroughs

AI in Retail: Personalized Shopping and Inventory Management

AI in Public Safety: Predictive Policing and Crime Prevention

AI in Mental Health: Assisting with Therapy and Diagnostics

AI in Legal Compliance: Ensuring Regulatory Adherence

Need help implementing this?