Django Template System - Use and Working | W3schools

It is possible using Django to separate the coding of HTML and Python. Until now, you must be clear with the fact that Python goes in Views. On the other hand, HTML goes in templates. Now, to link these two separately coded modules, there is a need to rely on the render function. Here, you will also be using Django Template Language.

Also Read: Django Models

The Render Function

This function is capable of accepting three types of parameters, which are

 

  • Request – This parameter acts as the initial request.

 

  • The Path To The Template – This parameter deals with the path relative to the TEMPLATE_DIRS option. You can locate this under the variables provided in the settings.py file.

 

  • Dictionary of Parameters – Template always uses a dictionary containing all the variables in it. You can create these variables on your own or you can make use of locals() function to pass all the local variables that have already been declared in the View of your application.

[post_middile_section_ad]

Django Template Language (DTL)

To define the user interface layer of the application, Django makes use of mini-language offered by its template engine.

How to Display Variables?

A variable can be represented as {{variable}}. This variable gets replaced by the value sent by the view. The value is sent to the variable by passing the parameters to the render function. In the below-provided example, we will be changing the hello.html coding to display today’s date.

hello.html

<html>   

  <body>

     Hello World!!!<p>Today is {{today}}</p>

  </body>   

</html>

The coding part of the view will also reflect a few of the changes which will appear as the following:

def hello(request):

  today = datetime.datetime.now().date()

  return render(request, “hello.html”, {“today” : today})

Access the given URL: /myapp/hello and you will be displayed with the following output:

Hello World!!!

Today is Sept. 03, 2018

As shown in the above code, Django uses the __str__ method to display the variable if it doesn’t fall under the string type. This same principle applies to an object attribute when we talk about Python. For an instance, if you want to display the date of the year then the variable will look like {{today.year}}.

Filters

Filters help you to modify all the available variables at the time of display. The structure of filter appears as {{var|filters}}.

A few of the examples –

* {{string|truncatewords:80}} – This filter will truncate the string by the first 80 words at the display time.

* {{string|lower}} – This filter will display the string in lowercase only.

* {{string|escape|linebreaks}} – This filter will make the string to escape content and lets it convert all the line breaks to tags.

With the use of filters, you can also set a default value for your variable.

[post_middile_section_ad]

Tags

There are a number of operations that you can perform on the tags, which are

* if condition

* for loop

* template inheritance

and many others.

Tag if

This if tag of template works similar to Python where you can make use of if, else, and elif. The below provided HTML code will help you to understand all the already mentioned if tags.

<html>

  <body>

     Hello World!!!<p>Today is {{today}}</p>

     We are

     {% if today.day == 1 %}

     the first day of month.

     {% elif today.day == 30 %}

     the last day of month.

     {% else %}Django’s template engine

     I don’t know.

     {%endif%}

  </body>

</html>

The output of the above HTML file will depend upon the date of the day after you provide a value to it.

Tag for

This for tag also works similarly as it works in Python. You will be required to make a few changes in the hello view to transmit a list to the template.

def hello(request):

  today = datetime.datetime.now().date()   

  daysOfWeek = [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]

  return render(request, “hello.html”, {“today” : today, “days_of_week” : daysOfWeek})

The following template will display the transmitted list by using {{for}} filter –

<html>

  <body>

     Hello World!!!<p>Today is {{today}}</p>

     We are

     {% if today.day == 1 %}   

     the first day of month.

     {% elif today.day == 30 %}     

     the last day of month.

     {% else %}

     I don’t know.

     {%endif%}

     <p>

        {% for day in days_of_week %}

        {{day}}

     </p>

     {% endfor %}     

  </body>

</html>

The output of the above-provided template will look like the following:

Hello World!!!

Today is Sept. 03, 2018

We are I don’t know.

Mon

Tue

Wed

Thu

Fri

Sat

Sun

[post_middile_section_ad]

Block and Extend Tags

A template system usually makes use of template inheritance. This simply implies that while doing template designing, you will be required to create the main template with gaps which can later be filled with the help of various children templates. This works similar to a web page with the requirement of special css.

In the given example, we will be inheriting hello.html template from the main_template.html.

main_template.html

<html>

  <head>

     <title>

        {% block title %}Page Title{% endblock %}

     </title>

  </head>   

  <body>

     {% block content %}

        Body content

     {% endblock %}     

  </body>

</html>

hello.html

{% extends “main_template.html” %}

{% block title %}My Hello Page{% endblock %}

{% block content %}

Hello World!!!<p>Today is {{today}}</p>

We are

{% if today.day == 1 %}

the first day of month.

{% elif today.day == 30 %}

the last day of month.

{% else %}

I don’t know.

{%endif%}

<p>

  {% for day in days_of_week %}

  {{day}}

</p>

{% endfor %}

{% endblock %}

The output of the above template will remain the same, only the mechanism will differ. This time refactoring of the code depends upon the block and extends tag.

In the main_template, you will be required to define a block with the help of the block tag. The title attribute of the block tag will display the page title and the content will contain the main page’s content. On the other hand, in the home.html, the extends tag will help you to inherit the properties of main_template.html.

Comment Tag

This tag will help you to integrate comments into templates. These are not HTML comments and these are not going to be visible on your HTML web page. This comment tag helps in the documentation.