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!

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

  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.

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

Contribuisci Comunità Sponsor