Crea la tua prima pagina Astro
Ora che sai che i file .astro
sono responsabili delle pagine sul tuo sito web, è il momento di crearne uno!
Preparati a…
- Crea due nuove pagine sul tuo sito web: Su di me e Blog
- Aggiungi link di navigazione alle tue pagine
- Distribuisci una versione aggiornata del tuo sito web sul web
Crea un nuovo file .astro
Sezione intitolata Crea un nuovo file .astro-
Nel pannello dei file del tuo editor di codice, naviga fino alla cartella
src/pages/
dove vedrai il file esistenteindex.astro
-
Nella stessa cartella, crea un nuovo file chiamato
about.astro
. -
Copia o ridigita il contenuto di
index.astro
nel tuo nuovo fileabout.astro
.Il tuo editor potrebbe mostrare un cerchio bianco pieno sull’etichetta della scheda per questo file. Questo significa che il file non è ancora stato salvato. Nel menu File in VS Code, abilita “Salvataggio automatico” e non dovresti più aver bisogno di salvare manualmente alcun file.
-
Aggiungi
/about
alla fine dell’URL di anteprima del tuo sito web nella barra degli indirizzi e verifica di poter vedere una pagina caricarsi lì. (es.http://localhost:4321/about
)
In questo momento, la tua pagina “Su di me” dovrebbe apparire esattamente come la prima pagina, ma stiamo per cambiarlo!
Modifica la tua pagina
Sezione intitolata Modifica la tua paginaModifica il contenuto HTML per rendere questa pagina su di te.
Per cambiare o aggiungere più contenuto alla tua pagina Su di me, aggiungi più tag di elementi HTML contenenti contenuto. Puoi copiare e incollare il codice HTML qui sotto tra i tag <body></body>
esistenti, o creare il tuo.
<body> <h1>Il mio sito Astro</h1> <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>
Ora, visita di nuovo la tua pagina /about
nella scheda del tuo browser, e dovresti vedere il tuo contenuto aggiornato.
Aggiungi link di navigazione
Sezione intitolata Aggiungi link di navigazionePer rendere più facile visualizzare in anteprima tutte le tue pagine, aggiungi link di navigazione di pagina HTML prima del tuo <h1>
nella parte superiore di entrambe le tue pagine (index.astro
e about.astro
):
<a href="/">Home</a><a href="/about/">Su di me</a>
<h1>Su di me</h1><h2>... e il mio nuovo sito Astro!</h2>
Verifica di poter cliccare su questi link per spostarti avanti e indietro tra le pagine sul tuo sito.
A differenza di molti framework, Astro utilizza elementi <a>
HTML standard per navigare tra le pagine (chiamate anche rotte), con i tradizionali aggiornamenti di pagina.
Prova tu stesso - Aggiungi una pagina Blog
Sezione intitolata Prova tu stesso - Aggiungi una pagina BlogAggiungi una terza pagina blog.astro
al tuo sito, seguendo gli stessi passaggi di sopra.
(Non dimenticare di aggiungere un terzo link di navigazione a ogni pagina.)
Mostrami i passaggi.
- Crea un nuovo file in
src/pages/blog.astro
. - Copia l’intero contenuto di
index.astro
e incollalo inblog.astro
. - Aggiungi un terzo link di navigazione alla parte superiore di ogni pagina:
<body> <a href="/">Home</a> <a href="/about/">Su di me</a> <a href="/blog/">Blog</a>
<h1>Il mio sito Astro</h1></body>
Ora dovresti avere un sito web con tre pagine che si collegano tutte tra loro. È il momento di aggiungere un po’ di contenuto alla pagina Blog.
Aggiorna il contenuto della pagina in blog.astro
con:
<body> <a href="/">Home</a> <a href="/about/">Su di me</a> <a href="/blog/">Blog</a>
<h1>Il mio sito Astro</h1> <h1>Il mio Blog di apprendimento di Astro</h1> <p>Questo è dove pubblicherò sul mio percorso di apprendimento di Astro.</p></body>
Visualizza in anteprima l’intero sito visitando tutte e tre le pagine nell’anteprima del tuo browser e verifica che:
- Ogni pagina si collega correttamente a tutte e tre le pagine
- Le tue due nuove pagine hanno ciascuna la propria intestazione descrittiva
- Le tue due nuove pagine hanno ciascuna il proprio testo di paragrafo
Pubblica le tue modifiche sul web
Sezione intitolata Pubblica le tue modifiche sul webSe hai seguito la nostra configurazione nell’Unità 1, puoi pubblicare le tue modifiche sul tuo sito web live tramite Netlify.
Quando sei soddisfatto di come appare la tua anteprima, esegui il commit delle tue modifiche al tuo repository online su GitHub.
-
In VS Code, visualizza in anteprima i file che sono cambiati dall’ultimo commit su GitHub.
-
Vai alla scheda Controllo del codice sorgente nel menu a sinistra. Dovrebbe avere un piccolo “3” visualizzato.
-
Dovresti vedere
index.astro
,about.astro
eblog.astro
elencati come file che sono cambiati.
-
-
Inserisci un messaggio di commit (es. “Aggiunte due nuove pagine - about e blog”) nella casella di testo e premi Ctrl + Enter (macOS: Cmd ⌘ + Enter) per eseguire il commit della modifica al tuo workspace corrente.
-
Clicca sul pulsante per Sincronizza modifiche su GitHub.
-
Dopo aver atteso alcuni minuti, visita il tuo URL Netlify per verificare che le tue modifiche siano pubblicate live.
Segui questi passaggi ogni volta che interrompi il lavoro! Le tue modifiche verranno aggiornate nel tuo repository GitHub. Se hai distribuito su un sito web Netlify, verrà ricostruito e ripubblicato.