Les templates - templates/¶

date:	2012-05-01 19:12
tags:	django, python
category:	Django
author:	Rémy Hubscher

Un système hiérarchique¶

Vous faites du web, donc vous avez déjà du découper un design.

La première chose que l’on constate c’est que le graphisme reste quasiment le même d’une page à l’autre et il n’y a finalement que le bloc de contenu qui change et le menu sélectionné dans la barre de navigation.

Les templates de Django parte de ce postulat pour nous proposer un système extensible.

Pour mettre en place ses templates Django, nous allons donc créer le template de base, souvent appelé base.html.

Il va définir la structure de notre design puis nous allons l’étendre pour chaque page différente.

Les blocs¶

Les parties que nous souhaitons pouvoir surcharger sont appelé des blocks.

Voici un template de base :

{# Minimum HTML5 template #}
<!DOCTYPE html>
<html lang="fr">
  <head>
    {% block head %}
      <title>{{ PAGE_TITLE }} - {{ WEBSITE_TITLE }}</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
      <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
      {% block head-medias %}{% endblock %}
    {% endblock %}
  </head>

  <body>
    {% block body %}

      <!-- Header -->
        <header>
          {% block header %}
                      <h1>Tuto Django</h1>
                      {% endblock %}
        </header>
      <!-- End of Header -->

      <!-- Navigation -->
      <nav>
        {% block navigation %}
                    <ul>
                      <li><a href="#">Accueil</a></li>
                      <li><a href="#">Mon portfolio</a></li>
                      <li><a href="#">Contact</a></li>
                    </ul>
        {% endblock %}
      </nav>
      <!-- End of Navigation -->

      <!-- Content -->
      <section id="main-content">
        {% block content %}{% endblock %}
      </section>
      <!-- End of Content -->

      <!-- Footer -->
      <footer>
        {% block footer %}
          <p>&copy 2012 - Rémy HUBSCHER</p>
        {% endblock %}
      </footer>
      <!-- End of Footer -->
    {% endblock %}

    {% block extra-medias %}{% endblock %}
  </body>
</html>

Bon effectivement il ne fait pas grand chose mais on a définit un certain nombre de block.

L’héritage¶

Pour étender du template de base et surcharger le contenu, on peut faire :

{% extends "base.html" %}

{% block content %}
    <h1>Bienvenue sur mon site internet</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing
  elit. Phasellus risus dolor, porttitor in laoreet non, posuere at
  mi. Nullam ultricies congue nunc, et accumsan ipsum pharetra
  non. Quisque vitae metus orci. Sed consequat condimentum ligula eu
  volutpat. Nulla facilisi. Suspendisse ac viverra elit. Mauris eget
  felis nec nisi cursus aliquet. Nulla facilisi.
</p>
<p>
  Vivamus quis nunc nibh. Mauris diam tellus, tincidunt quis adipiscing
  eleifend, auctor vel tortor. Vivamus fermentum ipsum quis ligula
  ornare et dictum mi suscipit. Praesent malesuada scelerisque sapien
  quis congue. Aenean leo turpis, consequat at pulvinar eu, dignissim id
  sapien. Nullam sit amet neque tortor, et interdum ipsum. Pellentesque
  porttitor sollicitudin diam quis lacinia. Vestibulum pharetra dictum
  arcu, nec cursus diam pretium ut. Nullam ultrices congue elit ac
  vulputate. Curabitur iaculis massa commodo elit viverra ornare. Nullam
  bibendum augue a nisi lobortis ornare. Donec lobortis, magna ut
  elementum eleifend, dolor justo aliquet quam, vitae ornare ipsum augue
  sed massa.
</p>
{% endblock %}

Le tag extends doit être seul sur la première ligne du fichier de template.

Le context¶

Dans notre vue, on va passer un context de rendu au template.

Ce sont des variables qui seront disponible dans notre template

En passant ce context :

{'PAGE_TITLE': 'Accueil',
 'WEBSITE_TITLE': 'Tuto Django'}

Les variables seront remplacé dans mon template.

Pour afficher une variable on utilise :

{{ PAGE_TITLE }}

Avec PAGE_TITLE le nom de la variable que l’on souhaite afficher.

On a aussi accès au champ des objets avec . :

{{ me.age }}

Pour afficher l’âge de la person me, il faudra passer l’objet Person en question au context:

from django.shortcuts import render_to_response, get_object_or_404
from person.models import Person

def profile(request, person_id):
    me = get_object_or_404(Person, pk=person_id)
    return render_to_response('person/profile.html', {'me': me})

get_object_or_404 permet de sécuriser l’accès à ma view en récupèrant l’objet ou en disant qu’il n’existe pas (erreur 404).

render_to_response permet de donner le nom du template et le context associé puis de retourner directement la réponse au format html.

Les tags et les filters¶

Puisqu’on vient de parler du tag extends il y a les tags et les filters qui permette de jouer sur le rendu de la page.

Tout est là : https://docs.djangoproject.com/en/dev/ref/templates/builtins/

Rien de bien compliqué :

Les tags¶

En deux parties :

{% autoescape on %}
  {{ body }}
{% endautoescape %}

Il y a le nom de la commande entre {% commande %} et pour fermer {% endcommande %}

En une partie :

{% csrf_token %}

Il n’y a pas de commande fermante.

Les filters¶

Il se collent à une variable et on peut les chaîner pour modifier l’affichage de cette dernière :

{{ me.dob|date:'l d F Y- H:i' }}

{{ me.name|wordcount }}

Conclusion¶

C’est assez complet, je vous invite à lire la doc, mais rien de bien compliqué en soit si on a compris ces quelques points.

Bonus : django-sekizai¶

Si vous avez à gérer des templates compliqués avec de la gestion d’inclusion multiples de fichiers css et js, alors il faut jeter un œil à django-sekizai