{"id":5555,"date":"2022-11-15T03:19:41","date_gmt":"2022-11-15T03:19:41","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=5555"},"modified":"2023-11-01T00:21:07","modified_gmt":"2023-11-01T00:21:07","slug":"django-templates","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/django-tutorial\/django-templates\/","title":{"rendered":"Django Templates"},"content":{"rendered":"\n

Summary<\/strong>: in this tutorial, you’ll learn how to create Django templates, pass data from view functions to templates, and display the data in the templates.<\/p>\n\n\n\n

This tutorial begins where creating a Django app<\/a> left off.<\/p>\n\n\n\n

Introduction to the Django templates #<\/a><\/h2>\n\n\n\n

In the previous tutorial<\/a>, you learned how to return a HttpResponse<\/code> with a h1<\/code> tag from a view. To return a full HTML page, you’ll need to use a template.<\/p>\n\n\n\n

Note that it is possible to return a full HTML page by mixing the HTML with Python code. However, it is not practical and doesn’t scale well.<\/p>\n\n\n\n

A template is a file that contains the static and dynamic parts of a webpage. To generate the dynamic parts of the webpage, Django uses its specific template language called Django template language or DTL. <\/p>\n\n\n\n

The Django template engine renders templates that contain variables, constructs, tags, and filters.<\/p>\n\n\n\n

Variables #<\/a><\/h3>\n\n\n\n

A variable is surrounded by {{<\/code> and }}<\/code>. For example:<\/p>\n\n\n

Hi {{name}}, welcome back!<\/code><\/span><\/pre>\n\n\n
In this template, the name<\/code> is a variable. If the value of the name<\/code> variable is John<\/code>, the Django template engine will render the above template to the following text:<\/p>\n\n\n
Hi John, welcome back!<\/code><\/span><\/pre>\n\n\n
If a variable is a dictionary<\/a>, you can access the items of the dictionary using the dot notation (dict_name.key<\/code>). <\/p>\n\n\n\n
Suppose you have a person<\/code> dictionary with two keys name<\/code> and email<\/code>:<\/p>\n\n\n
person = {'name'<\/span>: 'John'<\/span>, 'email'<\/span>: 'john@pythontutorial.net'<\/span>}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
… you can access the values of the name<\/code> and email<\/code> keys of the person<\/code> dictionary in the template like this:<\/p>\n\n\n
{{ person.name }}\n{{ person.email }}<\/code><\/span><\/pre>\n\n\n
Tags #<\/a><\/h3>\n\n\n\n
Tags are responsible for outputting contents, serving a control structure if-else, for-loop, and getting data from a database.<\/p>\n\n\n\n
Tags are surrounded by {%<\/code> and %}<\/code>. For example:<\/p>\n\n\n
{% csrf_token %}<\/code><\/span><\/pre>\n\n\n
In this example, the csrf_token<\/code> tag generates a token for preventing CSRF attacks.<\/p>\n\n\n\n
Some tags like if-else<\/code> and for-loop<\/code> require beginning and ending tags. For example:<\/p>\n\n\n
{% if<\/span> user.is_authenticated %}\nHi {{user.username}} \n{% endif<\/span> %}<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
Filters #<\/a><\/h3>\n\n\n\n
Filters transform the contents of variables and tags argument. For example, to capitalize each word of a string, you use the title<\/code> filter like this:<\/p>\n\n\n
{{ name | title }}<\/code><\/span><\/pre>\n\n\n
If the value of the name<\/code> variable is john doe<\/code>, then the title<\/code> filter will transform it to the following:<\/p>\n\n\n
John Doe<\/code><\/span><\/pre>\n\n\n
Some filters accept an argument. For example, to format a date of the joined_date<\/code> variable in the Y-m-d<\/code> format, you use the following filter:<\/p>\n\n\n
{{ joined_date | date: \"Y-m-d\"<\/span> }}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Comments #<\/a><\/h3>\n\n\n\n
The comments will look like this:<\/p>\n\n\n
{# This is a comment in the template #}<\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
The Django template engine will not render text inside the comment blocks.<\/p>\n\n\n\n
Django template examples #<\/a><\/h2>\n\n\n\n
First, create a new directory called templates<\/code> inside the blog<\/code> directory:<\/p>\n\n\n
mkdir templates<\/code><\/span><\/pre>\n\n\n
Second, create a blog<\/code> directory inside the templates<\/code> directory:<\/p>\n\n\n
cd templates\nmkdir blog<\/code><\/span><\/pre>\n\n\n
Note that the directory inside the templates<\/code> directory must have the same name as the application name. In this example, the blog<\/code> directory has the same name as the blog<\/code> app of the Django project.<\/p>\n\n\n\n
Third, inside the templates\/blog<\/code> directory create two template files home.html<\/code> and about.html<\/code> with the following contents.<\/p>\n\n\n\n
The home.html<\/code> file:<\/p>\n\n\n
<!DOCTYPE html<\/span>><\/span>\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n<head<\/span>><\/span>\n    <meta<\/span> charset<\/span>=\"UTF-8\"<\/span>><\/span>\n    <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1.0\"<\/span>><\/span>\n    <title<\/span>><\/span>Home<\/title<\/span>><\/span>\n<\/head<\/span>><\/span>\n<body<\/span>><\/span>\n    <h1<\/span>><\/span>Home<\/h1<\/span>><\/span>\n<\/body<\/span>><\/span>\n<\/html<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The about.html<\/code> file:<\/p>\n\n\n
<!DOCTYPE html<\/span>><\/span>\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n<head<\/span>><\/span>\n    <meta<\/span> charset<\/span>=\"UTF-8\"<\/span>><\/span>\n    <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1.0\"<\/span>><\/span>\n    <title<\/span>><\/span>About<\/title<\/span>><\/span>\n<\/head<\/span>><\/span>\n<body<\/span>><\/span>\n    <h1<\/span>><\/span>About<\/h1<\/span>><\/span>\n<\/body<\/span>><\/span>\n<\/html<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
INSTALLED_APPS = [\n    # ...<\/span>\n    'blog.apps.BlogConfig'<\/span>,\n]<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Fourth, open the views.py<\/code> file and change the home()<\/code> and about()<\/code> view functions to the following:<\/p>\n\n\n
from<\/span> django.shortcuts import<\/span> render\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>def<\/span> home<\/span>(request)<\/span>:<\/span>\n<\/span><\/mark>    return<\/span> render(request, 'blog\/home.html'<\/span>)\n<\/span><\/mark>\n<\/span><\/span>\n<\/span><\/span>def<\/span> about<\/span>(request)<\/span>:<\/span>\n<\/span><\/mark>    return<\/span> render(request, 'blog\/about.html'<\/span>)\n<\/span><\/mark><\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
In this views.py<\/code> file, we import the render()<\/code> function from the django.shortcuts<\/code>. <\/p>\n\n\n\n
The render()<\/code> function accepts an HttpRequest<\/code> object and a path to a template. It renders the template and returns an HttpResponse<\/code> object.<\/p>\n\n\n\n
Fifth, run the Django development server:<\/p>\n\n\n
python<\/span> manage<\/span>.py<\/span> runserver<\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Finally, open the URL http:\/\/127.0.0.1:8000\/<\/code> and the URL http:\/\/127.0.0.1:8000\/about\/<\/code>, you’ll see full HTML pages that come from the home.html<\/code> and about.html<\/code> templates.<\/p>\n\n\n\n
Passing variables to a template #<\/a><\/h3>\n\n\n\n
We’ll create dummy blog post data and pass it to the home.html<\/code> template. Later, you’ll learn how to get the post data from the database.<\/p>\n\n\n\n
The views.py<\/code> will look like this:<\/p>\n\n\n
from<\/span> django.shortcuts import<\/span> render\n<\/span><\/span>\n<\/span><\/span>posts = [\n<\/span><\/mark>    {\n<\/span><\/mark>        'title'<\/span>: 'Beautiful is better than ugly'<\/span>,\n<\/span><\/mark>        'author'<\/span>: 'John Doe'<\/span>,\n<\/span><\/mark>        'content'<\/span>: 'Beautiful is better than ugly'<\/span>,\n<\/span><\/mark>        'published_at'<\/span>: 'October 1, 2022'<\/span>\n<\/span><\/mark>    },\n<\/span><\/mark>    {\n<\/span><\/mark>        'title'<\/span>: 'Explicit is better than implicit'<\/span>,\n<\/span><\/mark>        'author'<\/span>: 'Jane Doe'<\/span>,\n<\/span><\/mark>        'content'<\/span>: 'Explicit is better than implicit'<\/span>,\n<\/span><\/mark>        'published_at'<\/span>: 'October 1, 2022'<\/span>\n<\/span><\/mark>    }\n<\/span><\/mark>]\n<\/span><\/mark>\n<\/span><\/span>\n<\/span><\/span>def<\/span> home<\/span>(request)<\/span>:<\/span>\n<\/span><\/span>    context = {\n<\/span><\/mark>        'posts'<\/span>: posts\n<\/span><\/mark>    }\n<\/span><\/mark>    return<\/span> render(request, 'blog\/home.html'<\/span>, context)\n<\/span><\/mark>\n<\/span><\/span>\n<\/span><\/span>def<\/span> about<\/span>(request)<\/span>:<\/span>\n<\/span><\/span>    return<\/span> render(request, 'blog\/about.html'<\/span>)\n<\/span><\/span><\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
How it works.<\/p>\n\n\n\n
It’s important to note that you should add the blog<\/code> application to the INSTALLED_APPS<\/code> list in the settings.py<\/code> file to make the templates work. Typically, you do it immediately after creating the new Django application<\/a>. <\/p>\n\n\n
Here are the complete built-in template tags and filters<\/a>.<\/p>\n\n\n\n