Aller au contenu

Créez votre première mise en page

Préparez-vous à…

  • Refactorisez les éléments communs dans une mise en page de page
  • Utilisez un élément Astro <slot /> pour placer le contenu de la page dans une mise en page
  • Transmettez des valeurs spécifiques à la page en tant que props à sa mise en page

Vous avez toujours certains composants Astro qui sont rendus de manière répétée sur chaque page. Refactorisons à nouveau pour créer une mise en page de page partagée !

Créez votre première mise en page

Titre de la section Créez votre première mise en page

  1. Créez un nouveau fichier à l’emplacement src/layouts/BaseLayout.astro. (Vous devrez d’abord créer un nouveau dossier layouts.)

  2. Copiez l’intégralité du contenu de index.astro dans votre nouveau fichier, BaseLayout.astro.

    src/layouts/BaseLayout.astro
    ---
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Page d'accueil";
    ---
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
      </head>
      <body>
        <Header />
        <h1>{pageTitle}</h1>
        <Footer />
        <script>
          import "../scripts/menu.js";
        </script>
      </body>
    </html>

Utilisez votre mise en page sur une page

Titre de la section Utilisez votre mise en page sur une page

  1. Remplacez le code à src/pages/index.astro par ce qui suit :

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    const pageTitle = "Page d'accueil";
    ---
    <BaseLayout>
      <h2>Mon sous-titre de blog génial</h2>
    </BaseLayout>

  2. Vérifiez à nouveau l’aperçu du navigateur pour remarquer ce qui a (ou, spoiler : n’a pas !) changé.

  3. Ajoutez un élément <slot /> à src/layouts/BaseLayout.astro juste au-dessus du composant de pied de page, puis vérifiez l’aperçu du navigateur de votre page d’accueil et remarquez ce qui a vraiment changé cette fois-ci !

    src/layouts/BaseLayout.astro
    ---
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Page d'accueil";
    ---
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
      </head>
      <body>
        <Header />
        <h1>{pageTitle}</h1>
        <slot />
        <Footer />
        <script>
          import "../scripts/menu.js";
        </script>
      </body>
    </html>

Le <slot /> vous permet d’injecter (ou “insérer”) du contenu enfant écrit entre les balises d’ouverture et de fermeture <Component></Component> dans n’importe quel fichier Component.astro.

Transmettez des valeurs spécifiques à la page en tant que props

Titre de la section Transmettez des valeurs spécifiques à la page en tant que props

  1. Passez le titre de la page à votre composant de mise en page depuis index.astro en utilisant un attribut de composant :

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    const pageTitle = "Page d'accueil";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <h2>Mon sous-titre de blog génial</h2>
    </BaseLayout>

  2. Modifiez le script de votre composant de mise en page BaseLayout.astro pour recevoir un titre de page via Astro.props au lieu de le définir comme une constante.

    src/layouts/BaseLayout.astro
    ---
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Page d'accueil";
    const { pageTitle } = Astro.props;
    ---

  3. Vérifiez l’aperçu de votre navigateur pour vérifier que le titre de votre page n’a pas changé. Il a la même valeur, mais il est désormais rendu dynamiquement. Et maintenant, chaque page individuelle peut spécifier son propre titre à la mise en page.

Essayez par vous-même - Utilisez votre mise en page partout

Titre de la section Essayez par vous-même - Utilisez votre mise en page partout

Refactorisez vos autres pages (blog.astro and about.astro) pour qu’elles utilisent votre nouveau composant <BaseLayout> pour afficher les éléments de page communs.

N’oubliez pas de :

  • Transmettre un titre de page en tant que props via un attribut de composant.

  • Laissez la mise en page être responsable du rendu HTML de tous les éléments communs.

  • Supprimez tout de chaque page que cette page n’est plus responsable de rendre, car cela est géré par la mise en page, y compris :

    • Éléments HTML
    • Composants et leurs imports
    • Règles CSS dans une balise <style> (par exemple, <h1> dans votre page À propos)
    • Balises <script>

Testez vos connaissances

Titre de la section Testez vos connaissances

  1. Un composant Astro (fichier .astro) peut fonctionner comme :

  2. Pour afficher un titre de page sur la page, vous pouvez :

  3. Les informations peuvent être transmises d’un composant à un autre en :

Liste de contrôle

Titre de la section Liste de contrôle

Ressources

Titre de la section Ressources