Aller au contenu

Combinez des mises en page pour tirer le meilleur parti des deux mondes

Maintenant que vous avez ajouté une mise en page à chaque billet de blog, faisons en sorte que vos billets ressemblent au reste des pages de votre site web !

Préparez-vous à…

Imbriquez votre mise en page de billet de blog dans votre mise en page principale

Imbriquez vos deux mises en page

Vous avez déjà une mise en page BaseLayout.astro pour définir la mise en page générale de vos pages.

MarkdownPostLayout.astro vous offre quelques modèles supplémentaires pour les propriétés courantes des billets de blog, telles que title et date, mais vos billets de blog ne ressemblent pas aux autres pages de votre site. Vous pouvez assortir l’apparence de vos billets de blog au reste de votre site en imbriquant des mises en page.

Dans src/layouts/MarkdownPostLayout.astro, importez BaseLayout.astro et utilisez-le pour envelopper l’ensemble du contenu du modèle. N’oubliez pas de passer la prop pageTitle :

---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
  <h1>{frontmatter.title}</h1>
  <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
  <p><em>{frontmatter.description}</em></p>
  <p>Écrit par : {frontmatter.author}</p>
  <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
  <slot />
</BaseLayout>

Vérifiez l’aperçu dans votre navigateur à l’adresse http://localhost:4321/posts/post-1. Vous devriez maintenant voir le contenu rendu par :
- Votre mise en page principale, y compris vos styles, liens de navigation et pied de page social.
- Votre mise en page de billet de blog, y compris les propriétés du frontmatter telles que la description, la date, le titre et l’image.
- Votre contenu Markdown individuel de billet de blog, y compris uniquement le texte écrit dans ce billet.

Remarquez que votre titre de page est maintenant affiché deux fois, une fois par chaque mise en page.

Supprimez la ligne qui affiche votre titre de page dans MarkdownPostLayout.astro :

<BaseLayout pageTitle={frontmatter.title}>
  <h1>{frontmatter.title}</h1>
  <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
  <p><em>{frontmatter.description}</em></p>
  <p>Écrit par : {frontmatter.author}</p>
  <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
  <slot />
</BaseLayout>

Vérifiez à nouveau l’aperçu dans votre navigateur à http://localhost:4321/posts/post-1 et assurez-vous que cette ligne n’est plus affichée et que votre titre n’est affiché qu’une seule fois. Apportez les ajustements nécessaires pour vous assurer de ne pas avoir de contenu en double.

Assurez-vous que :

Chaque billet de blog affiche le même modèle de page, et aucun contenu ne manque. (Si l’un de vos billets de blog manque de contenu, vérifiez ses propriétés du frontmatter.)
Aucun contenu n’est dupliqué sur une page. (Si quelque chose est rendu deux fois, assurez-vous de le supprimer de MarkdownPostLayout.astro.)

Si vous souhaitez personnaliser votre modèle de page, vous pouvez.

Testez vos connaissances

Cela vous permet d’imbriquer une mise en page à l’intérieur d’une autre et de tirer parti du travail avec des éléments modulaires.
1. déploiement continu
2. conception réactive
3. conception basée sur des composants
Les mises en page multiples sont particulièrement utiles pour les projets contenant des pages Markdown, comme un…
1. blog
2. tableau de bord
3. application de chat
Lequel de ces éléments fournit un modèle pour l’ensemble de vos pages ?
1. index.astro
2. BaseLayout.astro
3. post-1.md