DEV Community

Cover image for Django Templates - Short introduction and FREE samples
Sm0ke
Sm0ke

Posted on • Edited on • Originally published at appseed.us

Django Templates - Short introduction and FREE samples

#webdev #django #python #appseed

Hello Coders,

This article presents a short introduction to Django Template 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! - Content provided by App Generator.

Django Soft UI Dashboard

Open-source Django Dashboard built on a modern design. Designed for those who like bold elements and beautiful websites, Soft UI Dashboard is ready to help you create stunning websites and web apps.
Soft UI Dashboard is built with over 70 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.

Django Soft Dashboard - Modern template for Django Admin Section crafted on top of a modern Bootstrap 5 Design.

Django Material Dashboard

Open-source Django Dashboard project crafted on top of Material Dashboard, an open-source Bootstrap 5 design from Creative-Tim.

This starter comes with a codebase that uses a theme-able UI (installed via PIP) that covers the admin section, and all other pages managed by Django Auth flow. On top of this, the CI/CD set up allows deploying LIVE the product on Render without effort or low-level configuration.

Django Material Dashboard - Open-Source Django Starter

Django Material Kit

Designed for those who like bold elements and beautiful websites, Material Kit 2 is ready to help you create stunning websites and web apps. Material Kit 2 is built with over 60 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.

Material Kit - Starter generated by AppSeed.

Getting Started with Django

Django Framework, created initially in 2003 as a private project by a press agency, became 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.

# settings.py Sample
...
PROJECT_ROOT = os.path.abspath(os.path.dirname(__file__))
TEMPLATE_DIRS = (os.path.join(PROJECT_ROOT, 'core/templates')
...
)
Enter fullscreen mode Exit fullscreen mode

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>
  <head>
    <title>
      First Django Template
    </title>
  </head>
  <body>
    <h1>
      My template
    </h1>
    <p>
      some content here
    </p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The controller

from django.shortcuts import render

# View for index page. 
def index(request):
  return render(request, 'index.html')
Enter fullscreen mode Exit fullscreen mode

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>
  <head>
    <title>
      {{ title }} 
    </title>
  </head>
  <body>
    <h1>
      My template
    </h1>
    <p>
      some content here
    </p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The controller

from django.shortcuts import render

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

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>
  <head>
    <title>
      My new title
    </title>
  </head>
  <body>
    <h1>
      My template
    </h1>
    <p>
      some content here
    </p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

✨ 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:

<span>
  { % if years <10 % }
    Child ...
  { % elif years < 18 % }
    Teenager ...
  { % else % }
    Adult ...
  { % endif % }
</span>
Enter fullscreen mode Exit fullscreen mode

The controller

from django.shortcuts import render

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

The rendered version by Django is shown below:


< span >
    Teenager ...
</span >
Enter fullscreen mode Exit fullscreen mode

👉 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.

<ul>
  {% for number in my_array %}
    <li>
      {{ number }}
    </li>
  {% endfor %}
</ul>
Enter fullscreen mode Exit fullscreen mode

The controller

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) } )
Enter fullscreen mode Exit fullscreen mode

The rendered version by Django is shown below:

< ul >
    < li > 1 </ li >
    < li > 2 </ li >
    < li > 3 </ li >
</ ul >
Enter fullscreen mode Exit fullscreen mode

✨ 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>
  <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>
Enter fullscreen mode Exit fullscreen mode

Define the HOME page

The Child template - saved as home.html

{ extends "base.html" }

{ block title } Homepage { endblock }

{ block content }
  Home page content
{ endblock }
Enter fullscreen mode Exit fullscreen mode

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>
  <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>
Enter fullscreen mode Exit fullscreen mode

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

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

✨ Django Template Volt

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 - Free Template

✨ Django Datta Able

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.

Datta Able - Open-source Django Template

✨ Django Template Atlantis

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 Template Atlantis - Free Django Template.

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

Top comments (0)

Read next

mike_andreuzza profile image

We have built a Tailwind CSS grid generator.

Michael Andreuzza -

williamsdev profile image

Horóscopo com IA: Uma Experiência com Next.js e Gemini

Frank William -

thisweekinjavascript profile image

JavaScript vs. Deno, Vite 6, Astro 5, and more

James -

nasehbadalov profile image

Optimizing Performance in CSS Animations: What to Avoid and How to Improve It

Naseh -