Node.js - 6.11 Ajouter une disposition Handlebars

Une disposition, ou layout, contient les éléments communs à toutes les pages, comme l'en-tête et la navigation. Dans Handlebars, elle s'écrit dans un fichier main, avec un emplacement réservé au contenu de chaque page. Cette leçon explique comment la configurer, puis comment gérer le lien actif de la navigation.

Configurer le moteur et la disposition

Le dossier des vues par défaut est views, avec un sous-dossier layouts. La disposition utilisée par défaut est main, donc il faut un fichier main dans ce dossier.

L'extension des fichiers doit aussi être précisée dans la configuration du moteur, y compris pour la disposition. Sans cette précision, Express ne trouve pas les fichiers .hbs.

Définir l'emplacement du contenu

Pug utilisait un bloc. Handlebars utilise un espace réservé, écrit avec trois accolades, qui reçoit le contenu de la vue. Chaque page remplit automatiquement cet emplacement.

<body>
  {{{body}}}
</body>

Gérer la classe active et les styles

Pour la classe active, la disposition utilise une condition if qui vérifie une variable transmise par la route, par exemple shopActive. Si la variable est vraie, la classe active est ajoutée. Une variable non transmise est traitée comme fausse, donc elle ne doit être transmise que lorsqu'elle est nécessaire.

Pour les feuilles de style, la solution simple consiste à tester une variable transmise par la route, qui indique quel fichier CSS charger, comme celui des formulaires ou des produits.

Pour une page qui ne doit pas utiliser la disposition, on passe à la fonction de rendu une option spéciale nommée layout, avec la valeur false.

En résumé

La disposition contient les éléments communs, et chaque page remplit son contenu à l'emplacement réservé. Les variables transmises par les routes activent la classe active et les styles. L'option layout à false permet de retirer la disposition sur une page donnée.

Points clés

• La disposition par défaut se nomme main dans le dossier layouts.
• L'emplacement du contenu s'écrit avec trois accolades.
• L'extension des fichiers doit être précisée dans la configuration.
• Une variable non transmise est traitée comme fausse.
• L'option layout à false retire la disposition sur une page.

Questions fréquentes

Où placer la disposition ?

Dans le dossier layouts, sous le nom main, avec l'extension .hbs.

Que vaut une variable qui n'est pas transmise ?

Elle est traitée comme fausse dans la condition, donc la classe ou le style n'est pas ajouté.

Comment retirer la disposition sur une page ?

En passant l'option layout à false dans l'appel de rendu de cette page.