Django Templates

Template Basics

Django's template system is designed to separate the presentation of data from the business logic. Templates allow you to generate HTML dynamically by combining a template with context data.

Creating a Template

Templates are typically stored in a directory named templates within each app or at the project level. You can organize templates using subdirectories.

Template Structure

myproject/
	myapp/
   	templates/
       	myapp/
           	base.html
           	index.html

Rendering a Template

To render a template, use the render function provided by Django:


from django.shortcuts import render

def my_view(request):
    context = {
        'message': 'Hello, world!',
    }
    return render(request, 'myapp/index.html', context)

In this example, myapp/index.html is the template file, and context is the dictionary containing the data to be rendered.

Template Language

Django's template language provides a variety of tags and filters to control the rendering logic. Here are some common elements:

Variables

Variables are enclosed in double curly braces and are replaced with their corresponding values from the context.


<p>{{ message }}</p>

Tags

Tags provide logic within the template, such as loops and conditionals.

If Tag


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

For Tag


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

Filters

Filters modify the value of a variable before it is rendered.

Date Filter


<p>Published on: {{ pub_date|date:'F j, Y' }}</p>

Length Filter


<p>Number of items: {{ item_list|length }}</p>

Using Static Files

Django provides mechanisms to include static files like CSS, JavaScript, and images in templates.

Configuring Static Files

First, ensure your settings.py is configured to handle static files:


STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

Loading Static Files in Templates

Use the {% load static %} tag at the top of your template to load static files:


{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>My Site</title>
    <link rel='stylesheet' type='text/css' href='{% static 'css/styles.css' %}'>
</head>
<body>
    <img src='{% static 'images/logo.png' %}' alt='Logo'>
    <p>{{ message }}</p>
</body>
</html>

Template Inheritance

Template inheritance allows you to create a base template that other templates can extend. This promotes reuse and consistency across your templates.

Base Template

Define a base template with blocks that child templates can override:


<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}My Site{% endblock %}</title>
</head>
<body>
    <header>
        <h1>My Site</h1>
    </header>
    <nav>
        <!-- Navigation links -->
    </nav>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        <p>Footer content here</p>
    </footer>
</body>
</html>

Extending the Base Template

Child templates extend the base template and override the defined blocks:


{% extends 'base.html' %}
{% block title %}Welcome to My Site{% endblock %}
{% block content %}
    <p>{{ message }}</p>
{% endblock %}