Les pàgines són responsables de gestionar l'encaminament, la càrrega de dades i la disposició general de cada pàgina d'un lloc web.
Introducció
Entorn de treball
Astro proporciona una eina CLI per crear ràpidament un nou projecte Astro.
Selecciona la plantilla “Empty” per començar des de zero, i omet la instal·lació de dependències per poder instal·lar-les amb Deno més endavant:
Executa deno install amb el flag --allow-scripts per executar qualsevol script del cicle de vida de npm:
Astro inclou una comanda astro add per automatitzar la configuració d’integracions oficials.
Configura la integració amb Tailwind:
Per veure quines comandes tens disponibles, executa deno task:
Pots iniciar el servidor amb deno task dev:
Obre el navegador a http://localhost:4321
Pàgines
Les pàgines són fitxers que es troben al subdirectori src/pages/ del teu projecte Astro.
Edita la pàgina src/pages/index.astro:
<body>
<h1>Birds</h1>
</body>Verifica que el navegador mostra la pàgina modificada.
Enrutament
Astro utilitza una estratègia d’enrutament anomenada enrutament basat en fitxers.
Cada fitxer al teu directori src/pages/ es converteix en un endpoint al teu lloc web basat en la seva ruta de fitxer.
Crea una pàgina about.astro en el directori src/pages (copia el contingut de index.astro).
Modifica el contingut de l’element <body>
<body>
<h1>All About Birds</h1>
<p>Your Online Guide To Birds And Birdwatching</p>
</body>Afegeix enllaços de navegació HTML abans del teu <h1> a la part superior de les dues pàgines (index.astro i about.astro):
<a href="/">Home</a>
<a href="/about/">About</a>
<h1>Earth/h1>Comprova que pots fer clic en aquests enllaços per moure’t endavant i enrere entre les pàgines del teu lloc web.
mdx
Els fitxers MDX s’utilitzen per crear contingut.
Configura la integració amb MDX:
Crea un nou fitxer (buit)
Verifica que el servidor respon a http://localhost:4321/bird/eagle
Obre una pàgina que no existeix, per exemple http://localhost:4321/bird/swallow
Note the different output when previewing an “empty” page, and one that doesn’t exist. This will help you troubleshoot in the future.
Modifica el fitxer:
---
title: Eagle
tags: ["prey"]
---
Any of many large, heavy-beaked, big-footed birds of prey belonging to the family Accipitridae, found worldwide. Eagles are generally larger and more powerful than hawks and may resemble a vulture in build and flight characteristics, but they have a fully feathered (often crested) head and strong feet equipped with great curved talons. Most species subsist mainly on live prey, which they generally capture on the ground. Eagles have been a symbol of war and imperial power since Babylonian times. They mate for life. They nest in inaccessible places and use the same nest each year. Species vary from 24 in. to 3.3 ft (60 cm–1 m) long. The sea eagles include the bald eagle.La informació a la part superior del fitxer, dins de les tanques de codi, s’anomena frontmatter. Aquestes dades són informació sobre la teva pàgina que Astro pot utilitzar. No apareix a la pàgina automàticament, però hi podràs accedir més endavant per millorar el teu lloc web.
Contingut dinàmic
A continuació modifica el fitxer src/pages/index.astro.
Variables
-
Afegeix la següent línia de JavaScript al frontmatter, entre les
tanques de codi:astro title="src/pages/index.astro" --- const title = 'Home' --- -
Reemplaça tant el títol com l’encapçalament amb la variable dinàmica
{title}.astro title="src/pages/index.astro" --- const title = 'Home' --- <html lang="en"> <head> <title>{title}</title> </head> <body> <h1>{title}</h1> </body> </html>
Expressions
-
Afegeix el següent JavaScript al teu frontmatter, entre les tanques de codi:
astro title="src/pages/index.astro" --- const articles = [ {"title": "Is the Smoke from Wildfires Dangerous to Birds?", "date": "May 7, 2025"}, {"title": "Birding Festivals and Events", "date": "May 5, 2025"}, ] --- -
Després, afegeix el següent codi a la teva plantilla HTML, sota el contingut existent:
astro title="src/pages/index.astro" <h2>Articles</h2> <ul> {articles.map((article) => <li>{article.date} - {article.title}</li>)} </ul>
Renderitzar elements condicionalment
També pots utilitzar les teves variables de script per escollir si renderitzar o no elements individuals del contingut del teu <body> HTML.
TODO
Segueix https://docs.astro.build/en/tutorial/2-pages/3/
Cloudflare
Construeix el lloc estàtic al directori per defecte dist:
Desplega el lloc a Cloudflare (utilitza un nom de projecte diferent):
El primer cop el lloc web tarda uns minuts en estar accessible.
Pots modificar el fitxer package.json per afegir una tasca deploy:
// package.json
"scripts": "deploy": "bunx wrangler pages deploy ./dist --project-name xtec-astro"
}
}