Mastering Django Templates: Guide with Examples

Django, a popular Python web framework, offers a robust templating engine that enables developers to create dynamic and data-driven web pages. Django templates provide a seamless way to separate the design and presentation logic from the business logic of your application. In this guide, we’ll delve into Django templates, explore their features, and provide you with practical examples to help you master the art of creating dynamic web pages.

1. Introduction to Django Templates

Django templates are a powerful tool for generating HTML dynamically. They allow you to inject data from your application into HTML files, making it possible to create dynamic and data-driven web pages without mixing Python code directly into your HTML.

2. Basic Template Syntax

Django templates use double curly braces {{ }} to enclose template variables. For example:

<h1>Hello, {{ user.username }}!</h1>

3. Template Variables

Template variables represent dynamic data from your application. They can be simple values, attributes of objects, or the results of function calls:

<p>Your account balance: ${{ account.balance }}</p>

4. Template Filters

Filters allow you to format and manipulate template variables. For instance:

<p>Joined on: {{ user.join_date|date:"F d, Y" }}</p>

5. Template Tags

Template tags are enclosed in curly braces {% %} and provide control structures and logic in your templates. An example of an if tag:

{% if user.is_authenticated %}
    <p>Welcome back, {{ user.username }}!</p>
{% else %}
    <p>Please log in to access your account.</p>
{% endif %}

6. Template Inheritance

Template inheritance allows you to create a base template with common structure and placeholders for content. Child templates then extend the base template and override specific blocks with their content:

<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Default Title{% endblock %}</title>
</head>
<body>
    <div class="content">
        {% block content %}{% endblock %}
    </div>
</body>
</html>
<!-- child.html -->
{% extends "base.html" %}

{% block title %}Custom Title{% endblock %}

{% block content %}
    <p>This is the content of the child template.</p>
{% endblock %}

7. Conditional Rendering

You can use template tags like {% if %} and {% else %} for conditional rendering:

{% if product.in_stock %}
    <p>This product is available.</p>
{% else %}
    <p>This product is currently out of stock.</p>
{% endif %}

8. Looping in Templates

Loop through lists or querysets using the {% for %} tag:

<ul>
{% for item in shopping_list %}
    <li>{{ item }}</li>
{% endfor %}
</ul>

9. Including Templates

Reuse commun components across templates using the {% include %} tag:

{% include "header.html" %}
<p>This is the main content.</p>
{% include "footer.html" %}

10. Custom Template Tags and Filters

Extend Django’s template engine by creating your own custom template tags and filters to perform specialized operations:

# custom_tags.py
from django import template

register = template.Library()

@register.filter
def double(value):
    return value * 2
<!-- template.html -->
<p>Twice the value: {{ some_value|double }}</p>

11. Template Context

Context is a dictionary that holds the template variables and their values. It’s passed to the template when rendering:

from django.shortcuts import render

def my_view(request):
    context = {'username': 'Alice'}
    return render(request, 'template.html', context)
<!-- template.html -->
<p>Hello, {{ username }}!</p>

Django templates empower you to create dynamic, responsive, and interactive web pages while maintaining a clear separation of concerns. By harnessing the power of template variables, filters, tags, and inheritance, you can create visually appealing and data-rich web applications efficiently.

Remember that Django’s template engine provides much more than what’s covered here, so don’t hesitate to refer to the official documentation for further exploration and to enhance your skills with this essential tool for web development.

Blogs You Might Like to Read!