Estendere il template

Un'altra cosa bella di Django è l'estensione dei template. Cosa significa? Significa che puoi usare le stesse parti del tuo HTML per pagine diverse del sito.

Così non hai bisogno di ripetere le stesse informazioni o il layout in ogni file. E se vuoi cambiare qualcosa, non devi cambiarlo in ogni templates, ma soltanto una volta!

Crea un template di base

Un template base è il template più semplice. Lo puoi estendere su ogni pagina del tuo sito.

Creiamo un file base.html in blog/templates/blog/:

djangogirls
├─── blog
│    └─── templates
│         └─── blog
|              ├─── base.html
|              └─── post_list.html
└── mysite

Poi aprilo e copia tutto da post_list.html e incollalo sul file base.html, così:

blog/templates/blog/base.html

{% load staticfiles %}
<html>
    <head>
        <title>Django Girls blog</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
    </head>
    <body>
        <div class="page-header">
            <h1><a href="/">Django Girls Blog</a></h1>
        </div>

        <div class="content container">
            <div class="row">
                <div class="col-md-8">
                {% for post in posts %}
                    <div class="post">
                        <div class="date">
                            {{ post.published_date }}
                        </div>
                        <h1><a href="">{{ post.title }}</a></h1>
                        <p>{{ post.text|linebreaksbr }}</p>
                    </div>
                {% endfor %}
                </div>
            </div>
        </div>
    </body>
</html>

Poi nel base.html, rimpiazza tutto il tuo <body> (tutto quello che si trova tra <body> e </body>) con questo:

blog/templates/blog/base.html

<body>
    <div class="page-header">
        <h1><a href="/">Django Girls Blog</a></h1>
    </div>
    <div class="content container">
        <div class="row">
            <div class="col-md-8">
            {% block content %}
            {% endblock %}
            </div>
        </div>
    </div>
</body>

Abbiamo praticamente rimpiazzato tutto quello da {% for post in posts %} a {% endfor %} con:

blog/templates/blog/base.html

{% block content %}
{% endblock %}

Ma... Perchè? Hai appena creato un blocco! Hai usato il template tag {% block %} per creare una zona che avrà dell'HTML al suo interno. Quell'HTML arriverà da un altro template che estende questo template (base.html). Vedremo come fare tra un momento.

Ora salva blog/templates/blog/base.html e apri il tuo blog/templates/blog/post_list.html di nuovo. Cancella tutto quello che sta prima di {% for post in posts %} e dopo {% endfor %}.

Quando hai finito il tuo file dovrebbe essere così:

blog/templates/blog/post_list.html

{% for post in posts %}
    <div class="post">
        <div class="date">
            {{ post.published_date }}
        </div>
        <h1><a href="">{{ post.title }}</a></h1>
        <p>{{ post.text|linebreaksbr }}</p>
    </div>
{% endfor %}

Vogliamo usare questo template come contenuto del nostro {% block content %} creato prima. Quindi dobbiamo aggiungere il template tag block a questo file.

Dobbiamo fare in modo che il template tag block in questo file combaci con quello in base.html. Dobbiamo anche far in modo che tutto il codice sia all'interno del nostro template tag block. Per farlo, metti tutto tra {% block content %} and {% endblock %}. Così:

blog/templates/blog/post_list.html

{% block content %}
    {% for post in posts %}
        <div class="post">
            <div class="date">
                {{ post.published_date }}
            </div>
            <h1><a href="">{{ post.title }}</a></h1>
            <p>{{ post.text|linebreaksbr }}</p>
        </div>
    {% endfor %}
{% endblock %}

Rimane solo una cosa da fare. Dobbiamo collegare questi due template tra loro. Questo è esattamente ciò che significa estendere i template! Lo faremo usando un nuovo template tag chiamato extend e lo metteremo all'inizio del file.

Così:

blog/templates/blog/post_list.html

{% extends 'blog/base.html' %}

{% block content %}
    {% for post in posts %}
        <div class="post">
            <div class="date">
                {{ post.published_date }}
            </div>
            <h1><a href="">{{ post.title }}</a></h1>
            <p>{{ post.text|linebreaksbr }}</p>
        </div>
    {% endfor %}
{% endblock %}

È tutto! Controlla se il tuo sito sta ancora funzionando correttamente :)

Se hai un errore TemplateDoesNotExists che dice che non c'è un file blog/base.html e hai runserver in esecuzione nella console, prova a fermarlo (premendo Ctrl+C - I tasti Control e C insieme) e riavvialo mettendo in esecuzione il comando python manage.py runserver.

results matching ""

    No results matching ""