Creación de Plantillas en Astro para Páginas Markdown
Clase 12 de 25 • Curso de Creación de Páginas Web con Astro
Resumen
¿Cómo utilizar plantillas en Astro para mejorar tu proyecto?
La incorporación de plantillas en tu proyecto de Astro puede optimizar significativamente la reutilización de código, permitiendo una estructura más homogénea y eficiente tanto en páginas como en componentes. Este enfoque es crucial para mantener un orden y uniformidad en el desarrollo de software, posibilitando el ahorro de tiempo y esfuerzo al estructurar configuraciones repetitivas y estilos visuales.
¿Qué es una plantilla base en Astro?
Una plantilla base en Astro es un componente que define estilos y estructuras HTML estándar, beneficiando a las páginas escritas en Markdown. Para iniciar, se crea un componente llamado base.astro que establecerá una estructura central para el layout. Aquí, se utiliza el valor slot para encapsular contenido, lo cual permite flexibilidad y dinamismo en la presentación del contenido de las páginas.
---
export interface Props {
title: string;
}
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{title}</title>
</head>
<body>
<slot />
</body>
</html>
¿Cómo integramos Tailwind CSS para darle estilo al layout?
Tailwind CSS se utiliza para dotar de un diseño elegante y moderno al cuerpo de las páginas, implementando variables de color y dimensiones específicas. Se aplican estilos que incluyen background-color, con una tonalidad slate, y un color 400 para variaciones visuales. Además, se considera el uso de clases como FlexBlock y MaxWidth XL para adaptar la presentación a diferentes resoluciones.
<body class="bg-slate-400 text-gray-800">
<div class="flex max-w-xl mx-auto mt-4 p-4 bg-white shadow rounded-lg">
<slot />
</div>
</body>
¿Cómo aplicar una plantilla a un archivo Markdown?
Una vez que la plantilla está creada, se debe indicar a los archivos Markdown que deben utilizar esta estructura base. Para ello, se añade una referencia en el archivo correspondiente en el directorio pages, asegurando que se carga el layout especificado.
---
layout: '../layouts/base.astro'
title: 'Acerca de'
---
# Acerca de
Este es el contenido de la página sobre nosotros...
¿Qué hacer si los cambios no se reflejan?
En caso de que los cambios no sean visibles, es recomendable revisar el entorno de desarrollo local. Errores o advertencias en la terminal pueden ser señales de que algo no está funcionando correctamente. Un reinicio del proceso con el comando npm run dev puede resolver muchos de estos problemas, garantizando que las modificaciones sean visibles.
Usar plantillas en Astro no solo mejora la organización del proyecto, sino que nos permite aprovechar la potencia del contenido en Markdown para brindar un diseño consistente. Te animo a que experimentes y enriquezcas esta configuración, compartiendo tus resultados para aprender juntos. ¡La práctica constante es clave para el dominio de estas herramientas!