11 2 3 Templates Explained

Key Concepts

Templates in web development involve several key concepts:

Introduction to Templates
Template Inheritance
Template Variables
Template Filters
Template Tags
Static Files in Templates

1. Introduction to Templates

Templates are files that define the structure and layout of web pages. They allow dynamic content to be inserted into predefined HTML structures.

2. Template Inheritance

Template inheritance allows you to create a base template that other templates can extend. This promotes code reuse and consistency across multiple pages.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Default Title{% endblock %}</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        <p>© 2023 My Website</p>
    </footer>
</body>
</html>

Analogy: Think of template inheritance as a blueprint for a house. Each room can have its own design while sharing the same foundation and structure.

3. Template Variables

Template variables allow dynamic data to be passed from the backend to the frontend. These variables can be used within the HTML to display personalized content.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome Page</title>
</head>
<body>
    <h1>Welcome, {{ user.name }}!</h1>
    <p>Your email is {{ user.email }}.</p>
</body>
</html>

Analogy: Think of template variables as placeholders in a form letter that get filled with specific information for each recipient.

4. Template Filters

Template filters modify the values of variables before they are rendered. They can be used to format dates, convert text to uppercase, and more.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date Formatting</title>
</head>
<body>
    <p>Today's date is {{ today | date:"F j, Y" }}.</p>
</body>
</html>

Analogy: Think of template filters as tools in a kitchen that transform raw ingredients into a finished dish.

5. Template Tags

Template tags are used to perform logic within templates, such as loops, conditionals, and including other templates.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Loop Example</title>
</head>
<body>
    <ul>
        {% for item in items %}
            <li>{{ item }}</li>
        {% endfor %}
    </ul>
</body>
</html>

Analogy: Think of template tags as instructions in a recipe that guide the cook through the steps to prepare a meal.

6. Static Files in Templates

Static files, such as CSS, JavaScript, and images, are essential for styling and enhancing the functionality of web pages. Templates can include these files using static tags.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Static Files Example</title>
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <img src="{% static 'images/logo.png' %}" alt="Logo">
    <script src="{% static 'js/scripts.js' %}"></script>
</body>
</html>

Analogy: Think of static files as the decorations and tools that make a house livable and comfortable.