Bài 05: Django Templates

Django Template System

Template Là Gì?

Template là text file định nghĩa structure hoặc layout của một file (thường là HTML). Templates chứa static content và dynamic content (variables, tags, filters).

Template Flow:

View → Context Data → Template → Rendered HTML → Response Example:1. View: posts = Post.objects.all()2. Context: {'posts': posts}3. Template: {% for post in posts %} ... {% endfor %}4. Rendered HTML: <ul><li>Post 1</li><li>Post 2</li></ul>5. Response → User's browser

Template Configuration

# settings.pyTEMPLATES = [    {        'BACKEND': 'django.template.backends.django.DjangoTemplates',        'DIRS': [            BASE_DIR / 'templates',  # Project-level templates        ],        'APP_DIRS': True,  # Look for templates in apps        'OPTIONS': {            'context_processors': [                'django.template.context_processors.debug',                'django.template.context_processors.request',                'django.contrib.auth.context_processors.auth',                'django.contrib.messages.context_processors.messages',            ],        },    },] # Template search order:# 1. DIRS: templates/# 2. APP_DIRS: blog/templates/, shop/templates/, etc.

Template Directory Structure

myproject/├── templates/                    # Project-level templates│   ├── base.html                # Base template│   ├── home.html                # Homepage│   ├── about.html               # About page│   └── includes/                # Reusable components│       ├── header.html│       ├── footer.html│       └── navbar.html│├── blog/                        # Blog app│   ├── templates/│   │   └── blog/                # Namespaced templates│   │       ├── post_list.html│   │       ├── post_detail.html│   │       ├── post_form.html│   │       └── includes/│   │           ├── post_card.html│   │           └── comment_form.html│   └── ...│└── shop/                        # Shop app    ├── templates/    │   └── shop/                # Namespaced templates    │       ├── product_list.html    │       ├── product_detail.html    │       └── cart.html    └── ...

Namespacing Templates:

# ❌ BAD - No namespace (conflicts!)blog/templates/post_list.htmlshop/templates/product_list.html # ✅ GOOD - Namespacedblog/templates/blog/post_list.htmlshop/templates/shop/product_list.html # Usage in views:return render(request, 'blog/post_list.html')  # Clear!return render(request, 'shop/product_list.html')  # No conflict!

Template Syntax

Variables

Rendering variables:

