Bien démarrer avec les gabarits Django

7 minutes

Les gabarits sont des fichiers texte qui peuvent être utilisés pour générer des formats textuels comme HTML ou XML. Chaque gabarit contient des données statiques qui sont partagées sur le site, mais il peut également contenir des espaces réservés pour les données dynamiques. Les gabarits contiennent des variables et des balises qui contrôlent le comportement et le contenu de la dernière page.

Voyons comment les gabarits fonctionnent dans Django.

Variables

Dans un gabarit, les variables se comportent comme dans tout autre langage de programmation. Nous pouvons les utiliser pour indiquer une valeur qui est évaluée au moment de l’exécution.

Django fournit un moyen d’afficher les variables d’un gabarit à l’aide de la syntaxe {{ }}. Toute variable comprise entre accolades doubles est évaluée pour le texte qu’elle contient, puis elle est placée dans le gabarit. Si nous voulions afficher le nom du chien, par exemple, nous pourrions utiliser {{dog.name}}.

La vue passe des variables dans un gabarit à l’aide de la fonction render, que nous verrons dans un module ultérieur. Vous pouvez passer des valeurs et d’autres données à un gabarit, y compris un QuerySet, à partir de l’ORM Django. Cela vous permet d’afficher les données de la base de données de votre application.

Filtres

Les filtres sont un excellent moyen de contrôler la façon dont les données s’affichent lorsqu’elles sont demandées dans un gabarit. Étant donné que les filtres sont déjà créés, ils offrent un moyen simple de mettre en forme des données sans avoir à écrire de code spécial.

Supposons par exemple que nous devions afficher les noms de race des chiens, avec la première lettre en majuscules.

{{ dog.name | capfirst }}

La variable se trouve à gauche du symbole de barre verticale (|), et le filtre à droite de celui-ci. Il s’agit simplement d’un des nombreux filtres que vous pouvez utiliser pour manipuler les données lorsque vous utilisez des filtres de gabarit Django.

Étiquettes

Vous pouvez utiliser des balises afin d’exécuter des boucles, créer du texte ou fournir d’autres types de commandes pour le moteur de gabarit. Les balises ressemblent souvent à la syntaxe Python. Toutefois, étant donné qu’elles s’exécutent à l’intérieur du gabarit (plutôt que dans l’interpréteur Python), vous remarquerez de légères différences de syntaxe. Comme il n’est pas possible d’utiliser des tabulations comme avec Python, chaque instruction de bloc nécessite une end correspondante.

Nous pouvons utiliser des instructions if pour la logique booléenne et des boucles for pour l’itération. La syntaxe principale des instructions if se présente ainsi :

{% if dogs %}
    <h2>There are {{ dogs | length }} ready for adoption!</h2>
{% else %}
    <h2>We have no dogs ready for adoption. Please check back later!</h2>
{% endif %}

Notes

L’instruction elif est utilisée de la même façon que elif dans Python.

De même, nous pouvons utiliser une boucle for pour afficher le nom de tous les chiens sous la forme d’une liste :

<ul>
    {% for dog in dogs %}
        <li>{{ dog.name }}</li>
    {% endfor %}
<ul>

Héritage de gabarit

Les gabarits sont utilisés pour générer le code HTML que l’utilisateur doit voir lors de l’utilisation de votre application. Les pages d’une application partagent généralement une structure commune, avec le menu de navigation à gauche, un titre en haut et une feuille de style cohérente, par exemple. Les gabarits Django prennent en charge les structures partagées par héritage.

Créer une page parente

La création d’une page parente est identique à la création d’un gabarit HTML Django. Vous fournissez la structure externe, puis vous ajoutez des espaces réservés {% block %}. Les pages enfants peuvent placer du contenu dans ces espaces réservés.

Nous allons créer une page parente pour importer une feuille de style, fournir un titre par défaut et fournir l’en-tête qui doit s’afficher sur toutes les pages :

<html>
<head>
    <link rel="stylesheet" href="site.css">
    <title>{% block title %}Shelter site{% endblock %}</title>
</head>
<body>
    <h1>Shelter site</h1>
    {% block content %}
    {% endblock %}
</body>
</html>

Créer une page enfant

Nous pouvons créer une page enfant à partir de la page parente à l’aide du mot clé extends. Avec ce mot clé, nous fournissons le nom du fichier HTML du gabarit parent. Nous utilisons ensuite les instructions {% block %} appropriées pour ajouter le contenu propre à cette page.

{% extends "parent.html" %}

{% block title %}
Welcome to the Shelter site!
{% endblock %}

{% block content %}
Thank you for visiting our site!
{% endblock %}

Lorsque la page s’affiche, elle ressemble à ceci :

<html>
<head>
    <link rel="stylesheet" href="site.css">
    <title>Welcome to the shelter site</title>
</head>
<body>
    <h1>Shelter site</h1>
    Thank you for visiting our site!
</body>
</html>

Notez que les espaces réservés sont remplacés par le contenu de la page enfant.