Aller au contenu

Créer un pied de page affichant les médias sociaux

Préparez-vous à…

  • Créer un composant Footer
  • Créer et passer des props à un composant Social Media

Maintenant que vous avez utilisé des composants Astro sur une page, il est temps d’utiliser un composant à l’intérieur d’un autre composant !

Titre de la section Créer un composant Footer

  1. Créez un nouveau fichier à l’emplacement src/components/Footer.astro.

  2. Copiez le code suivant dans votre nouveau fichier, Footer.astro.

    src/components/Footer.astro
    ---
    const platform = "github";
    const username = "withastro";
    ---
    

    <footer>
      <p>Apprenez-en plus sur mes projets sur <a href={`https://www.${platform}.com/${username}`}>{platform}</a> !</p>
    </footer>

Importer et utiliser Footer.astro

Titre de la section Importer et utiliser Footer.astro

  1. Ajoutez la déclaration d’importation suivante dans le frontmatter de chacune de vos trois pages Astro (index.astro, about.astro et blog.astro):

    import Footer from '../components/Footer.astro';

  2. Ajoutez un nouveau composant <Footer /> dans votre modèle Astro sur chaque page, juste avant la balise de fermeture </body> pour afficher votre pied de page en bas de la page.

        <Footer />
      </body>
    </html>

  3. Dans votre aperçu de navigateur, vérifiez que vous pouvez voir votre nouveau texte de pied de page sur chaque page.

Essayer par vous-même - Personnaliser votre pied de page

Titre de la section Essayer par vous-même - Personnaliser votre pied de page

Personnalisez votre pied de page pour afficher plusieurs réseaux sociaux (par exemple, Instagram, Twitter, LinkedIn) et incluez votre nom d’utilisateur pour créer un lien direct vers votre propre profil.

Point de contrôle du code

Titre de la section Point de contrôle du code

Si vous avez suivi chaque étape du tutoriel, votre fichier index.astro devrait ressembler à ceci :

src/pages/index.astro
---
import Navigation from '../components/Navigation.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>
    <Navigation />
    <h1>{pageTitle}</h1>
    <Footer />
  </body>
</html>

Créer un composant Social Media

Titre de la section Créer un composant Social Media

Étant donné que vous pouvez avoir plusieurs comptes en ligne auxquels vous pouvez créer un lien, vous pouvez créer un seul composant réutilisable et l’afficher plusieurs fois. À chaque fois, vous lui passerez différentes propriétés (props) à utiliser : la plateforme en ligne et votre nom d’utilisateur là-bas.

  1. Créez un nouveau fichier à l’emplacement src/components/Social.astro.

  2. Copiez le code suivant dans votre nouveau fichier, Social.astro.

    src/components/Social.astro
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>
Titre de la section Importer et utiliser Social.astro dans votre Footer

  1. Modifiez le code dans src/components/Footer.astro pour importer, puis utilisez ce nouveau composant trois fois, en passant à chaque fois des attributs de composant différents en tant que props :

    src/components/Footer.astro
    ---
    const platform = "github";
    const username = "withastro";
    import Social from './Social.astro';
    ---
    

    <footer>
      <p>Apprenez-en plus sur mes projets sur <a href={`https://www.${platform}.com/${username}`}>{platform}</a> !</p>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>

  2. Vérifiez à nouveau votre aperçu de navigateur, et vous devriez voir votre nouveau pied de page affichant des liens vers ces trois plateformes sur chaque page.

Mettre en forme votre composant Social Media

Titre de la section Mettre en forme votre composant Social Media

  1. Personnalisez l’apparence de vos liens en ajoutant une balise <style> à src/components/Social.astro.

    src/components/Social.astro
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>
    

    <style>
      a {
        padding: 0.5rem 1rem;
        color: white;
        background-color: #4c1d95;
        text-decoration: none;
      }
    </style>

  2. Ajoutez une balise <style> à src/components/Footer.astro pour améliorer la mise en page de son contenu.

    src/components/Footer.astro
    ---
    import Social from './Social.astro';
    ---
    <style>
      footer {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
      }
    </style>
    

    <footer>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>

  3. Vérifiez à nouveau votre aperçu de navigateur, et confirmez que chaque page affiche un pied de page mis à jour.

Testez-vous

Titre de la section Testez-vous

  1. Que devez-vous écrire dans le frontmatter d’un composant Astro pour recevoir les valeurs de title, author et date en tant que props ?

  2. Comment transmettez-vous des valeurs en tant que props à un composant Astro ?

Liste de contrôle

Titre de la section Liste de contrôle

Ressources

Titre de la section Ressources
Contribuer Communauté Parrainer