We have given a brief overview of Django Templates before. Now, we will dive deep into it. We will discuss the following topics today:

  • Django Template Language (DTL)
  • Accessing Dynamic Values
  • Looping Over Queryset objects
  • Using Conditional Statements in Templates
  • Setting URL Navigation
  • Template Inheritance
  • Loading Static

Django Template Language (DTL)

A Django template is a string of text which contains the static parts of HTML output and some special syntax describing how dynamic contents will be presented. Django has its own template System- The Django template language (DTL). But Django 1.8 also supports the popular alternative Jinja2.

The syntax of the Django template language contains four constructs. Variable, Tags, Filters, Comments. Some constructs are recognized and interpreted by the template engine. There are several Python template engines. A Django project can be configured with one or more template engines.

Variable – {{ variable }}

Tag – {% tag %}

Filter – {{ django|filter }}

Comment – {# Comment #}

Accessing Dynamic Values

Accessing Variables

{{ name }}

Looping using for Loop
{% for i in ‘key_name_from_context_dictionary’ %}
…
{% endfor %}

Using Conditional Statements in Templates

{% if expression %}
…

{% elif expression %}

…

{% else %}

…

{% endif %}

Let’s see an example:

A template is rendered by a django view with a context dictionary. This view returns a queryset of all the ‘Person’ objects which name is ‘persons’ defined as the value of ‘context_object_name’ variable.

View:

class AllPersonsView(ListView):    
    model = Person
    template_name = 'persons.html'
    context_object_name = 'persons'

Template:

Output:

You can see that only ‘Zaira Anaya’ is black because we didn’t apply style on this.

Setting URL Navigation

In a webpage there are links to other pages. These links are added using ‘<a> Anchor </a>’ tag of html. The destination path is given inside the ‘href’ attribute of the tag. In django to we use

{% url ‘name_of_url ’ %} to link other pages.

Or, {% url ‘app_name:name_of_url ’ %}

Or, If we want to go to each person’s detail page then we will have to pass the ‘id’ of the person to the url. id or slug both can be used. This is how we do this.

{% url ‘app_name:name_of_url ’ unique_field %} – If the URL requires any ‘pk’ or ‘slug’.

This ‘person-detail-view’ is the value of ‘name’ variable of the “urlpatterns” list of urls.py file.

After clicking on any of the names. Django will redirect us to the ‘person-detail-view’ page.

Template Inheritance.

There is something common in each template. Like ‘Navbar’ & ‘Footer’ are same in each webpage of a website. So, writing same things in each template violates the DRY principle. Template Inheritancemade this easy for us. We can write the common things in a template and can reuse them by inheriting in others using {% extends %} tag.

In Django we create a base skeleton template named ‘base.html’ that contains all the common elements of a site and defines blocks that child templates can override.To define blocks the {% block %} tag is used

base.html
child.html

{% block %} {% endblock %} is like a dynamic blank space where we can put any elements when needed.

Output:

Loading Static

To load static files (CSS, JS) we use {% load static %} tag. Till now we were using internal CSS. But, when we will use external CSS then css files will be stored in a folder named ‘static’.

In settings.py

# Static files (CSS, JavaScript, Images)
STATIC_URL = '/static/'

directory structure…

Template:

Now, everything will work.

+ posts

Author | Python-Django Developer

+ posts

Full-stack Developer (Python | Django | React | React-Native | Angular | Vue)