Node.js - 6.7 Créer une mise en page commune avec Pug

Chaque page répète la même configuration : le squelette HTML, la navigation et les imports CSS. Pug permet de regrouper ce squelette dans un fichier de mise en page, que les autres pages étendent. Cette leçon montre comment créer ce layout et remplir ses blocs.

Créer le fichier de mise en page

Créez un dossier layouts dans le dossier des vues. Ce fichier contient le squelette commun, avec la structure HTML et la navigation. Il définit aussi des blocs vides : ce sont des emplacements que chaque page peut remplir avec son propre contenu.

html
  head
    block styles
  body
    block content

Étendre le layout dans une page

Dans une page, la ligne extends indique le fichier de mise en page à utiliser. Les blocs définis dans la page remplacent ceux du layout. Le bloc styles reçoit les imports CSS propres à la page, et le bloc content reçoit le contenu de la page.

Le lien actif reste à traiter

Le layout ne sait pas quelle page est affichée, donc il ne peut pas marquer le lien actif tout seul. Ce point demande de transmettre une information dynamique à la mise en page, ce que la suite du module aborde.

En résumé

Un layout Pug regroupe le squelette commun des pages. Chaque page l'étend avec extends, puis remplit les blocs styles et content. Une modification du layout se répercute sur toutes les pages qui l'utilisent.

Points clés

• Un layout évite de répéter la même configuration HTML dans chaque page.
• block définit un emplacement que les pages peuvent remplir.
• extends indique quel layout utiliser.
• Une modification dans le layout s'applique à toutes les pages qui l'étendent.
• Le lien actif ne peut pas être déterminé par le layout seul.

Questions fréquentes

Un layout peut-il servir à plusieurs pages ?

Oui, c'est tout l'intérêt. Chaque page l'étend et fournit son propre contenu.

Que mettre dans le bloc styles ?

Les imports CSS propres à la page. Ils ne font pas partie du layout par défaut.

Pourquoi un dossier layouts séparé ?

Il regroupe les mises en page et permet d'en ajouter d'autres si l'application en a besoin.