DEV Community

Cover image for Let's Learn Django #5 Django Template
Rachit Khurana
Rachit Khurana

Posted on • Updated on

Let's Learn Django #5 Django Template

In the previous blog, we looked at how to set up and use Django templating. Now, let's dive deeper into Django templating and explore its powerful features.

Django templating is very powerful. It supports a large number of tags like if, for, cycle etc.

Basics:

We display the variables we passed using double curly brackets

Like this: {{ variable_name }}

And we use Django template tags using a pair of curly brackets & percent sign.

Like this: {% if age>18 %}Adult{% else %}Child{% endif %}

To use filters, we add a pipe symbol in front of the variable.

Like this: {{ name|length }}

Now we will have a look at the common template tags in Django

Template Tags

if tag

If tag is a pretty simple tag used to add a condition to the template content.

it supports almost all conditions we use in python. Like comparing values, checking membership etc. We can check if an element is in the list.

Do note that we also need to add an endif tag when we are done with the condition.

For eg.

    <body>
        <h1>Hello World!</h1>
        <p>My name is <strong>{{name}}</strong></p>
        {% if name|length < 5 %}
            <p>My name is short</p>
        {% elif name|length < 10 %}
            <p>My name is long</p>
        {% else %}
            <p>My name is very long</p>
        {% endif %}
        <p>My age is <strong>{{age}}</strong></p>
    </body>
Enter fullscreen mode Exit fullscreen mode

for Tag

The "for" tag allows us to iterate over sequences, such as lists, dictionaries, or querysets, similar to looping in Python. By utilizing this tag, we can display and manipulate each item in the sequence.

For eg:

For this, I passed a basic list from the views.py file like this:

def hello(request):
    name="Rachit"
    age=19
    Interests=['Coding', 'Reading', 'Gaming']
    return render(request, 'hello.html', {'name':name, 'age':age, 'Interests':Interests})
Enter fullscreen mode Exit fullscreen mode

and the template will contain:

{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!</title>
        <link rel="stylesheet" href="{% static 'style.css' %}">
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>My name is <strong>{{name}}</strong></p>
        <p>My age is <strong>{{age}}</strong></p>
        <p> Interests: </p>
        <ul>
            {% for interest in Interests %}
                <li>{{interest}}</li>
            {% endfor %}
        </ul>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

extends and block tag

These 2 tags are generally used together. If we want to create a base template & then put data or other HTML elements inside it using a different file, we use these tags.

First, we will add a block tag in the base file & then extend that base file to another file, & use the block tag to put more HTML elements in it.

For eg. I will create a new base.html file with the following content making use of the block tag.

{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!</title>
        <link rel="stylesheet" href="{% static 'style.css' %}">
    </head>
    <body>
        <h1>Django Tutorial</h1>
        <p>Hi there! This is a Django tutorial.</p>
        {% block content %}
        {% endblock content %}
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now, we will edit hello.html to extend this & place more content in the content block.

{% extends 'base.html' %}
{% block content %}
    <h1>Home</h1>
    <p> Welcome to the home page!</p>
{% endblock %}
Enter fullscreen mode Exit fullscreen mode

This allows us to reuse templates & follow the DRY(Don't repeat yourself) principle.

include Tag

Now what if we need to add a simple component to the current file without extending the base file in that component file?

That's where the include tag comes in.

Using it is pretty straightforward. Let's add a header component to our base.html file

For that, we will create a new file with the header component. I am going to name it header.html and add a simple marquee to it.

<marquee>
Welcome to this django tutorial !
</marquee>
Enter fullscreen mode Exit fullscreen mode

Now, to include it in base.html, we will use the include tag like this:

{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!</title>
        <link rel="stylesheet" href="{% static 'style.css' %}">
    </head>
    <body>
        {% include 'header.html' %}
        <h1>Django Tutorial</h1>
        <p>Hi there! This is a Django tutorial.</p>
        {% block content %}
        {% endblock content %}
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

This also helps us in following in DRY principle.

These were the main tags we will use while building any web apps. Apart from this, there are a lot more template tags & filters in Django. To know more about them, I suggest reading the following Django docs: https://docs.djangoproject.com/en/4.2/ref/templates/builtins/

Top comments (0)