Salta ai contenuti

Aggiungi contenuti dinamici su di te

Ora che hai un sito web multi-pagina con contenuto HTML, è il momento di aggiungere un po’ di HTML dinamico!

Preparati a…

  • Definisci il titolo della tua pagina nel frontmatter e usalo nel tuo HTML
  • Visualizza condizionatamente elementi HTML
  • Aggiungi un po’ di contenuto su di te

Qualsiasi file HTML è un linguaggio Astro valido. Ma, puoi fare di più con Astro del semplice HTML normale!

Apri about.astro, che dovrebbe apparire così:

src/pages/about.astro
---
---
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Astro</title>
</head>
<body>
<a href="/">Home</a>
<a href="/about/">Su di me</a>
<a href="/blog/">Blog</a>
<h1>Su di me</h1>
<h2>... e il mio nuovo sito Astro!</h2>
<p>Sto seguendo il tutorial introduttivo di Astro. Questa è la seconda pagina sul mio sito web, ed è la prima che ho costruito da solo!</p>
<p>Questo sito si aggiornerà man mano che completerò altre parti del tutorial, quindi continua a controllare e vedi come sta andando il mio percorso!</p>
</body>
</html>
  1. Aggiungi la seguente riga di JavaScript nello script frontmatter, tra i recinti di codice:

    src/pages/about.astro
    ---
    const pageTitle = "Su di me";
    ---
  2. Sostituisci sia il titolo statico “Astro” che l’intestazione “Su di me” nel tuo HTML con la variabile dinamica {pageTitle}.

    src/pages/about.astro
    <html lang="it">
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
    <title>{pageTitle}</title>
    </head>
    <body>
    <a href="/">Home</a>
    <a href="/about/">Su di me</a>
    <a href="/blog/">Blog</a>
    <h1>Su di me</h1>
    <h1>{pageTitle}</h1>
    <h2>... e il mio nuovo sito Astro!</h2>
    <p>Sto seguendo il tutorial introduttivo di Astro. Questa è la seconda pagina sul mio sito web, ed è la prima che ho costruito da solo!</p>
    <p>Questo sito si aggiornerà man mano che completerò altre parti del tutorial, quindi continua a controllare e vedi come sta andando il mio percorso!</p>
    </body>
    </html>
  3. Aggiorna l’anteprima live della tua pagina /about.

    Il testo della tua pagina dovrebbe apparire uguale e il titolo della pagina visualizzato nella scheda del tuo browser dovrebbe ora essere “Su di me” invece di “Astro”.

    Invece di digitare testo direttamente nei tag HTML, hai appena definito e poi usato una variabile nelle due sezioni del tuo file .astro, rispettivamente.

  4. Usa lo stesso schema per creare un valore pageTitle da utilizzare in index.astro (“Pagina iniziale”) e blog.astro (“Il mio Blog di apprendimento di Astro”). Aggiorna l’HTML di queste pagine in entrambi i punti in modo che il titolo della tua pagina corrisponda all’intestazione visualizzata su ciascuna pagina.

  1. Aggiungi il seguente JavaScript al tuo frontmatter, tra i recinti di codice:

    (Puoi personalizzare il codice per te stesso, ma questo tutorial userà il seguente esempio.)

    src/pages/about.astro
    ---
    const pageTitle = "Su di me";
    const identity = {
    firstName: "Sarah",
    country: "Canada",
    occupation: "Scrittrice tecnica",
    hobbies: ["fotografia", "birdwatching", "baseball"],
    };
    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Scrivere Documentazione"];
    ---
  2. Poi, aggiungi il seguente codice al tuo template HTML, sotto il tuo contenuto esistente:

    src/pages/about.astro
    <p>Ecco alcuni fatti su di me:</p>
    <ul>
    <li>Il mio nome è {identity.firstName}.</li>
    <li>Vivo in {identity.country} e lavoro come {identity.occupation}.</li>
    {identity.hobbies.length >= 2 &&
    <li>Due dei miei hobby sono: {identity.hobbies[0]} e {identity.hobbies[1]}</li>
    }
    </ul>
    <p>Le mie competenze sono:</p>
    <ul>
    {skills.map((skill) => <li>{skill}</li>)}
    </ul>
  1. Il frontmatter di un file .astro è scritto in:

  2. Oltre all’HTML, la sintassi di Astro ti permette di includere:

  3. Quando hai bisogno di scrivere il tuo JavaScript all’interno di parentesi graffe?

Puoi anche usare le tue variabili di script per scegliere se renderizzare o meno singoli elementi del contenuto <body> del tuo HTML.

  1. Aggiungi le seguenti righe al tuo script frontmatter per definire variabili:

    src/pages/about.astro
    ---
    const pageTitle = "Su di me";
    const identity = {
    firstName: "Sarah",
    country: "Canada",
    occupation: "Scrittrice tecnica",
    hobbies: ["fotografia", "birdwatching", "baseball"],
    };
    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Scrivere Documenti"];
    const happy = true;
    const finished = false;
    const goal = 3;
    ---
  2. Aggiungi le seguenti righe sotto i tuoi paragrafi esistenti.

    Poi, controlla l’anteprima live nella scheda del tuo browser per vedere cosa viene visualizzato sulla pagina:

    src/pages/about.astro
    {happy && <p>Sono felice di imparare Astro!</p>}
    {finished && <p>Ho finito questo tutorial!</p>}
    {goal === 3 ? <p>Il mio obiettivo è finire in 3 giorni.</p> : <p>Il mio obiettivo non è 3 giorni.</p>}
  3. Esegui il commit delle tue modifiche su GitHub prima di andare avanti. Fallo ogni volta che vuoi salvare il tuo lavoro e aggiornare il tuo sito web live.

Dato il seguente script .astro:

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

Per ogni espressione del template Astro, puoi prevedere l’HTML (se presente!) che verrà inviato al browser? Clicca per rivelare se hai ragione!

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

  2. {student && <p>Sono ancora a scuola.</p>}

  3. <p>Ho {quantity + 8} paia di {footwear}</p>

  4. {operatingSystem === "MacOS" ? <p>Sto usando un Mac.</p> : <p>Non sto usando un Mac.</p>}

Contribuisci Comunità Sponsor