Salta ai contenuti

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

Sezione intitolata Crea il tuo primo componente layout

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

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

    src/layouts/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

Sezione intitolata Usa il tuo layout su una pagina

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

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

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

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

    src/layouts/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>
        <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

Sezione intitolata Passa valori specifici della pagina come props

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

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

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

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

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

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

Metti alla prova le tue conoscenze

Sezione intitolata Metti alla prova le tue conoscenze

  1. Un componente Astro (file .astro) può funzionare come:

  2. Per visualizzare un titolo di pagina sulla pagina, puoi:

  3. Le informazioni possono essere passate da un componente all’altro da:

Checklist

Sezione intitolata Checklist

Risorse

Sezione intitolata Risorse
Contribuisci Comunità Sponsor