Erstelle eine Social-Media-Fußzeile

Mach dich bereit, …

Erstelle eine Fußzeilenkomponente
Erstelle und übergebe Props an eine Social-Media-Komponente

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