Django Templates

Nov. 26, 2022 | Categories: Programming

Quick Introduction to Django

Django is a python framework that allows developers to create dynamic websites and web pages. Django is versatile and extremely adaptable to any of your needs. The more light-weight competitor to Django is Flask.

Django Templates

What are Django Templates first of all? They are at the heart of the frontend and what ties Django’s python backend to the HTML frontend. Templates are HTML files with associated CSS and JavaScript files within Django brackets which indicates what content should be rendered at a particular link of your website. For example, the following code shows a base.html file which is stored in a templates folder within app folder; the following path from root django-project/app-name/templates

{% block content %} <!-- indicate start of content to include -->
<html>
	<head>
		<title> This is the base template HTML file </title>
		<!-- CSS would go here as a <link> tag or in <style> tage -->
		<style>
			p {
					color: red;
					background-color: blue;
			}
		</style>
	</head>
	<body>
		<p> Hi </p>
	</body>
</html>
{% endblock content %} <!-- indicate end of content to include -->

Templates of other Templates (aka inheritance)

In Django, templates can have their own templates. If you use the curly brace tag {% extends ‘path’ %} you are able to reduce the amount of code you have to rewrite for each individual page. Instead, you can have multiple templates inherit from the same base.html template.

<!-- relative path of this file: django-project/app-name/templates/app-namebase.html-->
<html>
	<head>
		<title> This is the base template HTML file </title>
	</head>
	<body>
		<p>This would be shown on all the children of the following base template</p>
		<!-- All other tmpelates contents would be inserted here -->
		{% block content %} {% endblock content %}

		<footer> Some footer content </footer>
	</body>
</html>

<!-- child template path: django-project/app-name/templates/app-name/child.html -->
{% extends 'app-name/base.html' %}
{% block content %}
<head>
	<title> This is the base template HTML file </title>
</head>
<body>
	<p> Hi </p>
</body>
{% endblock content %}

Django Templates File Hierarchy

The parent and child template for a particular Django app have to remain in the same folder.

# inside the template folder
| templates/app-name/
  |--base.html
  |--someothertemplate.html # extends base.html
  |--level2/
  |----base_level2.html     # extends base.html
  |----level2_1.html        # extends base_level2.html
  |----level2_2.html        # extends base_level3.html

# in the project
| django-project-folder /
	| django-folder /
		| settings.py
		| urls.py
		| # etc...
	| app-name-folder /
		| urls.py
		| views.py
		| templates / 
			| app-name / 
				| base.html
				| child.html

Django templates tags and (like) Programming Functionality

Logic Tags

Django template language or tags arm the developer with many useful programming functionalities within the html template. The common if statements and for loops are available through special tags.

{% if database_item.link %}{% endif %} → if statements
{% for word in database_item.text %}{% endfor %} → for loops

{% extends 'app-name/base.html' %}
{% block content %}
<head>
	<title> This is the base template HTML file </title>
</head>
<body>
	{% if 30 > 1 %} 
		<p> Hi </p>
	{% endif %}
</body>
{% endblock content %}

Filter Tags

These are just a few examples of filter tags that can be implemented through Django templates. Filters are signaled through the “|” symbol and are added to a variable within curly brace tag.

{% if list|length > 1 %}{% endif %}
{{ list|add:”1” }} → adding item to list in database, variable value passed to template

More template tags and filters in the Django Documentation