Bài 28: Template Advanced Features

Template Context Processors

Context Processors tự động add variables vào tất cả templates.

# Context processors đã có sẵn (settings.py):TEMPLATES = [    {        'BACKEND': 'django.template.backends.django.DjangoTemplates',        'OPTIONS': {            'context_processors': [                'django.template.context_processors.debug',                'django.template.context_processors.request',  # {{ request }}                'django.contrib.auth.context_processors.auth',  # {{ user }}                'django.contrib.messages.context_processors.messages',  # {{ messages }}            ],        },    },] # Available in all templates:# {{ request }} - current request# {{ user }} - current user# {{ perms }} - user permissions# {{ messages }} - flash messages

Custom Context Processor

# blog/context_processors.pyfrom .models import Category, Tag def site_data(request):    """Add site-wide data to all templates"""    return {        'site_name': 'My Blog',        'site_description': 'A blog about Django',        'categories': Category.objects.all(),        'popular_tags': Tag.objects.order_by('-post_count')[:10],    } def user_stats(request):    """Add user-specific data"""    if request.user.is_authenticated:        return {            'unread_notifications': request.user.notifications.filter(read=False).count(),            'user_post_count': request.user.posts.count(),        }    return {} # settings.pyTEMPLATES = [    {        'OPTIONS': {            'context_processors': [                # ... default processors ...                'blog.context_processors.site_data',                'blog.context_processors.user_stats',            ],        },    },] # Now available in all templates:# {{ site_name }}# {{ categories }}# {{ unread_notifications }}

Performance Considerations

# BAD - queries in every template render:def bad_context_processor(request):    return {        'all_posts': Post.objects.all(),  # Loads all posts!        'all_users': User.objects.all(),  # Loads all users!    } # GOOD - only what's needed:def good_context_processor(request):    return {        'post_count': Post.objects.count(),  # Just count        'categories': Category.objects.all(),  # Small dataset    } # BETTER - use caching:from django.core.cache import cache def cached_context_processor(request):    categories = cache.get('all_categories')    if categories is None:        categories = list(Category.objects.all())        cache.set('all_categories', categories, 3600)  # Cache 1 hour        return {        'categories': categories,    }

Custom Template Tags

Simple Tags

# blog/templatetags/blog_tags.pyfrom django import templatefrom django.utils.html import format_html register = template.Library() @register.simple_tagdef current_time(format_string='%Y-%m-%d %H:%M:%S'):    """Display current time"""    from datetime import datetime    return datetime.now().strftime(format_string) # Usage in template:{% load blog_tags %}{% current_time %}{% current_time '%d/%m/%Y' %} @register.simple_tagdef multiply(a, b):    """Multiply two numbers"""    return a * b # Usage:{% multiply 5 10 %}  # Output: 50 @register.simple_tag(takes_context=True)def greeting(context):    """Personalized greeting"""    user = context['user']    if user.is_authenticated:        return f'Hello, {user.first_name}!'    return 'Hello, Guest!' # Usage:{% greeting %}

Inclusion Tags

# blog/templatetags/blog_tags.pyfrom django import templatefrom blog.models import Post register = template.Library() @register.inclusion_tag('blog/includes/recent_posts.html')def show_recent_posts(count=5):    """Show recent posts"""    posts = Post.objects.filter(published=True).order_by('-created')[:count]    return {'posts': posts} # Template: blog/includes/recent_posts.html<div class="recent-posts">    <h3>Recent Posts</h3>    <ul>        {% for post in posts %}            <li><a href="{{ post.get_absolute_url }}">{{ post.title }}</a></li>        {% endfor %}    </ul></div> # Usage in template:{% load blog_tags %}{% show_recent_posts %}{% show_recent_posts 10 %} @register.inclusion_tag('blog/includes/category_list.html')def show_categories():    """Show category list with post counts"""    from django.db.models import Count    categories = Category.objects.annotate(        post_count=Count('posts')    ).filter(post_count__gt=0)        return {'categories': categories} # Usage:{% show_categories %}

Assignment Tags

