Aller au contenu

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

Préparez-vous à…

  • Créez un composant Footer
  • Créez et passez des props à un composant Social Media

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

Titre de la section Créez 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>

Importez et utilisez Footer.astro

Titre de la section Importez et utilisez 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.

Essayez par vous-même - Personnalisez votre pied de page

Titre de la section Essayez par vous-même - Personnalisez 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éez un composant Social Media

Titre de la section Créez 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 Importez et utilisez 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.

Stylisez votre composant Social Media

Titre de la section Stylisez 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>
  1. 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 passez-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