Aller au contenu

Combiner les mises en page pour obtenir le meilleur des deux mondes

Maintenant que vous avez ajouté une mise en page à chaque article de blog, il est temps de faire en sorte que vos articles ressemblent au reste des pages de votre site web !

Préparez-vous à…

  • Imbriquer votre mise en page d’article de blog dans votre mise en page principale

Imbriquer vos deux mises en page

Titre de la section Imbriquer 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 des modèles supplémentaires pour les propriétés courantes des articles de blog, telles que title et date, mais vos articles de blog ne ressemblent pas aux autres pages de votre site. Vous pouvez assortir l’apparence de vos articles de blog au reste de votre site en imbriquant des mises en page.

  1. 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 propriété pageTitle :

    src/layouts/MarkdownPostLayout.astro
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <meta charset="utf-8" />
      <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>

  2. Dans src/layouts/MarkdownPostLayout.astro, vous pouvez maintenant supprimer la balise meta car elle est déjà incluse dans votre BaseLayout :

    src/layouts/MarkdownPostLayout.astro
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <meta charset="utf-8" />
      <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>

  3. 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, vos liens de navigation et votre pied de page social.
    • Votre mise en page d’article 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 d’article de blog, comprenant uniquement le texte écrit dans cet article.

  4. 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 :

    src/layouts/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>

  5. 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 article de blog affiche le même modèle de page, et aucun contenu ne manque. (Si un contenu est absent dans l’un de vos articles de blog, vérifiez ses propriétés de frontmatter.)

  • Aucun contenu n’est dupliqué sur une page. (Si quelque chose est affiché deux fois, assurez-vous de le supprimer de MarkdownPostLayout.astro.)

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

Tester vos connaissances

Titre de la section Tester vos connaissances

  1. Cela vous permet d’imbriquer une mise en page à l’intérieur d’une autre et de profiter de travailler avec des éléments modulaires.

  2. Les mises en page multiples sont particulièrement utiles pour les projets contenant des pages Markdown, comme un…

  3. Lequel de ces éléments fournit un modèle pour l’ensemble de vos pages ?

Liste de contrôle

Titre de la section Liste de contrôle

Ressources

Titre de la section Ressources
Contribuer Communauté Parrainer