@register.simple_tagdef get_popular_posts(count=5):    """Get popular posts for later use"""    return Post.objects.order_by('-views')[:count] # Usage:{% get_popular_posts 10 as popular %} {% for post in popular %}    <h3>{{ post.title }}</h3>{% endfor %} @register.simple_tagdef get_category_posts(category_slug):    """Get posts by category"""    return Post.objects.filter(        category__slug=category_slug,        published=True    ) # Usage:{% get_category_posts 'technology' as tech_posts %} <h2>Technology Posts</h2>{% for post in tech_posts %}    <div>{{ post.title }}</div>{% endfor %}

Advanced Custom Tags

from django import templatefrom django.template.loader import render_to_string register = template.Library() @register.simple_tag(takes_context=True)def render_comments(context, post):    """Render comments with nesting"""    comments = post.comments.filter(parent=None, approved=True)        return render_to_string('blog/includes/comments.html', {        'comments': comments,        'user': context['user'],        'post': post,    }) # Usage:{% render_comments post %} @register.simple_tagdef url_replace(request, **kwargs):    """Replace URL parameters (useful for pagination with filters)"""    query = request.GET.copy()    for key, value in kwargs.items():        if value:            query[key] = value        elif key in query:            del query[key]    return query.urlencode() # Usage:<a href="?{% url_replace page=2 %}">Page 2</a><a href="?{% url_replace category='tech' %}">Tech</a>

Custom Template Filters

Basic Filters

# blog/templatetags/blog_filters.pyfrom django import templatefrom django.utils.safestring import mark_safeimport markdown register = template.Library() @register.filterdef truncate_chars(value, length=100):    """Truncate string to specified length"""    if len(value) <= length:        return value    return value[:length] + '...' # Usage:{{ post.content|truncate_chars:50 }} @register.filterdef multiply(value, arg):    """Multiply value by arg"""    return value * arg # Usage:{{ price|multiply:1.1 }}  # Add 10% @register.filter(name='markdown')def markdown_to_html(text):    """Convert markdown to HTML"""    return mark_safe(markdown.markdown(text)) # Usage:{{ post.content|markdown }}

String Filters

@register.filterdef titlecase(value):    """Convert to title case"""    return value.title() # Usage:{{ "hello world"|titlecase }}  # Hello World @register.filterdef remove_spaces(value):    """Remove all spaces"""    return value.replace(' ', '') @register.filterdef highlight(value, search):    """Highlight search term in text"""    if not search:        return value        import re    pattern = re.compile(re.escape(search), re.IGNORECASE)    replacement = f'<mark>{search}</mark>'    return mark_safe(pattern.sub(replacement, value)) # Usage:{{ post.content|highlight:query }}

Number Filters

@register.filterdef percentage(value, total):    """Calculate percentage"""    if total == 0:        return 0    return round((value / total) * 100, 2) # Usage:{{ completed_tasks|percentage:total_tasks }}% @register.filterdef currency(value):    """Format as currency"""    return f'${value:,.2f}' # Usage:{{ price|currency }}  # $1,234.56 @register.filterdef human_readable_size(bytes):    """Convert bytes to human readable format"""    for unit in ['B', 'KB', 'MB', 'GB', 'TB']:        if bytes < 1024.0:            return f"{bytes:.1f} {unit}"        bytes /= 1024.0    return f"{bytes:.1f} PB" # Usage:{{ file.size|human_readable_size }}  # 1.5 MB

Date Filters

from django.utils import timezonefrom datetime import timedelta @register.filterdef time_since(value):    """Human-readable time since"""    if not value:        return ''        now = timezone.now()    diff = now - value        if diff < timedelta(minutes=1):        return 'just now'    elif diff < timedelta(hours=1):        minutes = int(diff.total_seconds() / 60)        return f'{minutes} minute{"s" if minutes > 1 else ""} ago'    elif diff < timedelta(days=1):        hours = int(diff.total_seconds() / 3600)        return f'{hours} hour{"s" if hours > 1 else ""} ago'    elif diff < timedelta(days=7):        days = diff.days        return f'{days} day{"s" if days > 1 else ""} ago'    else:        return value.strftime('%B %d, %Y') # Usage:{{ post.created|time_since }}  # 5 minutes ago @register.filterdef is_recent(value, days=7):    """Check if date is within recent days"""    if not value:        return False    return (timezone.now() - value).days <= days # Usage:{% if post.created|is_recent:3 %}    <span class="badge badge-new">New</span>{% endif %}

