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

  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.

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

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

  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!

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

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

  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.

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

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>

:::note[Mantenimento degli stili della tua pagina Su di me]Usare <BaseLayout> per renderizzare la tua pagina about.astro significa che perderai il tag <style> aggiunto all'<head> di questa pagina. Per continuare a stilizzare elementi solo a livello di pagina usando lo styling scoped di Astro, sposta il tag <style> nel body del componente pagina. Questo ti permette di stilizzare elementi creati in questo componente pagina (es. la tua lista di competenze).

Dato che il tuo <h1> è ora creato dal tuo componente layout, puoi aggiungere l'attributo is:global al tuo tag di stile per influenzare ogni elemento su questa pagina, inclusi quelli creati da altri componenti: <style is:global define:vars={{ skillColor, fontWeight, textCase }}>:::

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

Risorse

Contribuisci Comunità Sponsor