Dans cet article, nous allons apprendre à utiliser les templates, ce qui va nous aider dans la réalisation de notre projet de forum. Nous allons réaliser plus précisément le template qui servira à afficher la navbar et le footer de notre forum.
- création du template
Dans notre application Base, nous allons créer un répertoire templates dans lequel on va créer un autre répertoire Base. Dans ce dernier répertoire, nous allons stocker nos templates en l’occurrence pour cette fois, ça sera la template base.html.
Voici ce que ça doit donner :
Sachant que nous allons utiliser ce template dans une autre application nous devons faire en sorte qu’elle soit accessible de ce fait on l’ajoute dans le fichier settings.py qui est dans le répertoire de notre projet. Pour cela on ajoute la ligne os.path.join(BASE_DIR, ‘Blog/templates’), comme ci-dessous.
Dans le template Base j’ai ajouter une navbar et un footer. J’ai ensuite ajouté les balises {% block title %}{% endblock %} et {% block content %}{% endblock %}. Le premier permet de modifier le titre de la page et le second d’ajouter le contenu de la page.
Maintenant que nous avons créé la template qui va nous servir de base pour chacune de nos pages et qu’elle est accessible, il ne nous reste plus qu’à l’utiliser.
Pour ce faire, nous allons créer un autre template cette fois ci dans l’application Home afin d’avoir une page d’accueil propre pour le forum. De ce fait, dans le répertoire Home on crée un répertoire template dans lequel on crée un autre répertoire Home qui va contenir le template.
Voici ensuite ce que contient le template :
A l’aide de la balise extends on indique qu’on utilise comme base pour la page le template base.html que nous avons créé précédemment. Le block title permet de changer le titre de la page dans le header et enfin le block content permet d’ajouter le contenu de la page.
Maintenant que les templates sont prêtes il ne reste plus qu’à modifier notre vue pour que tout fonctionne. Pour cela nous allons dans le fichier views.py de l’application Home afin de modifier la vue index. Elle doit ressembler à ceci :
Dans cette vue nous renvoyons directement le template index.html qui est lié au template base.html ce qui nous permet d’afficher la page comme nous le souhaitons.
Et voici le résultat final sur le navigateur :
