¿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.
¿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.
¿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!
El elemento <slot /> es un espacio reservado para contenido HTML externo, permitiéndote inyectar (o ingresar en la “ranura”) elementos hijos provenientes de otros archivos en el maquetado de tu componente.
Por defecto, todos los elementos hijos que le sean enviados a un componente serán renderizados en su <slot />.
---importHeaderfrom'./Header.astro';importLogofrom'./Logo.astro';importFooterfrom'./Footer.astro';const{ titulo }=Astro.props---<div id="content-wrapper"><Header/><Logo/><h2>{titulo}</h2><slot /><!-- aquí van los hijos --><Footer/></div>
👀 OJO:
Los slots son diferentes a las props, que son atributos enviados a un componente Astro y disponibles para utilizar con Astro.props. Los slots renderizan elementos HTML hijos donde se lo indique.
Buen resumen 👍🏻.
Me gustaría agregar que podemos nombrar los <slot name="header"/>. De esta forma, seremos capaces de "organizar" el contenido que pasamos como hijos a nuestro componente. Para ello, desde la llamada al componente solo debemos darle al hijo el atributo slot cuyo valor será el nombre del slot en el que queremos renderizarlo.
Por ejemplo, digamos que tenemos un titulo al que queremos pasarle por medio de los hijos, un icono y un texto. Entonces, podemos especificar en cuál slot queremos cada hijo, de forma separada:
---
import Title from "./Title.Astro";
---
<!-- More content -->
<Title>
<Fragment slot="text">Text with gradient</Fragment>
<i slot="icon" class="fas fas-icon"></i>
</Title>
<!-- More content -->
De esta forma, el icono se renderizara en el slot nombrado "icon" y el texto, en el slot nombrado "text", independientemente del orden en el que lo pongamos al pasarlos. En este ejemplo, hice uso del component Fragment para mostrar una forma en la que utilizar los slots nombrados sin tener que agregar un nodo HTML al marcado.
¿Sería como utilizar { children } en React?
Oscar lo menciona al final del video: A veces se queda algo pegado en la consola y es mejor reiniciarla para ver los cambios reflejados del Proyecto. Me sucedió en esta y en la clase anterior 😅
X2
Graciaaaaaaaaaaaaaas.
Plantillas en Astro
ℹ️ Definición
En Atomic Design, las plantillas son una organización que posee una definición de contenido basado en el recurso (ya sea por SEO o por estructura).
.
Las plantillas consisten, principalmente en grupos unidos para formar una narrativa de algún producto web. A este nivel, comenzamos a ver la definición formal de diseño según la interfaz de usuario.
.
Las plantillas son muy concretas y brindan contexto a todas las partes relacionadas o alusivas al contenido en curso.
.
!Image
Layouts Astro
Los layouts en Astro, son componentes en el subdirectorio ./src/layouts/ de que se utilizan para proporcionar una estructura de interfaz de usuario reutilizable, como una plantilla de página.
.
✨ Concepto clave
Convencionalmente, usamos el término Layout para los componentes de Astro que proporcionan elementos comunes de la interfaz de usuario compartidos entre páginas como encabezados, barras de navegación y pies de página.
.
Un layout, generalmete proporciona:
Una plantilla de página en HTML
Un componente enriquecido procesada antes que se disponga la página
.
Un componente de diseño Astro típico proporciona páginas Astro, Markdown o MDX con:
.
src/layouts/MySiteLayout.astro
---import BaseHead from '../components/BaseHead.astro';
import Footer from '../components/Footer.astro';
const { title } = Astro.props---<htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><BaseHeadtitle={title}/></head><body><nav><ahref="#">Home</a><ahref="#">Posts</a><ahref="#">Contact</a></nav><h2>{title}</h2><article><slot/><!-- your content is injected here --> </article>
<Footer /></body></html>
✨ Concepto clave
Astro posee por default un layout, en cuanto agreguemos una, será remplazada y deberemos declararla por página según sea el caso.
.
Desarrollo de layouts
Generalmente, los layouts son distribuciones que se discuten y desarrollan según las necesidades del producto, ya que, particularmente, facilitará el desarrollo de las posibles historias de usuario o requerimientos.
.
Supongamos el caso donde tenemos una aplicación móvil con los siguientes wireframes, donde tendríamos que adaptar 1 layout para 3 vistas diferentes:
.
tengo todo igual que como lo dice pero no me refleja los cambios de los estilos... ya mate el proceso y lo volvi a levantar pero no mr modifica nada
Hola Nolis revisa que el si esta correcta mente la url de layout: ""
a mi me funciono importando global.css
en tailwind no existe la clase "flex-block" asi que no se exactamente que clase quiso colocar ahi
Errores que a cualquiera nos pasa jajaja
lo lógico es que haya querido que el div hijo se comportara en bloque o columna, por lo cual lo correcto seria colocar la clase flex y luego la clase flex-col para lograr ese comportamiento con tailwind.
La etiqueta <slot> en Astro (y en otros frameworks como Vue) se utiliza para definir un espacio reservado en un componente en el que se puede insertar contenido dinámico. Esencialmente, actúa como un marcador que permite a los desarrolladores crear componentes más flexibles y reutilizables. El contenido que se pase al componente se renderiza en el lugar donde se encuentra el <slot>, permitiendo personalizar la presentación sin modificar la estructura del componente base.
Me sale duplicado el mensaje arriba... Alguien sabe en que parte estará el error?
Que son los props
que son los props
Son una forma de pasarle información a tus componentes. Puedes verlos como los parámetros de una función como una analogía. En este caso, a una función le pasas la info a través de sus parámetros, por ejemplo:
functionsaludar(person){return`Hola ${person}`}saludar("Juan")// -> Hola Juan
En el caso de un componente, resulta parecido. En este caso, un componente de Astro:
Saludo.astro (con Typescript)
---interfaceProps{person: string
}// person es como el parámetro de una función que obtienes desde un objeto llamado propsconst{ person }=Astro.props---<h2>Hola{person}</h2>
