00
:
00
:
00
:
00
•Corso SEO AI - Usa SEOEMAIL al checkout per il 30% di sconto

EreditarietĂ  dei Template

L’ereditarieta dei template e una delle funzionalita piu potenti di Django. Permette di definire un template base con la struttura comune del sito e di sovrascrivere solo le parti specifiche di ogni pagina, eliminando la duplicazione del codice HTML.

Il Pattern del Template Base

Il concetto e semplice: crei un template base con la struttura HTML comune e definisci dei blocchi che le pagine figlie possono sovrascrivere.

<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block titolo %}Il Mio Sito{% endblock %}</title>
    {% block extra_css %}{% endblock %}
</head>
<body>
    <header>
        <nav>
            <a href="{% url 'homepage' %}">Home</a>
            <a href="{% url 'chi_siamo' %}">Chi Siamo</a>
        </nav>
    </header>

    <main>
        {% block contenuto %}{% endblock %}
    </main>

    <footer>
        <p>&copy; 2026 Il Mio Sito</p>
    </footer>

    {% block extra_js %}{% endblock %}
</body>
</html>

Estendere il Template Base con {% extends %}

Le pagine figlie usano {% extends %} per ereditare dal template base e {% block %} per sovrascrivere i blocchi:

<!-- templates/homepage.html -->
{% extends "base.html" %}

{% block titolo %}Home - Il Mio Sito{% endblock %}

{% block contenuto %}
    <h1>Benvenuto nel nostro sito</h1>
    <p>Questa e la pagina principale.</p>
{% endblock %}

Il tag {% extends %} deve essere il primo tag nel template figlio. Tutto il contenuto deve essere all’interno di blocchi {% block %}, altrimenti verra ignorato.

Usare {{ block.super }}

Se vuoi aggiungere contenuto al blocco del genitore invece di sostituirlo completamente, usa {{ block.super }}:

<!-- templates/base.html -->
{% block sidebar %}
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/contatti/">Contatti</a></li>
    </ul>
{% endblock %}

<!-- templates/blog.html -->
{% extends "base.html" %}

{% block sidebar %}
    {{ block.super }}
    <ul>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/archivio/">Archivio</a></li>
    </ul>
{% endblock %}

Il risultato combinera entrambe le liste: prima i link del template base, poi quelli del template figlio.

Ereditarieta Multi-Livello

Django supporta catene di ereditarieta su piu livelli. Questo e utile per siti con sezioni diverse:

<!-- templates/base.html -->
<!DOCTYPE html>
<html>
<body>
    <header>{% block header %}Sito Web{% endblock %}</header>
    <main>{% block contenuto %}{% endblock %}</main>
</body>
</html>

<!-- templates/base_blog.html -->
{% extends "base.html" %}

{% block header %}Sezione Blog{% endblock %}

{% block contenuto %}
    <div class="sidebar">{% block sidebar %}{% endblock %}</div>
    <div class="articolo">{% block articolo %}{% endblock %}</div>
{% endblock %}

<!-- templates/blog/dettaglio.html -->
{% extends "base_blog.html" %}

{% block sidebar %}
    <h3>Categorie</h3>
    {% for cat in categorie %}
        <a href="{{ cat.get_absolute_url }}">{{ cat.nome }}</a>
    {% endfor %}
{% endblock %}

{% block articolo %}
    <h1>{{ articolo.titolo }}</h1>
    <p>{{ articolo.contenuto }}</p>
{% endblock %}

In questo schema a tre livelli, dettaglio.html eredita da base_blog.html, che a sua volta eredita da base.html.

Buone Pratiche

Alcune regole utili per organizzare l’ereditarieta dei template:

# Struttura consigliata delle cartelle
# templates/
#   base.html               -> template base principale
#   base_blog.html           -> template base per il blog
#   base_shop.html           -> template base per lo shop
#   blog/
#       lista.html           -> lista articoli
#       dettaglio.html       -> dettaglio articolo
#   shop/
#       catalogo.html        -> catalogo prodotti

Definisci piu blocchi nel template base per garantire flessibilita. I blocchi comuni sono: titolo, contenuto, sidebar, extra_css e extra_js.

Conclusione

L’ereditarieta dei template e fondamentale per mantenere il codice HTML organizzato e DRY (Don’t Repeat Yourself). Con il pattern base/figlio, {{ block.super }} e l’ereditarieta multi-livello, puoi costruire siti complessi con template modulari e facilmente manutenibili.