El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció

En aquest tema, aprendrem sobre les plantilles i els fitxers estàtics en Django. Les plantilles ens permeten generar HTML dinàmic, mentre que els fitxers estàtics inclouen recursos com CSS, JavaScript i imatges que són necessaris per a la presentació de la nostra aplicació web.

Continguts

Plantilles en Django
- Què són les plantilles?
- Configuració de les plantilles
- Sintaxi bàsica de les plantilles
- Herència de plantilles
Fitxers Estàtics en Django
- Què són els fitxers estàtics?
- Configuració dels fitxers estàtics
- Ús de fitxers estàtics en plantilles
Exercicis Pràctics
- Creació d'una plantilla bàsica
- Ús de fitxers CSS i JavaScript

Plantilles en Django

Què són les plantilles?

Les plantilles en Django són fitxers HTML que poden incloure etiquetes de plantilla de Django per generar contingut dinàmic. Aquestes etiquetes permeten inserir dades, aplicar lògica condicional, iterar sobre llistes, i molt més.

Configuració de les plantilles

Per configurar les plantilles en un projecte Django, hem de definir la ubicació de les plantilles en el fitxer settings.py:

# settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        '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',
            ],
        },
    },
]

Sintaxi bàsica de les plantilles

Les plantilles de Django utilitzen etiquetes i filtres per inserir dades i aplicar lògica. Aquí teniu alguns exemples bàsics:

<!-- plantilla.html -->

<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
</head>
<body>
    <h1>Hola, {{ user.username }}!</h1>
    {% if user.is_authenticated %}
        <p>Benvingut de nou!</p>
    {% else %}
        <p>Si us plau, inicia sessió.</p>
    {% endif %}
</body>
</html>

Herència de plantilles

L'herència de plantilles permet reutilitzar codi HTML comú entre diferents plantilles. Aquí teniu un exemple:

<!-- base.html -->

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}El meu lloc web{% endblock %}</title>
</head>
<body>
    <header>
        <h1>El meu lloc web</h1>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
</body>
</html>

<!-- home.html -->

{% extends "base.html" %}

{% block title %}Inici{% endblock %}

{% block content %}
    <h2>Benvingut a la pàgina d'inici!</h2>
{% endblock %}

Fitxers Estàtics en Django

Què són els fitxers estàtics?

Els fitxers estàtics inclouen recursos com CSS, JavaScript i imatges que són necessaris per a la presentació de la nostra aplicació web.

Configuració dels fitxers estàtics

Per configurar els fitxers estàtics, hem de definir la ubicació dels fitxers estàtics en el fitxer settings.py:

# settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

Ús de fitxers estàtics en plantilles

Per utilitzar fitxers estàtics en les plantilles, primer hem d'incloure la directiva {% load static %} i després referenciar els fitxers estàtics amb {% static 'path/to/file' %}:

<!-- plantilla.html -->

{% load static %}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
</head>
<body>
    <script src="{% static 'js/scripts.js' %}"></script>
</body>
</html>

Exercicis Pràctics

Exercici 1: Creació d'una plantilla bàsica

Crea un directori anomenat templates a l'arrel del teu projecte.
Dins del directori templates, crea un fitxer anomenat index.html amb el següent contingut:

<!-- templates/index.html -->

<!DOCTYPE html>
<html>
<head>
    <title>Pàgina d'Inici</title>
</head>
<body>
    <h1>Benvingut a la meva aplicació Django!</h1>
</body>
</html>

Modifica la vista en views.py per renderitzar aquesta plantilla:

# views.py

from django.shortcuts import render

def home(request):
    return render(request, 'index.html')

Exercici 2: Ús de fitxers CSS i JavaScript

Crea un directori anomenat static a l'arrel del teu projecte.
Dins del directori static, crea un subdirectori anomenat css i un altre anomenat js.
Crea un fitxer anomenat styles.css dins del directori css amb el següent contingut:

/* static/css/styles.css */

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

Crea un fitxer anomenat scripts.js dins del directori js amb el següent contingut:

// static/js/scripts.js

document.addEventListener('DOMContentLoaded', function() {
    alert('Benvingut a la meva aplicació Django!');
});

Modifica la plantilla index.html per incloure els fitxers CSS i JavaScript:

<!-- templates/index.html -->

{% load static %}

<!DOCTYPE html>
<html>
<head>
    <title>Pàgina d'Inici</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
</head>
<body>
    <h1>Benvingut a la meva aplicació Django!</h1>
    <script src="{% static 'js/scripts.js' %}"></script>
</body>
</html>

Conclusió

En aquesta secció, hem après sobre les plantilles i els fitxers estàtics en Django. Hem vist com configurar i utilitzar plantilles per generar HTML dinàmic i com incloure fitxers estàtics com CSS i JavaScript per millorar la presentació de la nostra aplicació web. Aquests conceptes són fonamentals per crear aplicacions web atractives i funcionals amb Django. En el següent tema, explorarem els models i les bases de dades en Django.

Plantilles i Fitxers Estàtics