Nella lezione precedente abbiamo registrato la struttura di una collezione di contenuti Astro<\/strong> e creato una serie di post in formato Markdown<\/a>.<\/p>\n In questa lezione vedremo come creare la pagina del sito web in cui visualizzare le anteprime dei post e le pagine dei singoli post. A questo scopo utilizzeremo delle potenti funzionalit\u00e0 di Astro: componenti e routing dinamico. Infine, utilizzeremo la libreria Alpine.js<\/a> per impaginare i risultati del blog.<\/p>\n Iniziamo creando due componenti. Il primo per generare l’anteprima degli articoli del blog, il secondo per i singoli articoli.<\/p>\n Cominciamo dal blog. Creiamo il file Questo \u00e8 il codice del frontmatter del componente<\/strong>. Ecco cosa fa:<\/p>\n Subito sotto il frontmatter, aggiungiamo il codice HTML<\/a> che genera la struttura del componente:<\/p>\n Ora dobbiamo creare la pagina che usa questo componente. Spostiamoci nella cartella Ecco cosa fa questo codice:<\/p>\n Abbiamo utilizzato Alpine.js per creare un sistema di paginazione “lato client” con un pulsante che permette di mostrare altri Ed ecco la pagina iniziale del nostro blog:<\/p>\n La prima versione del blog Astro<\/p>\n<\/div>\n Se vuoi aggiornamenti su La struttura del sito web<\/em> inserisci la tua email nel box qui sotto:<\/p>\n<\/div>\nLa struttura del sito web: un blog in Astro<\/h2>\n
ArticleCard.astro<\/code> nella cartella \/src\/components<\/code> con il seguente codice:<\/p>\n---\nimport type { CollectionEntry } from 'astro:content';\ninterface Props {\n\tpost: CollectionEntry<'blog'>;\n}\nconst { post } = Astro.props;\n---<\/code><\/pre>\n\n
import type { CollectionEntry }<\/code> importa i tipi di TypeScript<\/a> da Astro;<\/li>\ninterface Props { ... }<\/code> dichiara le propriet\u00e0 che il componente si aspetta di ricevere; post: CollectionEntry<'blog'><\/code> significa che la propriet\u00e0 deve essere un intero oggetto della collezione blog<\/code>;<\/li>\nconst { post } = Astro.props;<\/code> accetta i dati che vengono passati al componente.<\/li>\n<\/ul>\n<a href={`\/blog\/${post.slug}\/`} class=\"block group hover:no-underline focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-lg\">\n\t<article class=\"bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 h-full flex flex-col\">\n\t\t<!-- Immagine (se presente) -->\n\t\t{post.data.heroImage && (\n\t\t\t<div class=\"mb-4\">\n\t\t\t\t<img\n\t\t\t\t\tsrc={post.data.heroImage}\n\t\t\t\t\talt={`Immagine per ${post.data.title}`}\n\t\t\t\t\tclass=\"w-full h-48 object-cover rounded-md\"\n\t\t\t\t\/>\n\t\t\t<\/div>\n\t\t)}\n\t\t<div class=\"flex flex-col flex-grow\">\n\t\t\t<!-- Data del post -->\n\t\t\t<p class=\"text-sm text-gray-500\">\n\t\t\t\t{new Date(post.data.pubDate).toLocaleDateString('it-IT', { year: 'numeric', month: 'long', day: 'numeric' })}\n\t\t\t<\/p>\n\t\t\t<!-- Titolo del post -->\n\t\t\t<h2 class=\"text-2xl font-bold mt-2 text-gray-900 group-hover:text-purple-600 transition-colors duration-300\">\n\t\t\t\t{post.data.title}\n\t\t\t<\/h2>\n\t\t\t<!-- Descrizione -->\n\t\t\t<p class=\"text-gray-700 mt-3 flex-grow\">\n\t\t\t\t{post.data.description}\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/article>\n<\/a><\/code><\/pre>\n\n
<a><\/code>, che far\u00e0 s\u00ec che l’intera card sia un’unica area cliccabile;<\/li>\nhref={\/blog\/${post.slug}\/`}<\/code> genera dinamicamente l’URL della pagina di destinazione. Questo in quanto Astro genera automaticamente il campo slug per ogni post in base al nome del file Markdown (es. primo-post.md<\/code> produce post.slug = 'primo-post'<\/code>).<\/li>\n{post.data.heroImage && (...) }<\/code> \u00e8 un rendering condizionale che verifica l’esistenza di post.data.heroImage<\/code> e, se la condizione \u00e8 vera, visualizza il codice tra parentesi.<\/li>\npost.data.pubDate<\/code>, post.data.title<\/code> e post.data.description<\/code> generano data, titolo e descrizione del post.<\/li>\n<\/ul>\nLa pagina del blog<\/h2>\n
\/src\/pages<\/code> e creiamo la cartella blog<\/code>. Qui creiamo il file index.astro<\/code> e aggiungiamo il seguente codice:<\/p>\n---\nimport { getCollection, type CollectionEntry } from 'astro:content';\nimport Layout from '..\/..\/layouts\/Layout.astro';\nimport ArticleCard from '..\/..\/components\/ArticleCard.astro';\n\/\/ --- IMPOSTAZIONI ---\nconst POSTS_PER_PAGE = 3;\n\/\/ Ordina in modo discendente i post per data\nconst sortedPosts = (await getCollection('blog')).sort(\n\t\t(a: CollectionEntry<'blog'>, b: CollectionEntry<'blog'>) =>\n\t\t\t\tb.data.pubDate.getTime() - a.data.pubDate.getTime()\n);\nconst totalPosts = sortedPosts.length;\n---\n<Layout\n\ttitle=\"Il Mio Blog\"\n\tdescription=\"Una raccolta dei miei pensieri e tutorial sullo sviluppo web.\"\n>\n\t<h1 class=\"text-4xl font-extrabold text-gray-900 mb-8\">Tutti gli Articoli<\/h1>\n\t<div\n\t\tx-data={`{ visibleItems: ${POSTS_PER_PAGE} }`}\n\t\tx-cloak\n\t>\n\t\t<div class=\"grid gap-10\">\n\t\t\t{sortedPosts.length > 0 ? (\n\t\t\t\tsortedPosts.map((post, index) => (\n\t\t\t\t\t<div x-show={`${index} < visibleItems`}>\n\t\t\t\t\t\t<ArticleCard post={post} \/>\n\t\t\t\t\t<\/div>\n\t\t\t\t))\n\t\t\t) : (\n\t\t\t\t<p>Nessun articolo disponibile.<\/p>\n\t\t\t)}\n\t\t<\/div>\n\t\t<div class=\"mt-12 text-center\">\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tx-show={`visibleItems < ${totalPosts}`}\n\t\t\t\t@click={`visibleItems += ${POSTS_PER_PAGE}`}\n\t\t\t\tclass=\"bg-purple-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-purple-700 transition-colors duration-300\"\n\t\t\t>\n\t\t\t\tCarica Altri Articoli\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/div>\n<\/Layout>\n<style is:global>\n\t[x-cloak] {\n\t\tdisplay: none !important;\n\t}\n<\/style><\/code><\/pre>\n\n
getCollection<\/code>, che permette di recuperare tutti gli elementi da una collezione definita nel file \/src\/content\/config.ts<\/code>.<\/li>\ntype CollectionEntry<\/code> \u00e8 il tipo di TypeScript che descrive la struttura di un singolo articolo. Importandolo esplicitamente, rendiamo il codice pi\u00f9 sicuro e conforme alle best practice.<\/li>\nLayout<\/code> e ArticleCard<\/code>.<\/li>\ngetCollection('blog')<\/code>), li ordina e li memorizza in sortedPosts<\/code>.<\/li>\n<ArticleCard><\/code>.<\/li>\n<\/ul>\nPOSTS_PER_PAGE<\/code> articoli ad ogni clic:<\/p>\n\n
x-data<\/code> definisce un componente Alpine in cui { visibleItems: ${POSTS_PER_PAGE} }<\/code> rappresenta lo stato iniziale del componente (vedi Il local state di Alpine<\/a>);<\/li>\nx-cloak<\/code> nasconde gli elementi finch\u00e9 Alpine.js non \u00e8 completamente inizializzato, grazie allo stile CSS<\/a> definito con [x-cloak] { display: none !important; }<\/code>.<\/li>\nx-show<\/code> fa in modo che la div<\/code> venga visualizzata solo se ci sono elementi visibili (${index} < visibleItems<\/code>);<\/li>\nvisibleItems<\/code> disponibili;<\/li>\nvisibleItems<\/code> viene incrementata di POSTS_PER_PAGE<\/code>.<\/li>\n<\/ul>\n![\"La](\"https:\/\/www.html.it\/app\/uploads\/2025\/09\/blog-1.jpg\")
<\/p>\n