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 !

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

Copiez le code suivant dans votre nouveau fichier, 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`

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

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

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

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

É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.

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

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

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

Importez et utilisez `Social.astro` dans votre Footer

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 :

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

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.

Personnalisez l’apparence de vos liens en ajoutant une balise <style> à 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>

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

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

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

Testez-vous

Que devez-vous écrire dans le frontmatter d’un composant Astro pour recevoir les valeurs de title, author et date en tant que props ?
1. const { title, author, date } = Astro.props;
2. import BlogPost from '../components/BlogPost.astro'
3. <BlogPost title="Mon premier article" author="Dan" date="12 août 2022" />
Comment passez-vous des valeurs en tant que props à un composant Astro ?
1. const { title, author, date } = Astro.props;
2. import BlogPost from '../components/BlogPost.astro'
3. <BlogPost title="Mon premier article" author="Dan" date="12 août 2022" />

Liste de contrôle

Je peux créer de nouveaux composants .astro dans src/components/
Je peux importer et utiliser des composants Astro à l’intérieur d’autres composants Astro.
Je peux passer des props à un composant Astro.

Ressources

Props de composants dans Astro

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

Créez un composant Footer

Importez et utilisez Footer.astro