# Templates & Static Files ## Template Structure Django uses a templating system to separate business logic from presentation logic. Templates are stored inside the `templates/` directory of each app or a global templates directory. ``` myproject/ ├── myapp/ │ └── templates/ │ └── myapp/ │ ├── base.html # Base layout template │ ├── products/ │ │ ├── list.html # Product list page │ │ └── detail.html # Product detail page │ └── includes/ │ └── navbar.html # Reusable navbar partial └── static/ ├── css/ │ └── styles.css # CSS styles ├── js/ │ └── app.js # JavaScript file └── images/ └── logo.png # Images ``` * Each app can have its own template folder. * Use `includes/` for partials like headers, footers, or navbars. * Place shared static files like CSS, JS, and images in the `static/` folder. ## Base Template (`base.html`) The base template defines the overall layout and structure for your pages. ```html {% block title %}My Site{% endblock %} {% load static %} {% include 'myapp/includes/navbar.html' %}

{% block content %} {% endblock %}

``` ### Key Points: * `{% load static %}` allows access to static files. * `{% block %}` defines placeholders for child templates. * `{% include %}` inserts reusable templates. ## Child Template Example (`list.html`) ```html {% extends "myapp/base.html" %} {% block title %}Products List{% endblock %} {% block content %}

Products

{{ product.name }} - ${{ product.price }}
No products available.

Add Product {% endblock %} ``` ### Features Used: * `{% extends %}` inherits from the base template. * `{% for %}` loops over a queryset. * `{% empty %}` handles cases when the list is empty. * `{% url %}` dynamically generates URLs. ## Template Tags & Filters Django templates support logic and data manipulation with built-in tags and filters. | Tag/Filter | Usage Example | Purpose | | | | ---------------- | --------------------------------- | ------------------- | --------------------- | -------------------- | | `{{ variable }}` | `{{ product.name }}` | Display variable | | | | \` | lower\` | \`{{ name | lower }}\` | Convert to lowercase | | \` | length\` | \`{{ list | length }}\` | Get length of list | | \` | date\` | \`{{ created\_at | date:"Y-m-d" }}\` | Format date | | \` | truncatechars\` | \`{{ description | truncatechars:50 }}\` | Truncate text | | `{% if %}` | `{% if user.is_authenticated %}` | Conditional logic | | | | `{% for %}` | `{% for item in items %}` | Loop over items | | | | `{% url %}` | `{% url 'product_detail' pk=1 %}` | Reverse URL lookup | | | | `{% static %}` | `{% static 'images/logo.png' %}` | Link to static file | | | ## Static Files Configuration Django handles static files with dedicated settings for development and production. ```python # settings.py STATIC_URL = '/static/' STATICFILES_DIRS = [BASE_DIR / "static"] # Development STATIC_ROOT = BASE_DIR / "staticfiles" # Production collectstatic destination ``` ### Managing Static Files | Command | Purpose | | -------------------------------- | ---------------------------------------------------------------------- | | `python manage.py collectstatic` | Collects all static files into `STATIC_ROOT` for production deployment | ## Summary of Template & Static Files System | Feature | Purpose | | ----------------------- | ------------------------------------ | | Template Inheritance | Reuse common layouts | | Template Tags & Filters | Dynamic data rendering | | Includes | Reusable partial templates | | Static Files | Serve CSS, JS, and images | | `collectstatic` | Prepares static files for production | Django’s templating system, combined with static file handling, enables you to build clean, maintainable, and dynamic web interfaces.

Professional Certificate in Tech Support

About this course

Curriculum

Fundamentals of Technical Support

Hardware Troubleshooting

Software & Operating Systems

Networking Fundamentals

IT Service Management

Capstone Project

Student Reviews