Erstelle eine Social-Media-Fußzeile

Mach dich bereit, …

eine Fußzeilenkomponente zu erstellen
Props an eine Social-Media-Komponente zu erstellen und übergeben

Jetzt, wo du Astro-Komponenten auf einer Seite verwendet hast, ist es an der Zeit, eine Komponente innerhalb einer anderen Komponente zu verwenden!

Erstelle eine Fußzeilenkomponente

Erstelle eine neue Datei unter src/components/Footer.astro.

Kopiere den folgenden Code in die neue Footer.astro-Datei.

---
const platform = "github";
const username = "withastro";
---

<footer>
  <p>Erfahre mehr über meine Projekte auf <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
</footer>

Importiere und verwende `Footer.astro`

Füge die folgende Importanweisung zum Frontmatter in jeder deiner drei Astro-Seiten (index.astro, about.astro und blog.astro) hinzu:
```
import Footer from '../components/Footer.astro';
```
Füge eine neue <Footer />-Komponente in deiner Astro-Vorlage auf jeder Seite ein, kurz vor dem schließenden </body>-Tag, um deine Fußzeile am Ende der Seite anzuzeigen.
```
    <Footer />
  </body>
</html>
```
Überprüfe in der Browser-Vorschau, dass du den Text deiner neuen Fußzeile auf jeder Seite sehen kannst.

Probiere es selbst aus – Personalisiere deine Fußzeile

Passe deine Fußzeile so an, dass sie mehrere soziale Netzwerke (z. B. Instagram, X (Twitter), LinkedIn) anzeigt und füge deinen Benutzernamen hinzu, um direkt auf dein eigenes Profil zu verlinken.

Code Check-In

Wenn du jedem Schritt im Tutorial gefolgt bist, sollte deine index.astro-Datei wie folgt aussehen:

---
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';

const pageTitle = 'Startseite';
---

<html lang="de">
  <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>

Da du möglicherweise mehrere Online-Konten hast, auf die du verlinken kannst, kannst du eine einzige, wiederverwendbare Komponente erstellen und sie mehrmals anzeigen. Jedes Mal übergibst du ihr verschiedene Eigenschaften (props): die Online-Plattform und deinen dortigen Benutzernamen.

Erstelle eine neue Datei unter src/components/Social.astro.

Kopiere den folgenden Code in deine neue Datei Social.astro.

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

Importiere und verwende `Social.astro` in deiner Fußzeile

Ändere den Code in src/components/Footer.astro, um diese neue Komponente dreimal zu importieren und zu verwenden, wobei du jedes Mal unterschiedliche Komponentenattribute als Props übergibst:

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

<footer>
  <p>Erfahre mehr über meine Projekte auf <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>

Überprüfe deine Browser-Vorschau, und du solltest deine neue Fußzeile sehen, die Links zu diesen drei Plattformen auf jeder Seite anzeigt.

Passe das Erscheinungsbild deiner Links an, indem du ein <style>-Tag zu src/components/Social.astro hinzufügst.

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

Füge ein <style>-Tag zu src/components/Footer.astro hinzu, um das Layout seiner Inhalte zu verbessern.

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

Überprüfe erneut deine Browser-Vorschau und bestätige, dass jede Seite eine aktualisierte Fußzeile anzeigt.

Teste dich selbst

Welche Codezeile musst du im Frontmatter einer Astro-Komponente schreiben, um die Werte von title, author und date als Props zu erhalten?
1. const { title, author, date } = Astro.props;
2. import BlogPost from '../components/BlogPost.astro'
3. <BlogPost title="Mein erster Beitrag" author="Dan" date="12. Aug. 2022" />
Wie übergibst du Werte als Props an eine Astro-Komponente?
1. const { title, author, date } = Astro.props;
2. import BlogPost from '../components/BlogPost.astro'
3. <BlogPost title="Mein erster Beitrag" author="Dan" date="12. Aug. 2022" />

Checkliste

Ich kann neue .astro-Komponenten in src/components/ erstellen.
Ich kann Astro-Komponenten innerhalb anderer Astro-Komponenten importieren und verwenden.
Ich kann Props an eine Astro-Komponente übergeben.

Ressourcen

Komponenteneigenschaften in Astro

Wirke mit Community Sponsor

Erstelle eine Social-Media-Fußzeile

Erstelle eine Fußzeilenkomponente

Importiere und verwende Footer.astro

Probiere es selbst aus – Personalisiere deine Fußzeile

Code Check-In

Erstelle eine Social-Media-Komponente

Importiere und verwende Social.astro in deiner Fußzeile

Gestalte deine Social-Media-Komponente

Teste dich selbst

Checkliste

Ressourcen

Importiere und verwende `Footer.astro`

Importiere und verwende `Social.astro` in deiner Fußzeile