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:
------<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>-
Füge folgende JavaScript-Zeile im Frontmatter-Skript zwischen die Code-Begrenzungen ein:
src/pages/about.astro ---const pageTitle = "Über mich";--- -
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> -
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. -
Verwende dasselbe Muster, um in
index.astro(„Startseite“) undblog.astro(„Mein Astro-Lernblog“) einepageTitle-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“-
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"];--- -
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“-
Das Frontmatter einer
.astro-Datei ist geschrieben in: -
Zusätzlich zu HTML erlaubt dir die Astro-Syntax, Folgendes einzubinden:
-
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.
-
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;--- -
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>} -
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:
---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!
-
<p>{operatingSystem}</p> -
{student && <p>Ich bin noch in der Schule.</p>} -
<p>Ich habe {quantity + 8} Paar {footwear}</p> -
{operatingSystem === "macOS" ? <p>Ich benutze einen Mac.</p> : <p>Ich benutze keinen Mac.</p>}