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!

Definisci e usa una variabile

Apri about.astro, che dovrebbe apparire così:

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

Aggiungi la seguente riga di JavaScript nello script frontmatter, tra i recinti di codice:
src/pages/about.astro
```
---
const pageTitle = "Su di me";
---
```

Sostituisci sia il titolo statico “Astro” che l’intestazione “Su di me” nel tuo HTML con la variabile dinamica {pageTitle}.

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

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

Scrivi espressioni JavaScript in Astro

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

---
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"];
---

Poi, aggiungi il seguente codice al tuo template HTML, sotto il tuo contenuto esistente:

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

Metti alla prova le tue conoscenze

Il frontmatter di un file .astro è scritto in:
1. HTML
2. YAML
3. JavaScript
Oltre all’HTML, la sintassi di Astro ti permette di includere:
1. Operatori logici, espressioni e funzioni JavaScript
2. YAML
3. Markdown
Quando hai bisogno di scrivere il tuo JavaScript all’interno di parentesi graffe?
1. Quando non sei sicuro che sia corretto.
2. Quando all’interno della sezione del template HTML di un componente Astro.
3. Tra i recinti di codice in un componente Astro.

Renderizza condizionatamente elementi

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

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

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

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:

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

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.

Analizza lo Schema

Dato il seguente script .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!

{operatingSystem}

Linux
{student && Sono ancora a scuola.}

Nulla verrà visualizzato perché student restituisce false.
Ho {quantity + 8} paia di {footwear}

Ho 11 paia di boots
{operatingSystem === "MacOS" ? Sto usando un Mac. : Non sto usando un Mac.}

Non sto usando un Mac.

Checklist

Posso definire valori in e usare valori nei file .astro.
Posso renderizzare condizionatamente elementi HTML.

Risorse

Espressioni dinamiche in Astro

Contribuisci Comunità Sponsor