Bài 05 Part 2: Advanced Templates

Static Files trong Templates

Static Files Configuration

# settings.pyimport os # Static files (CSS, JavaScript, Images)STATIC_URL = '/static/' # Additional locations of static filesSTATICFILES_DIRS = [    BASE_DIR / 'static',  # Project-level static files] # Collected static files for productionSTATIC_ROOT = BASE_DIR / 'staticfiles' # Media files (User uploads)MEDIA_URL = '/media/'MEDIA_ROOT = BASE_DIR / 'media'

Directory Structure:

myproject/├── static/                      # Project static files│   ├── css/│   │   ├── style.css│   │   └── admin.css│   ├── js/│   │   ├── main.js│   │   └── utils.js│   └── images/│       ├── logo.png│       └── favicon.ico│├── blog/│   ├── static/│   │   └── blog/                # Namespaced app static│   │       ├── css/│   │       │   └── blog.css│   │       ├── js/│   │       │   └── blog.js│   │       └── images/│   │           └── blog-icon.png│   └── ...│└── media/                       # User uploads    ├── posts/    │   └── images/    └── profiles/

Using Static Files in Templates

{# Load static tag #}{% load static %} <!DOCTYPE html><html><head>    {# CSS files #}    <link rel="stylesheet" href="{% static 'css/style.css' %}">    <link rel="stylesheet" href="{% static 'blog/css/blog.css' %}">        {# Favicon #}    <link rel="icon" href="{% static 'images/favicon.ico' %}"></head><body>    {# Images #}    <img src="{% static 'images/logo.png' %}" alt="Logo">        {# Background image in style #}    <div style="background-image: url('{% static 'images/hero.jpg' %}')">        Hero section    </div>        {# JavaScript #}    <script src="{% static 'js/main.js' %}"></script>    <script src="{% static 'blog/js/blog.js' %}"></script></body></html> {# Static files in CSS #}{% load static %}<style>.hero {    background-image: url('{% static 'images/hero.jpg' %}');}</style>

Media Files (User Uploads)

{# Display uploaded images #}{% if post.image %}    <img src="{{ post.image.url }}" alt="{{ post.title }}">{% else %}    <img src="{% static 'images/default-post.jpg' %}" alt="Default">{% endif %} {# User profile picture #}{% if user.profile.avatar %}    <img src="{{ user.profile.avatar.url }}" alt="{{ user.username }}">{% else %}    <img src="{% static 'images/default-avatar.png' %}" alt="Avatar">{% endif %} {# Download link #}{% if document.file %}    <a href="{{ document.file.url }}" download>        Download {{ document.filename }}    </a>{% endif %}

URLs Configuration for Media:

# mysite/urls.pyfrom django.conf import settingsfrom django.conf.urls.static import static urlpatterns = [    # Your URL patterns] # Serve media files in developmentif settings.DEBUG:    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Custom Template Tags

Simple Tags

# blog/templatetags/__init__.py# Empty file to make this a Python package # blog/templatetags/blog_tags.pyfrom django import templatefrom django.utils.html import format_htmlfrom blog.models import Post, Category register = template.Library() # 1. Simple tag - returns string@register.simple_tagdef total_posts():    """Return total number of posts."""    return Post.objects.count() # Usage: {% total_posts %} # 2. Simple tag with arguments@register.simple_tagdef post_count(category):    """Return post count for category."""    return Post.objects.filter(category=category).count() # Usage: {% post_count category %} # 3. Simple tag with keyword arguments@register.simple_tagdef latest_posts(count=5, category=None):    """Get latest posts."""    posts = Post.objects.filter(published=True)    if category:        posts = posts.filter(category=category)    return posts[:count] # Usage: # {% latest_posts %}# {% latest_posts count=10 %}# {% latest_posts count=5 category=tech %} # 4. Simple tag returning HTML@register.simple_tagdef star_rating(rating):    """Display star rating."""    full_stars = int(rating)    half_star = 1 if rating - full_stars >= 0.5 else 0    empty_stars = 5 - full_stars - half_star        stars = '★' * full_stars + '½' * half_star + '☆' * empty_stars    return format_html('<span class="rating">{}</span>', stars) # Usage: {% star_rating product.rating %}

Using Custom Tags:

{# Load custom tags #}{% load blog_tags %} {# Simple tag #}<p>Total posts: {% total_posts %}</p> {# With arguments #}<p>Tech posts: {% post_count category='tech' %}</p> {# Assign to variable #}{% latest_posts count=5 as recent %}<ul>{% for post in recent %}    <li>{{ post.title }}</li>{% endfor %}</ul> {# Star rating #}<div class="rating">    {% star_rating product.rating %}</div>

Inclusion Tags

# blog/templatetags/blog_tags.pyfrom django import template register = template.Library() @register.inclusion_tag('blog/includes/latest_posts.html')def show_latest_posts(count=5):    """Render latest posts widget."""    posts = Post.objects.filter(published=True)[:count]    return {'posts': posts} @register.inclusion_tag('blog/includes/categories.html')def show_categories():    """Render categories widget."""    categories = Category.objects.annotate(        post_count=Count('posts')    ).filter(post_count__gt=0)    return {'categories': categories} @register.inclusion_tag('blog/includes/post_card.html')def post_card(post, show_excerpt=True):    """Render post card."""    return {        'post': post,        'show_excerpt': show_excerpt,    }

Template for Inclusion Tag:

{# blog/templates/blog/includes/latest_posts.html #}<div class="latest-posts-widget">    <h3>Latest Posts</h3>    <ul>    {% for post in posts %}        <li>            <a href="{{ post.get_absolute_url }}">{{ post.title }}</a>            <span class="date">{{ post.created|date:"M d" }}</span>        </li>    {% endfor %}    </ul></div> {# blog/templates/blog/includes/categories.html #}<div class="categories-widget">    <h3>Categories</h3>    <ul>    {% for category in categories %}        <li>            <a href="{% url 'blog:category' slug=category.slug %}">                {{ category.name }}            </a>            <span class="count">({{ category.post_count }})</span>        </li>    {% endfor %}    </ul></div> {# blog/templates/blog/includes/post_card.html #}<article class="post-card">    <h3>{{ post.title }}</h3>    <p class="meta">{{ post.created|date:"F j, Y" }}</p>    {% if show_excerpt %}        <p>{{ post.content|striptags|truncatewords:30 }}</p>    {% endif %}    <a href="{{ post.get_absolute_url }}">Read more</a></article>

Using Inclusion Tags:

{% load blog_tags %} {# In sidebar #}<aside>    {% show_latest_posts count=10 %}    {% show_categories %}</aside> {# Post cards #}<div class="posts-grid">{% for post in posts %}    {% post_card post show_excerpt=True %}{% endfor %}</div>

Custom Filters

# blog/templatetags/blog_filters.pyfrom django import templatefrom django.utils.safestring import mark_safeimport markdown register = template.Library() # 1. Simple filter@register.filterdef multiply(value, arg):    """Multiply value by arg."""    return value * arg # Usage: {{ price|multiply:quantity }} # 2. String manipulation@register.filterdef truncate_chars(value, length):    """Truncate string to length."""    if len(value) <= length:        return value    return value[:length] + '...' # Usage: {{ text|truncate_chars:100 }} # 3. Markdown filter@register.filter(name='markdown')def markdown_format(text):    """Convert markdown to HTML."""    return mark_safe(markdown.markdown(text)) # Usage: {{ post.content|markdown }} # 4. Reading time@register.filterdef reading_time(text):    """Calculate reading time in minutes."""    words = len(text.split())    minutes = words // 200  # Average reading speed    if minutes < 1:        return "Less than 1 minute"    return f"{minutes} minute{'s' if minutes > 1 else ''} read" # Usage: {{ post.content|reading_time }} # 5. Format currency@register.filterdef currency(value):    """Format as currency."""    return f"${value:,.2f}" # Usage: {{ price|currency }}  → $1,234.56 # 6. Highlight search term@register.filterdef highlight(text, search):    """Highlight search term in text."""    if not search:        return text    highlighted = text.replace(        search,        f'<mark>{search}</mark>'    )    return mark_safe(highlighted) # Usage: {{ post.title|highlight:query }} # 7. File extension@register.filterdef file_extension(filepath):    """Get file extension."""    return filepath.split('.')[-1].upper() # Usage: {{ document.file.name|file_extension }}  → PDF # 8. Calculate percentage@register.filterdef percentage(value, total):    """Calculate percentage."""    if total == 0:        return 0    return round((value / total) * 100, 1) # Usage: {{ correct|percentage:total }}%

Using Custom Filters:

{% load blog_filters %} {# Multiply #}<p>Total: ${{ price|multiply:quantity }}</p> {# Truncate #}<p>{{ description|truncate_chars:150 }}</p> {# Markdown #}<div class="content">    {{ post.content|markdown }}</div> {# Reading time #}<span class="reading-time">    <i class="icon-clock"></i>    {{ post.content|reading_time }}</span> {# Currency #}<span class="price">{{ product.price|currency }}</span> {# Highlight search #}<h3>{{ post.title|highlight:search_query }}</h3> {# File type badge #}<span class="badge">{{ file.name|file_extension }}</span> {# Progress bar #}<div class="progress">    <div class="progress-bar" style="width: {{ completed|percentage:total }}%">        {{ completed|percentage:total }}%    </div></div>

Context Processors

Built-in Context Processors

# settings.pyTEMPLATES = [    {        'OPTIONS': {            'context_processors': [                # Built-in context processors                'django.template.context_processors.debug',                'django.template.context_processors.request',  # Adds 'request'                'django.contrib.auth.context_processors.auth',  # Adds 'user', 'perms'                'django.contrib.messages.context_processors.messages',  # Adds 'messages'                                # Static files                'django.template.context_processors.static',  # Adds 'STATIC_URL'                'django.template.context_processors.media',   # Adds 'MEDIA_URL'            ],        },    },] # Available in all templates without passing:# - request: Current request object# - user: Current user# - perms: User permissions# - messages: Flash messages# - STATIC_URL: Static files URL# - MEDIA_URL: Media files URL

Custom Context Processors

# blog/context_processors.pyfrom .models import Category, Postfrom django.conf import settings def blog_context(request):    """Add blog-related data to all templates."""    return {        'categories': Category.objects.all(),        'recent_posts': Post.objects.filter(published=True)[:5],        'total_posts': Post.objects.count(),    } def site_settings(request):    """Add site settings to all templates."""    return {        'site_name': 'My Blog',        'site_description': 'A blog about Django',        'contact_email': 'contact@myblog.com',        'social_links': {            'twitter': 'https://twitter.com/myblog',            'github': 'https://github.com/myblog',        }    } def user_notifications(request):    """Add user notifications count."""    if request.user.is_authenticated:        return {            'unread_notifications': request.user.notifications.filter(read=False).count(),        }    return {} def feature_flags(request):    """Feature flags for A/B testing."""    return {        'enable_comments': getattr(settings, 'ENABLE_COMMENTS', True),        'enable_sharing': getattr(settings, 'ENABLE_SHARING', True),        'maintenance_mode': getattr(settings, 'MAINTENANCE_MODE', False),    }

Register Context Processor:

# settings.pyTEMPLATES = [    {        'OPTIONS': {            'context_processors': [                # ... built-in processors                'blog.context_processors.blog_context',                'blog.context_processors.site_settings',                'blog.context_processors.user_notifications',                'blog.context_processors.feature_flags',            ],        },    },]

Using in Templates:

{# No need to pass these variables - available everywhere! #} {# From blog_context #}<aside>    <h3>Categories</h3>    <ul>    {% for category in categories %}        <li>{{ category.name }}</li>    {% endfor %}    </ul>        <p>Total posts: {{ total_posts }}</p></aside> {# From site_settings #}<footer>    <p>&copy; {{ site_name }}</p>    <p>{{ site_description }}</p>    <a href="mailto:{{ contact_email }}">Contact</a>        <div class="social">        <a href="{{ social_links.twitter }}">Twitter</a>        <a href="{{ social_links.github }}">GitHub</a>    </div></footer> {# From user_notifications #}{% if user.is_authenticated %}    <a href="{% url 'notifications' %}">        Notifications        {% if unread_notifications > 0 %}            <span class="badge">{{ unread_notifications }}</span>        {% endif %}    </a>{% endif %} {# From feature_flags #}{% if enable_comments %}    <div id="comments">        {# Comments section #}    </div>{% endif %} {% if maintenance_mode %}    <div class="alert alert-warning">        Site is under maintenance    </div>{% endif %}

URL Tag Advanced Usage

URL with Parameters

{# Simple URL #}<a href="{% url 'blog:post_list' %}">All Posts</a> {# URL with positional argument #}<a href="{% url 'blog:post_detail' post.slug %}">{{ post.title }}</a> {# URL with keyword arguments #}<a href="{% url 'blog:post_detail' slug=post.slug %}">{{ post.title }}</a> {# URL with multiple arguments #}<a href="{% url 'blog:archive_month' year=2023 month=10 %}">October 2023</a> {# URL with query string #}<a href="{% url 'blog:post_list' %}?page=2&sort=date">Page 2</a> {# Dynamic query string #}<a href="{% url 'blog:post_list' %}?q={{ search_query }}">Search</a> {# Assign URL to variable #}{% url 'blog:post_detail' slug=post.slug as post_url %}<a href="{{ post_url }}">Link 1</a><a href="{{ post_url }}">Link 2</a> {# Check if URL exists #}{% url 'blog:edit_post' post.slug as edit_url %}{% if edit_url %}    <a href="{{ edit_url }}">Edit</a>{% endif %}

URL in Forms

{# Form action #}<form method="post" action="{% url 'blog:post_create' %}">    {% csrf_token %}    {{ form.as_p }}    <button type="submit">Create Post</button></form> {# Edit form #}<form method="post" action="{% url 'blog:post_edit' slug=post.slug %}">    {% csrf_token %}    {{ form.as_p }}    <button type="submit">Update</button></form> {# Delete confirmation #}<form method="post" action="{% url 'blog:post_delete' slug=post.slug %}">    {% csrf_token %}    <p>Delete "{{ post.title }}"?</p>    <button type="submit">Delete</button>    <a href="{{ post.get_absolute_url }}">Cancel</a></form>

CSRF Protection

{# CSRF token in forms #}<form method="post">    {% csrf_token %}    {{ form.as_p }}    <button type="submit">Submit</button></form> {# CSRF token for AJAX #}<script>function getCookie(name) {    let cookieValue = null;    if (document.cookie && document.cookie !== '') {        const cookies = document.cookie.split(';');        for (let i = 0; i < cookies.length; i++) {            const cookie = cookies[i].trim();            if (cookie.substring(0, name.length + 1) === (name + '=')) {                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));                break;            }        }    }    return cookieValue;} const csrftoken = getCookie('csrftoken'); fetch('/api/post/', {    method: 'POST',    headers: {        'X-CSRFToken': csrftoken,        'Content-Type': 'application/json',    },    body: JSON.stringify(data)});</script>

Template Best Practices

1. Keep Templates Simple

{# ❌ BAD - Complex logic in template #}{% for post in posts %}    {% if post.published and post.author.is_active and not post.is_deleted %}        {% if post.created > cutoff_date %}            {# Complex rendering #}        {% endif %}    {% endif %}{% endfor %} {# ✅ GOOD - Logic in view #}{# View: posts = Post.objects.active().recent() #}{% for post in posts %}    <article>{{ post.title }}</article>{% endfor %}

2. Use Template Inheritance

{# ❌ BAD - Duplicate code #}{# page1.html #}<html><head><title>Page 1</title></head><body>    <nav>...</nav>    <main>Page 1 content</main></body></html> {# page2.html #}<html><head><title>Page 2</title></head><body>    <nav>...</nav>  {# Duplicate! #}    <main>Page 2 content</main></body></html> {# ✅ GOOD - Use inheritance #}{# base.html #}<html><head><title>{% block title %}{% endblock %}</title></head><body>    <nav>...</nav>    <main>{% block content %}{% endblock %}</main></body></html> {# page1.html #}{% extends 'base.html' %}{% block title %}Page 1{% endblock %}{% block content %}Page 1 content{% endblock %}

3. Namespace Static Files

{# ❌ BAD - No namespace #}{% static 'css/style.css' %}{% static 'js/main.js' %} {# ✅ GOOD - Namespaced #}{% static 'blog/css/blog.css' %}{% static 'blog/js/blog.js' %}

4. Use Context Processors Wisely

# ❌ BAD - Expensive queries in every requestdef blog_context(request):    return {        'all_posts': Post.objects.all(),  # Heavy query!        'all_users': User.objects.all(),  # Unnecessary!    } # ✅ GOOD - Only what's neededdef blog_context(request):    return {        'recent_posts': Post.objects.filter(published=True)[:5],        'post_count': Post.objects.filter(published=True).count(),    }

Bài Tập

Bài 1: Custom Template Tags

Task: Tạo custom template tags:

# 1. {% post_count %} - Total posts# 2. {% recent_comments count=5 %} - Recent comments# 3. {% related_posts post count=3 %} - Related posts# 4. {% popular_posts count=5 %} - Most viewed posts # Use in template:{% load custom_tags %}{% post_count %}{% recent_comments count=10 %}

Bài 2: Custom Filters

Task: Tạo custom filters:

# 1. truncate_words - Truncate to N words# 2. time_ago - "2 hours ago", "3 days ago"# 3. highlight - Highlight search term# 4. markdown - Convert markdown to HTML# 5. excerpt - Generate excerpt from content # Usage:{{ text|truncate_words:50 }}{{ post.created|time_ago }}{{ post.title|highlight:query }}

Bài 3: Context Processor

Task: Tạo context processor for site-wide data:

# blog/context_processors.pydef site_data(request):    return {        'categories': Category.objects.all(),        'tags': Tag.objects.all(),        'site_stats': {            'posts': Post.objects.count(),            'comments': Comment.objects.count(),        }    } # Use in any template without passing:{% for category in categories %}    {{ category.name }}{% endfor %}

Task: Tạo reusable widget system:

# Create inclusion tags for widgets:# 1. {% latest_posts_widget count=5 %}# 2. {% categories_widget %}# 3. {% tag_cloud_widget %}# 4. {% search_widget %} # Each widget should:# - Have its own template# - Be styled# - Be configurable# - Be reusable across pages

Tài Liệu Tham Khảo

Previous: Bài 05: Django Templates | Next: Bài 06: Static Files

#custom-tags

Advanced Templates - Custom Tags, Filters, Context Processors

Django Template Advanced Features