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>

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})

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>

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>

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 %}

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>

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>

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/

Let's Learn Django #5 Django Template

Comments