Skip to content

Django Templating

sachin soman edited this page Jun 9, 2020 · 5 revisions

Templates

Directories

Django also follows templating rules like flask jinja2 templating methods. However, there are some notable differences. The first is in the structuring of the directories. Django looks at each app for templates. So for us, we will need to create a templates directory in our app directory and in that directory, we will again need to have a directory with the name of our project; since in our Django project we had an app called blog, we will inside the templates another directory called blog a bit unconventional. Screenshot 2020-06-08 at 18 08 18
So now its django_project/blog/template/blog Now inside that, we can create HTML files which can be used in templating

Adding template Config

Now that we have created the directories and HTML files we need to tell Django to search for these templates for that first go to blog apps app.py file in that we will see a class in our case it is BlogConfig copy that. Now go to the settings.py file in the project directory go to INSTALLED_APPS and add blog.apps.BlogConfig.

Loading the template

Now that Django knows where to look for the template we can use the render function to serve the template. Unlike flask Django serve function is imported from from django.shortcuts import render

Now to do the render we write return render(request,'directoryname/html_page.html') we can have a third argument as well which will be the data which we can pass return render(request,'directoryname/html_page.html',data). And use it access data via templates.

Templating Engine syntax

For loops will have the syntax:

{% for post in posts %}
   inside the for loop
{% endfor %}

In Django templates, anything with logic will be enclosed in

{% %}

And variables will be accessed using this:

{{ variable_x }}

Passing Variable to templates

Passing values to templates through render function is a bit different compared to how we passed data via flask.
return render(request,'directoryname/html_page.html',context)

The first thing to know is that we can only pass a dictionary we cannot pass anything else and generally this dictionary which we pass is called a context variable. But just because we can only pass a dictionary doesn't mean we can't pass any other datatypes, in fact, we can wrap whatever we want into a dictionary and access it using the keyword. Interestingly we can pass a dictionary inside a dictionary and how we access elements is using the dot notation rather than the use of [] bracket.

For now, let's use a dummy dictionary which I have saved and kept in views file usually these will be obtained from database queries and this dictionary will be wrapped into a context dictionary and passed to render method like shown below:

from django.shortcuts import render
# Dummy data
posts =[
    {'author':'sachin',
     'title':'Blog post1',
     'content':'First post content',
     'date_posted':'August 28, 2018'},

    {'author':'soman',
     'title':'Blog post2',
     'content':'First post content',
     'date_posted':'August 28, 2018'}
      ]
# Create your views here.

def home(request):
    context = { 'post': posts }
    return render(request,'blog/home.html',context)

This file has a list named post which I will pass to a context dictionary with keyword 'post'. Now let's look at the template file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<body>

    {% for post in post %}
         <h1>{{ post.title }}</h1>
         <p>By {{ post.author }} on {{  post.date_posted }}</p>

    {% endfor %}

</body>
</html>

From this, we can see that in HTML template we directly access the variable content using the key of dictionary 'context'. The for loop iterates over a list which has a dictionary inside look at how the dictionary is accessd inside the template using the dot convention.

One observation I noticed which seems to be different from flask is that I cannot pass multiple variables into the render function if we do that there is a change in functionality of the webpage so whatever data you want must be enclosed in a single dictionary. It doesn't mean we can only pass the same dictionary we pass any dictionary but just one.

True condition

One thing that is different from conventional programming is the case of 'if condition' True, In templates if an element exist and is passed in if condition it will be seemed as a True condition.