Template Fragments

Include with Variables

{# Main template #}{% include 'includes/post_card.html' with post=post show_author=True %} {# includes/post_card.html #}<div class="post-card">    <h3>{{ post.title }}</h3>    <p>{{ post.excerpt }}</p>    {% if show_author %}        <p>By {{ post.author.username }}</p>    {% endif %}</div> {# Include without passing context #}{% include 'includes/footer.html' only %}

Reusable Components

{# includes/pagination.html #}{% if is_paginated %}<nav 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>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 %}</nav>{% endif %} {# Usage in any template #}{% include 'includes/pagination.html' %} {# includes/alert.html #}<div class="alert alert-{{ type|default:'info' }}">    {{ message }}</div> {# Usage #}{% include 'includes/alert.html' with type='success' message='Saved!' %}

Block Overriding

{# base.html #}<!DOCTYPE html><html><head>    <title>{% block title %}Default Title{% endblock %}</title>    {% block extra_css %}{% endblock %}</head><body>    <header>        {% block header %}            <h1>Site Header</h1>        {% endblock %}    </header>        <main>        {% block content %}{% endblock %}    </main>        <footer>        {% block footer %}            <p>&copy; 2024 My Site</p>        {% endblock %}    </footer>        {% block extra_js %}{% endblock %}</body></html> {# post_list.html #}{% extends 'base.html' %} {% block title %}All Posts - {{ block.super }}{% endblock %} {% block extra_css %}    <link rel="stylesheet" href="/static/css/posts.css">{% endblock %} {% block content %}    <h2>All Posts</h2>    {% for post in posts %}        {% include 'includes/post_card.html' %}    {% endfor %}{% endblock %} {% block extra_js %}    <script src="/static/js/posts.js"></script>{% endblock %}

Caching Template Fragments

Basic Fragment Caching

{% load cache %} {# Cache for 1 hour (3600 seconds) #}{% cache 3600 sidebar %}    <div class="sidebar">        <h3>Categories</h3>        <ul>            {% for category in categories %}                <li>{{ category.name }}</li>            {% endfor %}        </ul>    </div>{% endcache %} {# Cache with unique key #}{% cache 3600 post_sidebar post.id %}    <div class="post-sidebar">        <!-- Related posts, comments, etc. -->    </div>{% endcache %} {# Cache per user #}{% cache 3600 user_menu user.id %}    <nav class="user-menu">        <a href="{% url 'profile' %}">{{ user.username }}</a>        <a href="{% url 'logout' %}">Logout</a>    </nav>{% endcache %}

Conditional Caching

{# Only cache if not debugging #}{% if not debug %}    {% cache 3600 expensive_component %}        <!-- Expensive database queries here -->    {% endcache %}{% else %}    <!-- Always fresh in debug mode -->{% endif %} {# Cache with vary on #}{% load cache %}{% cache 3600 post_list request.GET.page %}    {% for post in posts %}        {{ post.title }}    {% endfor %}{% endcache %}

Template Caching Best Practices

# settings.py - Cache backendCACHES = {    'default': {        'BACKEND': 'django.core.cache.backends.redis.RedisCache',        'LOCATION': 'redis://127.0.0.1:6379/1',        'OPTIONS': {            'CLIENT_CLASS': 'django_redis.client.DefaultClient',        }    }} # Template caching strategy:# - Cache expensive queries (categories, tags)# - Cache per user for personalized content# - Cache with version keys for invalidation# - Don't cache user-specific or time-sensitive data # Invalidate cache when data changes:from django.core.cache import cachefrom django.db.models.signals import post_save @receiver(post_save, sender=Category)def invalidate_category_cache(sender, instance, **kwargs):    cache.delete('all_categories')

Template Best Practices

DRY Templates

{# BAD - Repeated code #}<div class="post">    <h2>{{ post.title }}</h2>    <p>{{ post.excerpt }}</p>    <a href="{{ post.get_absolute_url }}">Read more</a></div> <div class="post">    <h2>{{ another_post.title }}</h2>    <p>{{ another_post.excerpt }}</p>    <a href="{{ another_post.get_absolute_url }}">Read more</a></div> {# GOOD - Reusable component #}{# includes/post_card.html #}<div class="post">    <h2>{{ post.title }}</h2>    <p>{{ post.excerpt }}</p>    <a href="{{ post.get_absolute_url }}">Read more</a></div> {# Main template #}{% for post in posts %}    {% include 'includes/post_card.html' %}{% endfor %}

Keep Logic in Views/Models

{# BAD - Logic in template #}{% if post.created.year == 2024 and post.created.month >= 6 and post.published %}    <span>Recent</span>{% endif %} {# GOOD - Logic in model #}{# models.py #}class Post(models.Model):    def is_recent(self):        from datetime import datetime        return (self.created.year == datetime.now().year and                 self.created.month >= 6 and                 self.published) {# Template #}{% if post.is_recent %}    <span>Recent</span>{% endif %}

Optimize Queries

{# BAD - N+1 query problem #}{% for post in posts %}    <h3>{{ post.title }}</h3>    <p>By {{ post.author.username }}</p>  {# Query per post! #}    <p>Category: {{ post.category.name }}</p>  {# Another query! #}{% endfor %} {# GOOD - Use select_related in view #}{# views.py #}posts = Post.objects.select_related('author', 'category').all() {# Template stays the same, but only 1 query #}{% for post in posts %}    <h3>{{ post.title }}</h3>    <p>By {{ post.author.username }}</p>    <p>Category: {{ post.category.name }}</p>{% endfor %}

Bài Tập

Bài 1: Custom Template Tags & Filters

Task: Create useful template tags and filters:

# Requirements:# 1. Custom filter: truncate_words (smarter than default)# 2. Custom filter: reading_time (estimate read time)# 3. Custom filter: slugify_vietnamese (handle Vietnamese)# 4. Custom tag: get_related_posts# 5. Custom tag: render_breadcrumbs# 6. Inclusion tag: show_comments (with nesting)# 7. Inclusion tag: show_user_card# 8. Assignment tag: get_trending_posts# 9. Filter: format_phone_number# 10. Tag: random_posts (shuffle and pick N)

Bài 2: Reusable Components

Task: Build component library:

# Requirements:# 1. Base template with blocks# 2. Navigation component (responsive)# 3. Post card component (multiple layouts)# 4. Pagination component (styled)# 5. Comment tree component (nested)# 6. Alert/notification component# 7. Modal component# 8. Form field components# 9. User avatar component# 10. Social share buttons component# 11. All components documented# 12. Example usage page

Bài 3: Performance Optimization

Task: Optimize template performance:

# Requirements:# 1. Identify N+1 queries in templates# 2. Use select_related/prefetch_related# 3. Implement fragment caching# 4. Cache expensive components# 5. Create cache invalidation strategy# 6. Use template fragment caching# 7. Optimize image loading (lazy load)# 8. Minimize database hits# 9. Profile template rendering time# 10. Achieve < 100ms render time

Bài 4: Complete Template System

Task: Full template system:

# Requirements:# 1. Base templates (multi-layout support)# 2. 20+ reusable components# 3. 10+ custom template tags# 4. 10+ custom filters# 5. Context processors for site data# 6. Fragment caching strategy# 7. Template inheritance structure# 8. Component documentation# 9. Style guide# 10. Accessibility features# 11. Responsive design# 12. Dark mode support# 13. Print-friendly styles# 14. SEO optimization# 15. Performance testing

Tài Liệu Tham Khảo

Previous: Bài 27: Class-Based Views Advanced | Next: Bài 29: Database Optimization

#templates-advanced

Django Template Advanced Features