Héritage de template

Django vous réserve encore bien des surprises : une assez géniale est l'héritage de template. Qu'est ce que ça signifie ? C'est une fonctionnalité qui vous permet de réutiliser certains morceaux de HTML dans différentes pages de votre site web.

Les modèles permettent d'utiliser les mêmes informations ou mises en page en plusieurs endroits. Vous n'avez pas à vous répéter dans chaque fichier. Et si vous voulez changer quelque chose, vous n'avez pas à le faire dans chaque modèle, mais juste un!

Créer un template de base

Un template de base est le template le plus simple que vous pouvez faire hériter à chaque page de votre site web.

Créons le fichier base.html dans le dossier blog/templates/blog/ :

blog
└───templates
    └───blog
            base.html
            post_list.html

Ensuite, ouvrez ce fichier dans l'éditeur de code et collez-y tout ce qui se trouve dans le fichier post_list.html. Ça devrait ressembler à ça :


<div data-gb-custom-block data-tag="load"></div>

<!DOCTYPE html>
<html>
    <head>
        <title>Django Girls blog</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="

<div data-gb-custom-block data-tag="static" data-0='css/blog.css'></div>">
    </head>
    <body>
        <header class="page-header">
          <div class="container">
              <h1><a href="/">Django Girls Blog</a></h1>
          </div>
        </header>

        <main class="container">
            <div class="row">
                <div class="col">
                <div data-gb-custom-block data-tag="for">

                    <article class="post">
                        <time class="date">
                            {{ post.published_date }}
                        </time>
                        <h2><a href="">{{ post.title }}</a></h2>
                        <p>{{ post.text|linebreaksbr }}</p>
                    </article>
                

</div>

                </div>
            </div>
        </main>
    </body>
</html>

Puis, dans le fichier base.html, remplacez tout ce qui se trouve dans <body> (de <body> à </body>) par ceci :

<body>
    <header class="page-header">
      <div class="container">
          <h1><a href="/">Django Girls Blog</a></h1>
      </div>
    </header>
    <main class="container">
        <div class="row">
            <div class="col">
            

<div data-gb-custom-block data-tag="block">

            

</div>
            </div>
        </div>
    </main>
</body>

Vous pouvez remarquer qu'on vient de remplacer tout ce qui était entre {% for post in posts %} et {% endfor %} avec :


<div data-gb-custom-block data-tag="block">

</div>

Mais pourquoi? Vous venez de créer un block ! Vous avez utilisé la balise de modèle `

` pour créer une partie qui va contenir du HTML. Ce HTML viendra d'un autre modèle qui étendra ce modèle-ci (`base.html`). Nous vous expliquerons comment faire cela dans un instant.

Enregistrez base.html et ouvrez votre blog/templates/blog/post_list.html à nouveau dans l'éditeur de code. Vous allez tout supprimer au-dessus de {% for post in posts %} et en dessous de {% endfor %}. Lorsque vous avez terminé, le fichier ressemblera à ceci :


<div data-gb-custom-block data-tag="for">

    <article class="post">
        <time class="date">
            {{ post.published_date }}
        </time>
        <h2><a href="">{{ post.title }}</a></h2>
        <p>{{ post.text|linebreaksbr }}</p>
    </article>

</div>

Nous voulons utiliser ceci dans le cadre de notre modèle pour tous les blocs 'content'. Il est temps d'ajouter ajouter des balises block à ce fichier !

Vous voulez que votre balise block corresponde à la balise dans votre fichier base.html . Vous voulez aussi qu'il inclue tout le code qui appartient à vos blocs de contenu. Pour faire cela, entourez tout le code de {% block content %} et {% endblock %}. Comme ceci :


<div data-gb-custom-block data-tag="block">

    

<div data-gb-custom-block data-tag="for">

        <article class="post">
            <time class="date">
                {{ post.published_date }}
            </time>
            <h2><a href="">{{ post.title }}</a></h2>
            <p>{{ post.text|linebreaksbr }}</p>
        </article>
    

</div>

</div>

Seule une chose reste à faire. Nous devons connecter ces deux modèles ensemble. C'est ça, étendre des modèles ! Nous allons le faire en ajoutant une balise 'extends' au début du fichier. Comme cela :


<div data-gb-custom-block data-tag="extends" data-0='blog/base.html'></div>

<div data-gb-custom-block data-tag="block">

    

<div data-gb-custom-block data-tag="for">

        <article class="post">
            <time class="date">
                {{ post.published_date }}
            </time>
            <h2><a href="">{{ post.title }}</a></h2>
            <p>{{ post.text|linebreaksbr }}</p>
        </article>
    

</div>

</div>

Et voilà ! Enregistrez le fichier et vérifiez que votre site fonctionne toujours correctement. :)

Si vous obtenez l'erreur TemplateDoesNotExist, cela signifie qu'il n'y a pas de fichier blog/base.html et que vous avez runserver en cours d'exécution dans la console. Arrêtez-le (en appuyant simultanément sur Ctrl+C, les touches Control et C de votre clavier) et relancez-le en tapant la commande python manage.py runserver.

PreviousCSS – donnez du style NextFinaliser votre application

Last updated 1 year ago