Créer votre première mise en page

Préparez-vous à…

Refactoriser les éléments communs dans une mise en page
Utiliser un élément <slot /> d’Astro pour placer le contenu de la page dans une mise en page
Transmettre 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. Il est temps de restructurer à nouveau pour créer une mise en page partagée !

Créer votre première mise en page

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

Copiez l’intégralité du contenu de index.astro dans votre nouveau fichier, 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="fr">
  <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>

Utiliser votre mise en page dans une page

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

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

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

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 !

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Page d'accueil";
---
<html lang="fr">
  <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.

Transmettre les valeurs spécifiques de la page en tant que props

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

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

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.

---
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;
---

Consultez 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 affiché dynamiquement. Et maintenant, chaque page individuelle peut spécifier son propre titre à la mise en page.

Essayer par vous-même - Utiliser votre mise en page partout

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

N’oubliez pas de :

Transmettre un titre de page en tant que props via un attribut de composant.
Laisser la mise en page être responsable du rendu HTML de tous les éléments communs.
Déplacer toutes les balises <style> existantes dans la balise <head> de la page avec les styles que vous souhaitez conserver dans le modèle HTML de la page.
Supprimer de chaque page individuelle tout ce qui est désormais géré par la mise en page, y compris :
- les éléments HTML
- les composants et leurs importations
- les règles CSS dans une balise <style> (par exemple, <h1> dans votre page À propos)
- les balises <script>

L’utilisation de <BaseLayout> pour restituer votre page about.astro signifie que vous perdrez la balise <style> ajoutée à la balise <head> de cette page. Pour continuer à appliquer un style aux éléments uniquement au niveau de la page à l’aide des styles à portée limitée d’Astro, déplacez la balise <style> vers le corps du composant de page. Cela vous permet d’appliquer un style aux éléments créés dans ce composant de page (par exemple, votre liste de compétences).

Étant donné que votre <h1> est désormais créé par votre composant de mise en page, vous pouvez ajouter l’attribut is:global à votre balise de style pour affecter chaque élément de cette page, y compris ceux créés par d’autres composants : <style is:global define:vars={{ skillColor, fontWeight, textCase }}>

Liste de contrôle

Je peux créer un composant de mise en page Astro avec un <slot />.
Je peux envoyer des propriétés spécifiques à la page à une mise en page.

Ressources

Contribuer Communauté Parrainer

Créer votre première mise en page

Créer votre première mise en page

Utiliser votre mise en page dans une page

Transmettre les valeurs spécifiques de la page en tant que props

Essayer par vous-même - Utiliser votre mise en page partout

Tester vos connaissances

Liste de contrôle

Ressources