{# templates/blog/post_detail.html #} {# Simple variable #}<h1>{{ post.title }}</h1> {# Object attributes #}<p>Author: {{ post.author.username }}</p><p>Email: {{ post.author.email }}</p> {# Dictionary access #}<p>{{ user_data.name }}</p><p>{{ user_data.age }}</p> {# List/tuple access #}<p>First item: {{ items.0 }}</p><p>Second item: {{ items.1 }}</p> {# Method calls (no parentheses!) #}<p>{{ post.get_absolute_url }}</p><p>{{ post.total_comments }}</p>

Context from view:

# blog/views.pydef post_detail(request, slug):    post = get_object_or_404(Post, slug=slug)        context = {        'post': post,                          # Object        'author': post.author,                 # Related object        'comments': post.comments.all(),       # QuerySet        'total_comments': post.comments.count(),  # Number        'user_data': {                         # Dictionary            'name': 'John',            'age': 30,        },        'items': ['a', 'b', 'c'],              # List        'is_published': post.published,        # Boolean    }    return render(request, 'blog/post_detail.html', context)

Template Tags

Control flow tags:

{# 1. if/elif/else #}{% if user.is_authenticated %}    <p>Welcome, {{ user.username }}!</p>{% elif user.is_anonymous %}    <p>Please <a href="{% url 'login' %}">login</a></p>{% else %}    <p>Unknown user</p>{% endif %} {# 2. for loop #}<ul>{% for post in posts %}    <li>{{ post.title }} - {{ post.created }}</li>{% endfor %}</ul> {# for with empty #}<ul>{% for post in posts %}    <li>{{ post.title }}</li>{% empty %}    <li>No posts available</li>{% endfor %}</ul> {# 3. for with loop variables #}{% for post in posts %}    <div class="post">        {# Loop counter (1-indexed) #}        <span>Post #{{ forloop.counter }}</span>                {# Loop counter (0-indexed) #}        <span>Index: {{ forloop.counter0 }}</span>                {# First iteration? #}        {% if forloop.first %}            <strong>First post!</strong>        {% endif %}                {# Last iteration? #}        {% if forloop.last %}            <strong>Last post!</strong>        {% endif %}                <h3>{{ post.title }}</h3>    </div>{% endfor %}

Comparison operators:

{# Equality #}{% if value == 100 %}{% if name == "John" %} {# Inequality #}{% if value != 100 %}{% if name != "John" %} {# Greater than / Less than #}{% if age > 18 %}{% if age < 65 %}{% if age >= 18 %}{% if age <= 65 %} {# in / not in #}{% if 'python' in tags %}{% if user not in banned_users %} {# is / is not #}{% if value is True %}{% if value is None %}{% if value is not None %}

Boolean operators:

{# and #}{% if user.is_authenticated and user.is_staff %}    <a href="{% url 'admin:index' %}">Admin Panel</a>{% endif %} {# or #}{% if user.is_staff or user.is_superuser %}    <p>You have admin access</p>{% endif %} {# not #}{% if not user.is_banned %}    <p>Welcome!</p>{% endif %} {# Complex conditions #}{% if user.is_authenticated and (user.is_staff or user.is_superuser) %}    <p>Admin user</p>{% endif %}

Filters

Basic filters:

{# String filters #}{{ name|lower }}              {# Convert to lowercase #}{{ name|upper }}              {# Convert to uppercase #}{{ name|title }}              {# Title case #}{{ name|capfirst }}           {# Capitalize first letter #} {# Truncate #}{{ text|truncatewords:10 }}   {# First 10 words #}{{ text|truncatechars:50 }}   {# First 50 characters #} {# Length #}{{ posts|length }}            {# Number of items #}{% if posts|length > 0 %}    <p>{{ posts|length }} posts found</p>{% endif %} {# Default value #}{{ value|default:"N/A" }}     {# Show "N/A" if value is empty #}{{ value|default_if_none:"Unknown" }}  {# If value is None #} {# Date formatting #}{{ post.created|date:"Y-m-d" }}           {# 2023-10-28 #}{{ post.created|date:"F j, Y" }}          {# October 28, 2023 #}{{ post.created|date:"D, M j, Y g:i A" }} {# Sat, Oct 28, 2023 2:30 PM #} {# Time since #}{{ post.created|timesince }}  {# "2 days, 3 hours" #}{{ post.created|timeuntil }}  {# "in 2 days" #} {# Safe (render HTML) #}{{ post.content|safe }}       {# Render HTML without escaping #}{{ post.content|escape }}     {# Escape HTML #} {# Line breaks #}{{ text|linebreaks }}         {# Convert \n to <p> and <br> #}{{ text|linebreaksbr }}       {# Convert \n to <br> #} {# Slugify #}{{ title|slugify }}           {# "Hello World" → "hello-world" #} {# Add #}{{ value|add:10 }}            {# Add 10 to value #} {# Join #}{{ tags|join:", " }}          {# Join list: "python, django, web" #}

Chaining filters:

{# Multiple filters #}{{ post.title|lower|truncatewords:5 }}{# 1. Convert to lowercase   2. Truncate to 5 words #} {{ post.content|striptags|truncatewords:20 }}{# 1. Remove HTML tags   2. Truncate to 20 words #} {{ post.created|date:"Y-m-d"|upper }}{# 1. Format date   2. Convert to uppercase #}

Number filters:

{# Format numbers #}{{ price|floatformat:2 }}     {# 99.99 #}{{ number|filesizeformat }}   {# 1.5 MB #} {# Integer formatting #}{{ value|intcomma }}          {# 1,234,567 (requires humanize) #}

Real-world examples:

{# Blog post card #}<div class="post-card">    <h3>{{ post.title|title }}</h3>    <p class="author">By {{ post.author.get_full_name|default:post.author.username }}</p>    <p class="date">{{ post.created|date:"F j, Y" }} ({{ post.created|timesince }} ago)</p>    <p class="excerpt">{{ post.content|striptags|truncatewords:30 }}</p>    <p class="comments">{{ post.comments.count }} comment{{ post.comments.count|pluralize }}</p>    <a href="{{ post.get_absolute_url }}">Read more</a></div> {# Product price #}<div class="price">    {% if product.discount_price %}        <span class="original">${{ product.price|floatformat:2 }}</span>        <span class="discount">${{ product.discount_price|floatformat:2 }}</span>        <span class="save">Save {{ product.discount_percent }}%</span>    {% else %}        <span>${{ product.price|floatformat:2 }}</span>    {% endif %}</div>

Template Inheritance

Base Template

{# templates/base.html #}<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">        {# Block for custom title #}    <title>{% block title %}My Site{% endblock %}</title>        {# Block for extra head content #}    {% block extra_head %}{% endblock %}        {# CSS #}    <link rel="stylesheet" href="{% static 'css/style.css' %}">    {% block extra_css %}{% endblock %}</head><body>    {# Header #}    {% include 'includes/header.html' %}        {# Navigation #}    {% include 'includes/navbar.html' %}        {# Messages #}    {% if messages %}        <div class="messages">        {% for message in messages %}            <div class="alert alert-{{ message.tags }}">                {{ message }}            </div>        {% endfor %}        </div>    {% endif %}        {# Main content #}    <main>        {% block content %}        {# Child templates override this #}        {% endblock %}    </main>        {# Sidebar #}    {% block sidebar %}    <aside>        <h3>Default Sidebar</h3>    </aside>    {% endblock %}        {# Footer #}    {% include 'includes/footer.html' %}        {# JavaScript #}    <script src="{% static 'js/main.js' %}"></script>    {% block extra_js %}{% endblock %}</body></html>

Child Templates

{# templates/blog/post_list.html #}{% extends 'base.html' %} {% block title %}Blog Posts - {{ block.super }}{% endblock %} {% block extra_css %}<link rel="stylesheet" href="{% static 'blog/css/posts.css' %}">{% endblock %} {% block content %}<div class="post-list">    <h1>Blog Posts</h1>        {% for post in posts %}        <article class="post">            <h2>                <a href="{% url 'blog:post_detail' slug=post.slug %}">                    {{ post.title }}                </a>            </h2>            <p class="meta">                By {{ post.author.username }} on {{ post.created|date:"F j, Y" }}            </p>            <p>{{ post.content|striptags|truncatewords:50 }}</p>            <a href="{% url 'blog:post_detail' slug=post.slug %}">Read more →</a>        </article>    {% empty %}        <p>No posts yet.</p>    {% endfor %}        {# Pagination #}    {% if is_paginated %}        <div class="pagination">            {% if page_obj.has_previous %}                <a href="?page=1">First</a>                <a href="?page={{ page_obj.previous_page_number }}">Previous</a>            {% endif %}                        <span class="current">                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}            </span>                        {% if page_obj.has_next %}                <a href="?page={{ page_obj.next_page_number }}">Next</a>                <a href="?page={{ page_obj.paginator.num_pages }}">Last</a>            {% endif %}        </div>    {% endif %}</div>{% endblock %} {% block sidebar %}<aside>    <h3>Categories</h3>    <ul>    {% for category in categories %}        <li>            <a href="{% url 'blog:category' slug=category.slug %}">                {{ category.name }} ({{ category.post_count }})            </a>        </li>    {% endfor %}    </ul>        <h3>Recent Posts</h3>    <ul>    {% for post in recent_posts %}        <li>            <a href="{{ post.get_absolute_url }}">{{ post.title }}</a>        </li>    {% endfor %}    </ul></aside>{% endblock %} {% block extra_js %}<script src="{% static 'blog/js/posts.js' %}"></script>{% endblock %}

Multi-level Inheritance

{# templates/base.html - Level 1 #}<!DOCTYPE html><html><head>    <title>{% block title %}{% endblock %}</title></head><body>    {% block content %}{% endblock %}</body></html> {# templates/blog/base.html - Level 2 #}{% extends 'base.html' %} {% block title %}Blog - {{ block.super }}{% endblock %} {% block content %}<div class="blog-container">    <header class="blog-header">        <h1>My Blog</h1>    </header>        {% block blog_content %}    {# Blog-specific content #}    {% endblock %}        <aside class="blog-sidebar">        {% block blog_sidebar %}        {# Default blog sidebar #}        {% endblock %}    </aside></div>{% endblock %} {# templates/blog/post_list.html - Level 3 #}{% extends 'blog/base.html' %} {% block title %}Posts - {{ block.super }}{% endblock %} {% block blog_content %}<div class="posts">    {% for post in posts %}        <article>{{ post.title }}</article>    {% endfor %}</div>{% endblock %} {% block blog_sidebar %}<div class="categories">    {# Categories list #}</div>{% endblock %}

Include và Reusable Components

Basic Include

{# templates/includes/header.html #}<header>    <div class="logo">        <a href="{% url 'home' %}">            <img src="{% static 'images/logo.png' %}" alt="Logo">        </a>    </div>    <nav>        <a href="{% url 'blog:post_list' %}">Blog</a>        <a href="{% url 'about' %}">About</a>        <a href="{% url 'contact' %}">Contact</a>    </nav></header> {# Usage in templates #}{% include 'includes/header.html' %}

Include with Parameters

{# templates/includes/post_card.html #}<article class="post-card">    <h3>{{ post.title }}</h3>    <p>{{ post.content|truncatewords:20 }}</p>    {% if show_author %}        <p class="author">By {{ post.author.username }}</p>    {% endif %}    <a href="{{ post.get_absolute_url }}">Read more</a></article> {# Usage with context #}{% for post in posts %}    {% include 'includes/post_card.html' with post=post show_author=True %}{% endfor %} {# Include with only specific variables #}{% include 'includes/post_card.html' with post=post only %}

Reusable Components

{# templates/components/alert.html #}<div class="alert alert-{{ type|default:'info' }}">    <strong>{{ title }}</strong>    <p>{{ message }}</p></div> {# Usage #}{% include 'components/alert.html' with type='success' title='Success!' message='Post created' %}{% include 'components/alert.html' with type='error' title='Error!' message='Invalid data' %} {# templates/components/pagination.html #}{% if is_paginated %}<nav class="pagination">    {% if page_obj.has_previous %}        <a href="?page={{ page_obj.previous_page_number }}">← Previous</a>    {% endif %}        {% for num in page_obj.paginator.page_range %}        {% if page_obj.number == num %}            <span class="current">{{ num }}</span>        {% else %}            <a href="?page={{ num }}">{{ num }}</a>        {% endif %}    {% endfor %}        {% if page_obj.has_next %}        <a href="?page={{ page_obj.next_page_number }}">Next →</a>    {% endif %}</nav>{% endif %} {# Usage #}{% include 'components/pagination.html' %}

Comments

{# Single-line comment #}{# This won't appear in rendered HTML #} {# Multi-line comment #}{% comment %}This is a multi-line comment.It can span multiple lines.Useful for temporarily disabling code.{% endcomment %} {# Comment out code #}{% comment %}{% for post in posts %}    <div>{{ post.title }}</div>{% endfor %}{% endcomment %} {# HTML comments (visible in source) #}<!-- This is an HTML comment --><!-- It will appear in the page source -->

Bài Tập

Bài 1: Base Template

Task: Tạo base template structure:

{# templates/base.html #}- Header with logo and navigation- Content block- Sidebar block- Footer- Static files (CSS, JS)

Bài 2: Blog Templates

Task: Tạo blog templates với inheritance:

templates/├── base.html├── blog/│   ├── post_list.html      # List all posts│   ├── post_detail.html    # Single post│   └── includes/│       ├── post_card.html  # Reusable post card│       └── comment.html    # Comment component

Requirements:

Use template inheritance
Include pagination
Use filters for date/content
Reusable components

Task: Tạo dynamic navigation highlight current page:

{# templates/includes/navbar.html #}<nav>    <a href="{% url 'home' %}"        class="{% if request.resolver_match.url_name == 'home' %}active{% endif %}">        Home    </a>    <a href="{% url 'blog:post_list' %}"       class="{% if 'blog' in request.path %}active{% endif %}">        Blog    </a></nav>

Bài 4: Template Tags Practice

Task: Practice template tags và filters:

1. Display posts with:   - Author name (default to username if no full name)   - Created date (human-readable format)   - Truncated content (30 words)   - Comment count with pluralize 2. Conditional rendering:   - Show edit/delete buttons only to post author   - Display "Featured" badge for featured posts   - Show login prompt for anonymous users 3. Loop through categories:   - Display category name and post count   - Highlight current category   - Show "No posts" if category is empty

Tài Liệu Tham Khảo

Previous: Bài 04 Part 2: Views | Next: Bài 05 Part 2: Advanced Templates

#template-engine

Django Templates