Zum Inhalt springen

Füge dynamische Inhalte über dich hinzu

Jetzt, da du eine mehrseitige Website mit HTML-Inhalten hast, ist es an der Zeit, etwas dynamisches HTML hinzuzufügen!

Mach dich bereit, …

  • deinen Seitentitel im Frontmatter zu definieren und ihn in deinem HTML zu verwenden
  • HTML-Elemente abhängig von Bedingungen anzuzeigen
  • einige Informationen über dich hinzuzufügen

Jede HTML-Datei ist gültige Astro-Syntax. Aber mit Astro kannst du mehr machen als nur reguläres HTML!

Eine Variable definieren und verwenden

Abschnitt betitelt „Eine Variable definieren und verwenden“

Öffne about.astro. Sie sollte so aussehen:

src/pages/about.astro
---
---
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Startseite</a>
    <a href="/about/">Über mich</a>
    <a href="/blog/">Blog</a>
    <h1>Über mich</h1>
    <h2>… und meine neue Astro-Seite!</h2>


    <p>Ich arbeite mich gerade durch Astros Einsteiger-Tutorial. Das ist die zweite Seite auf meiner Website – und die erste, die ich selbst gebaut habe!</p>


    <p>Diese Website wird sich weiterentwickeln, während ich das Tutorial abschließe. Schau also regelmäßig vorbei und verfolge, wie meine Reise voranschreitet!</p>
  </body>
</html>

  1. Füge folgende JavaScript-Zeile im Frontmatter-Skript zwischen die Code-Begrenzungen ein:

    src/pages/about.astro
    ---
    const pageTitle = "Über mich";
    ---

  2. Ersetze sowohl den statischen „Astro“-Titel als auch die „Über mich“-Überschrift in deinem HTML durch die dynamische Variable {pageTitle}.

    src/pages/about.astro
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
        <title>{pageTitle}</title>
      </head>
      <body>
        <a href="/">Startseite</a>
        <a href="/about/">Über mich</a>
        <a href="/blog/">Blog</a>
        <h1>Über mich</h1>
        <h1>{pageTitle}</h1>
        <h2>… und meine neue Astro-Website!</h2>
    

        <p>Ich arbeite gerade das Astro-Einführungstutorial durch. Das ist die zweite Seite meiner Website und die erste, die ich selbst gebaut habe!</p>
    

        <p>Diese Website wird sich weiterentwickeln, während ich das Tutorial abschließe. Schau also regelmäßig vorbei und verfolge, wie meine Reise voranschreitet!</p>
      </body>
    </html>

  3. Aktualisiere die Live-Vorschau deiner /about-Seite.

    Der Seitentext sollte gleich aussehen, aber der Seitentitel im Browsertab sollte jetzt „Über mich“ statt „Astro“ anzeigen.

    Anstatt Text direkt in HTML-Tags zu schreiben, hast du gerade eine Variable definiert und verwendet – in den beiden Bereichen deiner .astro-Datei.

  4. Verwende dasselbe Muster, um in index.astro („Startseite“) und blog.astro („Mein Astro-Lernblog“) eine pageTitle-Variable anzulegen. Aktualisiere das HTML auf diesen Seiten so, dass der Seitentitel mit der Überschrift übereinstimmt.

JavaScript-Ausdrücke in Astro schreiben

Abschnitt betitelt „JavaScript-Ausdrücke in Astro schreiben“

  1. Füge folgendes JavaScript in dein Frontmatter ein – zwischen die Code-Begrenzungen:

    (Du kannst den Code anpassen, aber dieses Tutorial nutzt folgendes Beispiel.)

    src/pages/about.astro
    ---
    const pageTitle = "Über mich";
    

    const identity = {
      firstName: "Sarah",
      country: "Kanada",
      occupation: "Technische Redakteurin",
      hobbies: ["Fotografie", "Vogelbeobachtung", "Baseball"],
    };
    

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Dokumentation schreiben"];
    ---

  2. Füge den folgenden Code unter deinem bisherigen Inhalt in dein HTML-Template ein:

    src/pages/about.astro
    <p>Hier sind ein paar Fakten über mich:</p>
    <ul>
      <li>Mein Name ist {identity.firstName}.</li>
      <li>Ich lebe in {identity.country} und arbeite als {identity.occupation}.</li>
      {identity.hobbies.length >= 2 &&
        <li>Zwei meiner Hobbys sind: {identity.hobbies[0]} und {identity.hobbies[1]}</li>
      }
    </ul>
    <p>Meine Fähigkeiten sind:</p>
    <ul>
      {skills.map((skill) => <li>{skill}</li>)}
    </ul>

Teste dein Wissen

Abschnitt betitelt „Teste dein Wissen“

  1. Das Frontmatter einer .astro-Datei ist geschrieben in:

  2. Zusätzlich zu HTML erlaubt dir die Astro-Syntax, Folgendes einzubinden:

  3. Wann musst du dein JavaScript in geschweifte Klammern schreiben?

Elemente bedingt rendern

Abschnitt betitelt „Elemente bedingt rendern“

Du kannst deine Skriptvariablen auch nutzen, um zu entscheiden, ob bestimmte HTML-Elemente im <body> angezeigt werden oder nicht.

  1. Füge die folgenden Zeilen zu deinem Frontmatter-Skript hinzu, um Variablen zu definieren:

    src/pages/about.astro
    ---
    const pageTitle = "Über mich";
    

    const identity = {
      firstName: "Sarah",
      country: "Kanada",
      occupation: "Technische Redakteurin",
      hobbies: ["Fotografie", "Vogelbeobachtung", "Baseball"],
    };
    

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Dokumentation schreiben"];
    

    const happy = true;
    const finished = false;
    const goal = 3;
    ---

  2. Füge folgende Zeilen unter deinen bisherigen Absätzen hinzu.

    Überprüfe dann die Live-Vorschau im Browser, um zu sehen, was angezeigt wird:

    src/pages/about.astro
    {happy && <p>Ich freue mich, Astro zu lernen!</p>}
    

    {finished && <p>Ich habe dieses Tutorial abgeschlossen!</p>}
    

    {goal === 3 ? <p>Mein Ziel ist es, in 3 Tagen fertig zu werden.</p> : <p>Mein Ziel sind nicht 3 Tage.</p>}

  3. Committe deine Änderungen auf GitHub, bevor du weitermachst.
    Mach das immer, wenn du deinen Fortschritt speichern und deine Live-Website aktualisieren möchtest.

Analysiere das Muster

Abschnitt betitelt „Analysiere das Muster“

Angenommen, dein .astro-Skript sieht so aus:

src/pages/about.astro
---
const operatingSystem = "Linux";
const quantity = 3;
const footwear = "Stiefel";
const student = false;
---

Kannst du vorhersagen, welches HTML (falls überhaupt) an den Browser gesendet wird?
Klicke, um herauszufinden, ob du richtig liegst!

  1. <p>{operatingSystem}</p>

  2. {student && <p>Ich bin noch in der Schule.</p>}

  3. <p>Ich habe {quantity + 8} Paar {footwear}</p>

  4. {operatingSystem === "macOS" ? <p>Ich benutze einen Mac.</p> : <p>Ich benutze keinen Mac.</p>}

Checkliste

Abschnitt betitelt „Checkliste“

Ressourcen

Abschnitt betitelt „Ressourcen“
Wirke mit Community Sponsor