Salta ai contenuti

Combina layout per ottenere il meglio da entrambi i mondi

Ora che hai aggiunto un layout a ogni articolo del blog, è il momento di far sembrare i tuoi articoli come il resto delle pagine sul tuo sito web!

Preparati a…

  • Nidifica il tuo layout di articoli del blog all’interno del tuo layout di pagina principale

Nidifica i tuoi due layout

Sezione intitolata Nidifica i tuoi due layout

Hai già un BaseLayout.astro per definire il layout generale delle tue pagine.

MarkdownPostLayout.astro ti dà un po’ di templating aggiuntivo per proprietà comuni degli articoli del blog come title e date, ma i tuoi articoli del blog non assomigliano alle altre pagine del tuo sito. Puoi far corrispondere l’aspetto dei tuoi articoli del blog al resto del tuo sito nidificando i layout.

  1. In src/layouts/MarkdownPostLayout.astro, importa BaseLayout.astro e usalo per avvolgere l’intero contenuto del template. Non dimenticare di passare la prop pageTitle:

    src/layouts/MarkdownPostLayout.astro
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <meta charset="utf-8" />
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Scritto da: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>

  2. In src/layouts/MarkdownPostLayout.astro, puoi ora rimuovere il tag meta poiché è già incluso nel tuo BaseLayout:

    src/layouts/MarkdownPostLayout.astro
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
    <meta charset="utf-8" />
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Scritto da: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>

  3. Controlla l’anteprima del tuo browser su http://localhost:4321/posts/post-1. Ora dovresti vedere il contenuto renderizzato da:

    • Il tuo layout di pagina principale, inclusi i tuoi stili, link di navigazione e footer social.
    • Il tuo layout di articoli del blog, incluse proprietà frontmatter come descrizione, data, titolo e immagine.
    • Il contenuto Markdown del tuo singolo articolo del blog, incluso solo il testo scritto in questo articolo.

  4. Nota che il titolo della tua pagina è ora visualizzato due volte, una volta da ciascun layout.

    Rimuovi la riga che visualizza il titolo della tua pagina da MarkdownPostLayout.astro:

    src/layouts/MarkdownPostLayout.astro
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Scritto da: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>

  5. Controlla di nuovo l’anteprima del tuo browser su http://localhost:4321/posts/post-1 e verifica che questa riga non sia più visualizzata e che il tuo titolo sia visualizzato solo una volta. Apporta qualsiasi altra modifica necessaria per assicurarti di non avere contenuti duplicati.

Assicurati che:

  • Ogni articolo del blog mostri lo stesso template di pagina e che non manchi alcun contenuto. (Se a uno dei tuoi articoli del blog manca del contenuto, controlla le sue proprietà frontmatter.)

  • Nessun contenuto sia duplicato su una pagina. (Se qualcosa viene renderizzato due volte, allora assicurati di rimuoverlo da MarkdownPostLayout.astro.)

Se desideri personalizzare il tuo template di pagina, puoi farlo.

Metti alla prova le tue conoscenze

Sezione intitolata Metti alla prova le tue conoscenze

  1. Questo ti permette di nidificare un layout all’interno di un altro e di sfruttare il vantaggio di lavorare con pezzi modulari.

  2. Layout multipli sono particolarmente utili per progetti che contengono pagine Markdown, come un…

  3. Quale di questi fornisce templating per tutte le tue pagine?

Checklist

Sezione intitolata Checklist

Risorse

Sezione intitolata Risorse
Contribuisci Comunità Sponsor