Django Templates - Short introduction and FREE samples
Tags: webdev, django, python, appseed
Published: 2020-12-10 19:41:18

---
title: Django Templates - Short introduction and FREE samples
published: true
description: A short and comprehensive introduction to Django Template system (free samples included)
tags: webdev, django, python, appseed
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bbcepm0a7xkmdfnoolm.jpg
canonical_url: https://appseed.us/apps/django/
---
Hello Coders,

This article presents a short introduction to **[Django Template](https://appseed.us/apps/django/)** system, a modern and designer-friendly language for Python, used to generate dynamic pages by Django Framework. To make this article more useful, I will present at the end a short-list with open-source **Django Templates** available for download directly from Github. For newcomers, **Django** is a Python Web framework built by experienced developers that encourages rapid development. *Thanks for reading!* 

---

## [Rocket Django](https://github.com/app-generator/rocket-django) `TailwindCSS`

This Django Boilerplate has all you need to build your SaaS, Analytics tool, or any other type of Web App. From idea to production in 5 minutes.

- 👉 [Rocket Django](https://github.com/app-generator/rocket-django) - `Source Code`
- 👉 [Rocket Django](https://rocket-django.onrender.com/) - `LIVE Demo`

> **Features and Tech Stack**: `TailwindCSS` • `Flowbite` • `API` (DRF) • `Celery Beat` • `DataTables` • `Charts` • `Docker` • `CI/CD`. 

![Free Django Dashboard and Admin Template - Rocket Django.](https://github-production-user-asset-6210df.s3.amazonaws.com/51070104/272299949-6f4a8fd7-7cce-472a-9566-9519db338c7d.gif)

---

## [Django Material Kit](https://appseed.us/product/material-kit/django/)

Material Kit is a Free Bootstrap 5 UI Kit with a fresh, new design inspired by Google's material design. Material Kit makes use of light, surface and movement. It uses a deliberate color choice, edge-to-edge imagery and large scale typography.

- 👉 [Django Material Kit](https://appseed.us/product/material-kit/django/) - product page
- 👉 [Django Material Kit](https://django-material-kit.appseed-srv1.com) - LIVE Demo

![Free Django Template - Material Kit Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5gzwlfezfi63nkdshm1.png)
 
--- 

## [Soft UI Dashboard Django](https://appseed.us/product/soft-ui-dashboard/django/)

**[Admin dashboard coded in Django](https://appseed.us/admin-dashboards/django/)** Framework. Designed for those who like bold elements and beautiful websites, **Soft UI Dashboard** is ready to help you create stunning websites and webapps - **Features**:

- ✅ `Up-to-date Dependencies`
- ✅ `UI Kit`: Bootstrap 5, Persistent **Dark-Mode**
- ✅ Basic Authentication, `OAuth via Github`
- ✅ `API Generator` Module 
- ✅ `Dynamic Data Tables`

![Soft UI Dashboard - Full-Stack Starter generated by AppSeed.](https://user-images.githubusercontent.com/51070104/175773323-3345d618-0e78-4c85-83fc-f495dc3f0bb0.png)

--- 

## [What is Django](https://docs.appseed.us/content/what-is/django/)

Django Framework, created initially in 2003 as a private project by a press agency, becomes an open-source project in 2008 managed by Django Software Foundation. 

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel. 

Using Django, developers can build websites, APIs, microservices on top of all libraries and packages provided in the Python ecosystem. 

For newcomers, a Framework comes with modules and features usable in many projects: authentication, database interfaces, our TEMPLATE system for instance. 

Being such a powerful framework, Django provides a template engine used to render pages in the browser with ease by reusing components, injecting dynamic content, extend templates, filter displayed information, and much more. 

Let's take one at a time and reveal a few basic features provided by the **Django Template** engine. 

---

## ✨ Django Templates configuration

Templates are loaded and processed by Django from the folder specified in `settings.py`. 

```python
# settings.py Sample
...
PROJECT_ROOT = os.path.abspath(os.path.dirname(__file__))
TEMPLATE_DIRS = (os.path.join(PROJECT_ROOT, 'core/templates')
...
)
```

From now on, we will assume the files and templates are saved in `core/templates` directory. 

--- 

## ✨ Render simple HTML

At this point, Django knows where to look for a templated referred in a controller, and we can define a first, super simple template.

> File Location/Name: `core/templates/index.html`

**index.html** contents

```html
<html>
  <head>
    <title>
      First Django Template
    </title>
  </head>
  <body>
    <h1>
      My template
    </h1>
    <p>
      some content here
    </p>
  </body>
</html>
```

--- 

**The controller**

```python
from django.shortcuts import render

# View for index page. 
def index(request):
  return render(request, 'index.html')
```

If we access the page in the browser, we will notice that the template has been taken into account by the view. 

---

## ✨ Use variable in the template

The previous sample use hardcoded information for `page title`, H1 tag, and the content paragraph. We can change this limitation with ease by using a variable that might come from the database or from the user. Let's update our code to use a variable for the page title. 

> File Location/Name: `core/templates/index.html`

**index.html** contents

```html
<html>
  <head>
    <title>
      {{ title }} 
    </title>
  </head>
  <body>
    <h1>
      My template
    </h1>
    <p>
      some content here
    </p>
  </body>
</html>
```

--- 

**The controller**

```python
from django.shortcuts import render

# View for index page. 
def index(request):
  title = "My new title"
  return render(request, 'index.html', { "title": title ) } )
```

The `render()` method expects a dictionary where the keys are variables names and values and .. the values injected in the template. Once rendered by the Django Template engine, our HTML becomes: 

```html
<html>
  <head>
    <title>
      My new title
    </title>
  </head>
  <body>
    <h1>
      My template
    </h1>
    <p>
      some content here
    </p>
  </body>
</html>
```

---

## ✨ More use-cases

Django template system allows us to have more than simple variable replacement in our templates: loops, set up filters, conditionals. 

---

### 👉 Conditional statements

To use a conditional statement in a template file we must use another syntax compared to the usage of a variable:

- variables `{{ variable }}`
- conditionals `{ % if whatever % }`

Let's take a look at a real sample:

```html
<span>
  { % if years <10 % }
    Child ...
  { % elif years < 18 % }
    Teenager ...
  { % else % }
    Adult ...
  { % endif % }
</span>
```

---

**The controller**

```python
from django.shortcuts import render

# View for index page. 
def index(request):
  years = 15
  return render(request, 'index.html', { "years": years) } )
```

The rendered version by Django is shown below: 

```html

< span >
    Teenager ...
</span >

```

---

### 👉 Looping in a template

Looping allows you to read or iterate through the elements of a data dictionary. In the controller, we sent a list with numbers. To see numbers on the rendered page we will use a `for` structure.

```html
<ul>
  {% for number in my_array %}
    <li>
      {{ number }}
    </li>
  {% endfor %}
</ul>
```

---

**The controller**

```python
from django.shortcuts import render

# View for index page. 
def index(request):
  my_array = [1,2 3]
  return render(request, 'index.html', { "my_array": my_array) } )
```

The rendered version by Django is shown below: 

```html
< ul >
    < li > 1 </ li >
    < li > 2 </ li >
    < li > 3 </ li >
</ ul >
```

---

## ✨ Extending the templates

This feature allows us to `extend` or reuse a master page template by injecting on the specific content of the current context. 

A simple and intuitive use case might be a home page and contact page where the footer and top menus are identical and only the main content is different. Let's design a template and sample pages to explain the concept:

---

> Define a master template called `base.html`

**Parent HTML** - saved as `base.html`
```html
<html>
  <head>
    <title>My {% block title %}{% endblock %} </title>
  </head>
  <body>
    <div class="container">
      <h2>This is from the base template</h2>
      <br>
      { block content }{ endblock }
      <br>
    </div>
  </body>
</html>
```

---

> Define the `HOME` page

**The Child template** - saved as `home.html`
```html
{ extends "base.html" }

{ block title } Homepage { endblock }

{ block content }
  Home page content
{ endblock }
```

When Django loads `home.html`, the `{ extends }` block informs the engine to merge the `base.html` template with the content provided by `home.html`.

- `{ block title }` becomes **Homepage**
- `{ block content }` becomes **Home page content**

--- 

**Generated HTML**
```html
<html>
  <head>
    <title>Homepage</title>
  </head>
  <body>
    <div class="container">
      <h2>This is from the base template</h2>
      <br>
      Home page content
      <br>
    </div>
  </body>
</html>
```

---
  
This feature called **Template Inheritance** helps us to win time by reusing components and build paged dynamically with ease. 

Django template engine offers much more than this. I will mention only a few more features below. The full information can be found in the official documentation: [Django Template System](https://docs.djangoproject.com/en/3.1/ref/templates/)

- [Template](https://docs.djangoproject.com/en/3.1/ref/templates/language/#templates) - the definition and samples
- [Variables](https://docs.djangoproject.com/en/3.1/ref/templates/language/#variables) - how to use them in deep
- [Filters](https://docs.djangoproject.com/en/3.1/ref/templates/language/#filters)
- [Comments](https://docs.djangoproject.com/en/3.1/ref/templates/language/#comments) - explain the comments syntax in templates
- [Template inheritance](https://docs.djangoproject.com/en/3.1/ref/templates/language/#template-inheritance)

--- 

> To apply the theory, we can play with a few FREE samples published on Github under the MIT license.

---

## ✨ [Django Template Volt](https://appseed.us/product/volt-dashboard/django/)

Volt is a free and open-source **Bootstrap 5** powered admin dashboard with components, pages, and plugins that you can use to create an awesome admin interface. It also comes with a pro version with more pages, plugins, and components.

- 👉 **[Django Volt Bootstrap 5](https://appseed.us/product/volt-dashboard/django/) - product page**
- 👉 [Django Volt Bootstrap 5](https://django-volt-dashboard.appseed-srv1.com/) - LIVE Demo

![Django Volt Bootstrap 5 - Free Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wi2big3rottnj64m60o.png)
 
---

## ✨ [Django Datta Able](https://appseed.us/product/datta-able/django/) 

Admin Dashboard coded in Django Framework on top of Datta Able, a modern Bootstrap 4 dashboard template. The Django codebase is provided with authentication, database, ORM and deployment scripts.

- 👉 **[Django Datta Able](https://appseed.us/product/datta-able/django/) - product page**
- 👉 [Django Datta Able](https://django-datta-able.appseed-srv1.com/) - LIVE Demo

![Datta Able - Open-source Django Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzr1jbveobo4h5xmdrz7.png)
 
---

## ✨ [Django Template Atlantis](https://appseed.us/product/atlantis-dark/django/)

Atlantis Lite is a free bootstrap 4 admin dashboard that is beautifully and elegantly designed to display various metrics, numbers or data visualization. This open-source admin dashboard has 2 layouts, many plugins and UI components.

- 👉 **[Django Atlantis Dark](https://appseed.us/product/atlantis-dark/django/) - product page** 
- 👉 [Django Atlantis Dark](https://django-atlantis-dark.appseed-srv1.com/) - LIVE Demo

![Django Template Atlantis - Free Django Template.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/peg5ypcvp0wyr6n96go9.png)
 
---

> **Thanks for reading!** For more resources, feel free to access:

- ✨ More [Free Dashboards](https://appseed.us/admin-dashboards/open-source) crafted in Django, Flask, and [React](https://appseed.us/apps/react)
- ✨ More [Admin Dashboards](https://www.admin-dashboards.com/) - a huge index with products