Parliamo ora della collezione di contenuti e il layout del sito web. Una volta configurato l'ambiente di sviluppo, possiamo passare alla creazione della struttura del sito. La prima domanda da porsi riguarda i contenuti: archiviarli in un database o utilizzare le collezioni di contenuti di Astro?
Il nostro obiettivo è quello di sfruttare le funzionalità di Astro per ottimizzare le prestazioni del sito, quindi creeremo un archivio di articoli in formato Markdown e li gestiremo registrando una collezione di contenuti.
Procederemo come segue:
- registreremo una collezione di contenuti (Content Collection), il sistema di Astro per gestire i file Markdown dei post;
- creeremo i primi post di esempio per avere dei dati con cui lavorare;
- aggiorneremo il layout principale per rendere i contenuti;
- creeremo un componente che generi una lista riutilizzabile di articoli;
- creeremo la pagina
indexdel blog che utilizzi il componente; - creeremo il layout dei singoli post;
- creeremo una pagina dinamica che renda a video ogni singolo post.
La collezione di contenuti per il sito web
Le collezioni di contenuti di Astro consentono la generazione automatica di pagine statiche o dinamiche con file Markdown o MDX. Questo permette di strutturare i post in modo coerente, assegnando gli stessi campi a tutti gli articoli della stessa tipologia, ad esempio titolo, data, contenuto, e immagine di anteprima.
Per prima cosa, creiamo le cartelle /scr/public/blog/immagini/, dove archivieremo le immagini del blog, e /src/content, che Astro utilizza per gestire le collezioni di contenuti. All'interno di /src/content creiamo la cartella blog per i file Markdown degli articoli.
Il passo successivo è la definizione dello schema della collezione. A questo scopo, creiamo il file di configurazione /src/content/config.ts con il seguente codice:
import { defineCollection, z } from 'astro:content';
const blogCollection = defineCollection({
schema: z.object({
title: z.string(),
description: z.string(),
pubDate: z.date(), // Si aspetta una data in formato ISO (es. 2025-07-07)
author: z.string().default('Admin'), // Campo con valore predefinito
heroImage: z.string().optional(), // Immagine opzionale
tags: z.array(z.string()).optional(), // Array di stringhe opzionale per i tag
}),
});
export const collections = {
'blog': blogCollection,
};Il codice qui sopra definisce la collezione blog utilizzando la libreria Zod (z) per il type checking dei campi dei singoli elementi della collezione.
Quindi passiamo alla creazione di alcuni post. Quindi, nella cartella /src/content/blog creiamo il file primo-post.md e inseriamo quanto segue:
---
title: 'Il Mio Primo Articolo del blog'
description: 'Descrizione del mio primo articolo'
pubDate: 2025-07-07
heroImage: '/blog/immagini/01.jpg'
tags: ['astro', 'tutorial', 'webdev']
---
Benvenuti nel mio nuovo blog! Questo è il mio primo articolo, scritto in **Markdown**.Seguendo lo stesso schema, creiamo altri post cambiando i valori dei campi e il contenuto.
Il layout principale del sito web
A questo punto, dobbiamo creare il layout principale del sito.
Apriamo il file /src/layouts/Layout.astro e sostituiamo il codice presente con quello che segue:
---
import '../styles/global.css'
interface Props {
title: string;
description?: string;
}
const { title, description = "Il mio fantastico blog creato con Astro" } = Astro.props;
---
<!doctype html>
<html lang="it" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="description" content={description} />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<!-- Librerie JS -->
<script defer src="/libs/alpine.min.js"></script>
<script defer src="/libs/htmx.min.js"></script>
</head>
<body class="bg-gray-50 text-gray-800" hx-boost="true">
<div class="w-full">
<header class="bg-white border-b border-gray-200">
<nav class="max-w-4xl mx-auto px-6 py-4 flex justify-between items-center">
<a href="/" class="text-xl font-bold text-purple-700">{title}</a>
<div class="flex items-center gap-x-6">
<a href="/" class="text-gray-600 hover:text-purple-700 mr-4">Home</a>
<a href="/blog" class="text-gray-600 hover:text-purple-700">Blog</a>
</div>
</nav>
</header>
<main class="max-w-4xl mx-auto px-6 py-12">
<slot />
</main>
<footer class="text-center py-8 text-gray-500 text-sm">
© {new Date().getFullYear()} Il mio sito Astro. Tutti i diritti riservati.
</footer>
</div>
</body>
</html>Spiegazione del codice
- Nel frontmatter del file
Layout.astroabbiamo importato il foglio di stile di Tailwind e definito l'interfaccia dellePropsche ha lo scopo di definire il tipo di dati che ilLayoutsi aspetta di ricevere:title: è una stringa di testo che deve essere passata all'elemento<Layout>ogni volta che lo utilizziamo. Se la proprietà è assente, viene generato un messaggio di errore;description: è una stringa di testo opzionale (?:).
- L'istruzione successiva è un'assegnazione per destrutturazione delle proprietà passate al componente. Qui assegniamo un valore predefinito alla proprietà
description, mentre la proprietàtitledeve essere specificata quando si utilizza il componente.
Utilizziamo, quindi, le due proprietà per generare titolo e descrizione della pagina:
<title>{title}</title>
<meta name="description" content={description} />
<a href="/" class="text-xl font-bold text-purple-700">{title}</a>Ora possiamo utilizzare questo layout per generare la struttura di qualsiasi pagina del sito. Cominciamo dalla homepage.
Una homepage basata su componenti
Apriamo il file /src/pages/index.astro e sostituiamo il codice presente con questo:
---
import Welcome from '../components/Welcome.astro';
import Layout from '../layouts/Layout.astro';
---
<Layout
title="Il mio sito Astro"
description="In questo blog si parla di sviluppo web, Astro e altro."
>
<h1 class="text-5xl font-bold text-purple-600">
Welcome to <span class="text-blue-600">Astro</span>
</h1>
<Welcome />
</Layout>- Qui abbiamo importato i componenti
WelcomeeLayout. Il primo contiene un messaggio di benvenuto, il secondo genera il codice che racchiude il contenuto HTML del file. - Abbiamo assegnato al
Layoutgli attributititleedescriptionche, come spiegato in precedenza, forniscono le proprietà del componente. - Seguono un'intestazione
h1e l'elementoWelcomeche fornisce il contenuto della pagina.
Con la collezione di contenuti e il layout del sito web siamo ancora in fase di progettazione della struttura, ma dovrebbe essere chiaro il funzionamento modulare di Astro. Nella prossima lezione creeremo una pagina per il sito web basata su componenti.
La homepage provvisoria del sito Astro
Se vuoi aggiornamenti su La collezione di contenuti e il layout del sito web inserisci la tua email nel box qui sotto: