Costruisci il tuo primo layout

Preparati a…

Esegui il refactoring di elementi comuni in un layout di pagina
Usa un elemento <slot /> di Astro per posizionare i contenuti della pagina all’interno di un layout
Passa valori specifici della pagina come props al suo layout

Hai ancora alcuni componenti Astro renderizzati ripetutamente su ogni pagina. È il momento di eseguire di nuovo il refactoring per creare un layout di pagina condiviso!

Crea il tuo primo componente layout

Crea un nuovo file nella posizione src/layouts/BaseLayout.astro. (Dovrai prima creare una nuova cartella layouts.)

Copia l’intero contenuto di index.astro nel tuo nuovo file, BaseLayout.astro.

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Pagina iniziale";
---
<html lang="it">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Header />
    <h1>{pageTitle}</h1>
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

Usa il tuo layout su una pagina

Sostituisci il codice in src/pages/index.astro con il seguente:

---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Pagina iniziale";
---
<BaseLayout>
  <h2>Il sottotitolo del mio fantastico blog</h2>
</BaseLayout>

Controlla di nuovo l’anteprima del browser per notare cosa è (o, spoiler alert: non è!) cambiato.

Aggiungi un elemento <slot /> a src/layouts/BaseLayout.astro appena sopra il componente footer, poi controlla l’anteprima del browser della tua pagina Home e nota cosa è realmente cambiato questa volta!

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Pagina iniziale";
---
<html lang="it">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Header />
    <h1>{pageTitle}</h1>
    <slot />
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

Il <slot /> ti permette di iniettare (o “slot in”) contenuto figlio scritto tra i tag di apertura e chiusura <Component></Component> a qualsiasi file Component.astro.

Passa valori specifici della pagina come props

Passa il titolo della pagina al tuo componente layout da index.astro usando un attributo del componente:

---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Pagina iniziale";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>Il sottotitolo del mio fantastico blog</h2>
</BaseLayout>

Cambia lo script del tuo componente layout BaseLayout.astro per ricevere un titolo di pagina tramite Astro.props invece di definirlo come una costante.

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Pagina iniziale";
const { pageTitle } = Astro.props;
---

Controlla l’anteprima del tuo browser per verificare che il titolo della tua pagina non sia cambiato. Ha lo stesso valore, ma ora viene renderizzato dinamicamente. E ora, ogni singola pagina può specificare il proprio titolo al layout.

Prova tu stesso - Usa il tuo layout ovunque

Esegui il refactoring delle tue altre pagine (blog.astro e about.astro) in modo che usino il tuo nuovo componente <BaseLayout> per renderizzare gli elementi di pagina comuni.

Non dimenticare di:

Passare un titolo di pagina come props tramite un attributo del componente.
Lasciare che il layout sia responsabile del rendering HTML di qualsiasi elemento comune.
Spostare qualsiasi tag <style> esistente nell’<head> della pagina con stili che desideri mantenere nel template HTML della pagina.
Eliminare qualsiasi cosa da ogni singola pagina che ora viene gestita dal layout, incluso:
- Elementi HTML
- Componenti e le loro importazioni
- Regole CSS in un tag <style> (es. <h1> nella tua pagina Su di me)
- Tag <script>

Checklist

Posso creare un componente layout Astro con uno <slot />.
Posso inviare proprietà specifiche della pagina a un layout.

Risorse

Contribuisci Comunità Sponsor