Django Templates: Introduction

Django Template Language (DTL) is a simple templating language for generating HTML.

Basic Syntax

<!-- Variables: {{ variable }} -->
<h1>{{ task.title }}</h1>
<p>{{ user.get_full_name }}</p>

<!-- Tags: {% tag %} -->
{% if user.is_authenticated %}
  <p>Hello, {{ user.username }}!</p>
{% else %}
  <p>Please log in to continue</p>
{% endif %}

<!-- Filters: {{ variable|filter }} -->
<p>{{ task.created_at|date:"d.m.Y" }}</p>
<p>{{ text|truncatewords:20 }}</p>

The for Loop

<ul>
{% for task in tasks %}
  <li>{{ forloop.counter }}. {{ task.title }}</li>
{% empty %}
  <li>No tasks</li>
{% endfor %}
</ul>

Loop variables:
- forloop.counter — iteration number (starting from 1)
- forloop.counter0 — iteration number (starting from 0)
- forloop.first, forloop.last — first/last iteration

Conditionals

{% if task.status == 'done' %}
  <span>✓ Completed</span>
{% elif task.status == 'in_progress' %}
  <span>⏳ In Progress</span>
{% else %}
  <span>○ Queued</span>
{% endif %}

Inheritance (extends/block)

<!-- base.html -->
{% block title %}My Site{% endblock %}
{% block content %}{% endblock %}

<!-- page.html -->
{% extends 'base.html' %}
{% block title %}Tasks — My Site{% endblock %}
{% block content %}
  <h1>Tasks</h1>
{% endblock %}

URL Tags

<a href="{% url 'task-list' %}">All Tasks</a>
<a href="{% url 'task-detail' pk=task.pk %}">{{ task.title }}</a>

Loading Tags

{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">

{% load i18n %}
{% trans "Tasks" %}