Node.js - 6.8 Finaliser la mise en page Pug et le lien actif

Les pages de l'application partagent la même mise en page : en-tête, navigation et styles. Cette leçon finalise cette structure commune. Elle met en évidence le lien de la page courante, et ajoute un titre propre à chaque page.

Mettre en évidence la page active

La route transmet à la vue le chemin de la page affichée. La mise en page compare ce chemin à celui de chaque lien. Si les deux correspondent, la classe active est ajoutée au lien, sinon la classe reste vide.

Avec ce réglage, le lien de la page d'ajout de produit est mis en surbrillance quand on s'y trouve. Le même principe s'applique au lien de la boutique.

li
  a(href='/' class=(path === '/' ? 'active' : '')) Boutique

Définir un titre dynamique

Le titre de chaque page est une valeur transmise à la vue, sous le nom pageTitle. Le modèle l'affiche dans la balise title grâce à la syntaxe #{pageTitle}.

Chaque route qui affiche une page doit donc fournir ce champ. C'est le cas de la boutique, de l'ajout de produit et de la page 404, qui reçoit le titre Page introuvable.

res.render('404', { pageTitle: 'Page introuvable' });

Partager la mise en page

La mise en page commune évite de répéter l'en-tête et la navigation dans chaque page. L'auteur copie le code de l'ajout de produit dans un fichier de base, puis retire ce qui est propre à chaque page.

Le contenu propre à chaque page reste dans son propre fichier. Ainsi, une modification de la navigation se fait en un seul endroit.

En résumé

Le lien de la page courante est mis en évidence grâce au chemin transmis à la vue. Chaque page reçoit son propre titre par la route. La mise en page commune évite de dupliquer l'en-tête et la navigation.

Points clés

• La route transmet le chemin courant à la vue.
• La classe active est ajoutée au lien de la page affichée.
• Le titre de chaque page vient de la clé pageTitle.
• Chaque route qui affiche une page doit fournir le titre.
• Une mise en page commune évite de répéter le même code.

Questions fréquentes

Pourquoi le lien de la page courante ne se met-il pas en surbrillance ?

La valeur de chemin transmise à la vue doit être identique à celle utilisée dans la comparaison. Une différence, comme une barre oblique manquante, suffit à empêcher la mise en évidence.

Pourquoi la page affiche-t-elle un mauvais titre ?

Le titre est peut-être écrit en dur dans le modèle. Il doit venir de la clé pageTitle transmise par la route.

Faut-il passer le titre à chaque route ?

Oui. Chaque rendu doit fournir la clé pageTitle, sinon le titre de la page ne s'affiche pas correctement.