Salta ai contenuti
Astro Astro

Pagine

Le pagine sono file che risiedono nella sottodirectory src/pages/ del tuo progetto Astro. Sono responsabili della gestione del routing, del caricamento dei dati e del layout generale della pagina per ogni pagina del tuo sito web.

File di pagina supportati

Astro supporta i seguenti tipi di file nella directory src/pages/:

Routing basato su file

Astro sfrutta una strategia di routing chiamata routing basato su file. Ogni file nella tua directory src/pages/ diventa un endpoint sul tuo sito in base al suo percorso file.

Un singolo file può anche generare più pagine utilizzando il routing dinamico. Ciò ti consente di creare pagine anche se i tuoi contenuti si trovano al di fuori della speciale directory /pages/, come in una raccolta di contenuti (EN) o un CMS (EN).

📚 Ulteriori informazioni sul routing in Astro.

Collegamento tra le pagine

Scrivi l´elemento standard HTML <a> nelle tue pagine Astro per collegarti ad altre pagine del tuo sito.

Ad esempio, per collegarsi a https://example.com/authors/sonali/ da qualsiasi altra pagina su “example.com”:

src/pages/index.astro
Ulteriori informazioni <a href="/authors/sonali/">su Sonali</a>.

Pagine Astro

Le pagine Astro utilizzano l’estensione del file .astro e supportano le stesse funzionalità di Componenti Astro.

src/pages/index.astro
<html lang="en">
  <head>
    <title>My Homepage</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>

Una pagina deve produrre un documento HTML completo. Se non incluso esplicitamente, Astro aggiungerà la dichiarazione <!DOCTYPE html> necessaria e il contenuto <head> a qualsiasi componente .astro situato all’interno di src/pages/ per impostazione predefinita. Puoi disattivare questo comportamento in base al componente contrassegnandolo come pagina parziale.

Per evitare di ripetere gli stessi elementi HTML su ogni pagina, puoi spostare gli elementi comuni <head> e <body> nei tuoi componenti di layout. Puoi utilizzare tutti i componenti di layout che desideri.

src/pages/index.astro
---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>My page content, wrapped in a layout!</p>
</MySiteLayout>

📚 Leggi di più sui componenti di layout in Astro.

Pagine Markdown/MDX

Astro tratta anche qualsiasi file Markdown (.md) all’interno di src/pages/ come pagine del tuo sito web finale. Se hai l´integrazione MDX installata (EN), tratta anche i file MDX (.mdx) allo stesso modo. Questi sono comunemente usati per pagine ricche di testo come post di blog e documentazione.

Le raccolte di contenuti delle pagine Markdown o MDX (EN) in src/content/ possono essere utilizzate per generare pagine dinamicamente.

I layout di pagina sono particolarmente utili per i file Markdown. I file Markdown possono utilizzare la speciale proprietà frontmatter layout per specificare un componente layout che avvolgerà il contenuto Markdown in un completo documento di pagina, <html>...</html>.

src/pages/page.md
---
layout: '../layouts/MySiteLayout.astro'
title: 'My Markdown page'
---
# Title


This is my page, written in **Markdown.**

📚 Ulteriori informazioni su Markdown (EN) in Astro.

Pagine HTML

I file con estensione .html possono essere inseriti in src/pages/ e utilizzati direttamente come pagine del tuo sito. Tieni presente che alcune funzionalità chiave di Astro non sono supportate nei componenti HTML.

Pagina di errore 404 personalizzata

Per una pagina di errore 404 personalizzata, puoi creare un file 404.astro o 404.md in /src/pages.

Questo creerà una pagina 404.html. La maggior parte dei fornitori di servizi di hosting (EN) la troveranno e la utilizzeranno.

Parziali della pagina

Aggiunto in: astro@3.4.0

I parziali sono componenti di pagina situati all’interno di src/pages/ che non sono destinati a essere visualizzati come pagine complete.

Come i componenti situati all’esterno di questa cartella, questi file non includono automaticamente la dichiarazione <!DOCTYPE html>, né alcun contenuto <head> come stili e script specifici per la pagina.

Tuttavia, poiché si trovano nella directory speciale src/pages/, l’HTML generato è disponibile in un URL corrispondente al percorso del file. Ciò consente a una libreria di rendering (ad esempio htmx, Stimulus, jQuery) di accedervi sul client e caricare sezioni di HTML dinamicamente su una pagina senza aggiornamento del browser o navigazione della pagina.

I parziali, se combinati con una libreria di rendering, forniscono un’alternativa alle isole Astro e ai tag<script> (EN) per la creazione di contenuto dinamico in Astro.

I file di pagina che possono esportare un valore (ad esempio .astro, .mdx) possono essere contrassegnati come parziali.

Configura un file all’interno della directory src/pages/ come parziale aggiungendo la seguente esportazione:

src/pages/partial.astro
---
export const partial = true;
---


<li>Sono un parziale!</li>

L’export const partial deve essere identificabile staticamente. Può avere il valore di:

  • Il valore booleano true.
  • Una variabile di ambiente che utilizza import.meta.env come import.meta.env.USE_PARTIALS.

Utilizzo con una libreria

I partial vengono utilizzati per aggiornare dinamicamente una sezione di una pagina utilizzando una libreria come htmx.

L’esempio seguente mostra un attributo hx-post impostato sull’URL di un parziale. Il contenuto della pagina parziale verrà utilizzato per aggiornare l’elemento HTML di destinazione su questa pagina.

src/pages/index.astro
<html>
  <head>
    <title>My page</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"></script>
  </head>
</html>
<section>
  <div id="parent-div">Destinazione qui</div>


  <button hx-post="/partials/clicked/"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="innerHTML"
  >
      Cliccami!
  </button>
</section>

Il parziale .astro deve esistere nel percorso del file corrispondente e includere un’esportazione che definisce la pagina come parziale:

src/pages/partials/clicked.astro
---
export const partial = true;
---
<div>Mi hanno cliccato!</div>

Consulta la documentazione htmx per ulteriori dettagli sull’utilizzo di htmx.