Cursos Empresas Blog Live Conf Eventos Precios

0:008:49

Recursos

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!

Creación de Plantillas en Astro para Páginas Markdown

Curso de Creación de Páginas Web con Astro

Clase 12 / 25

Ver clases

Creación de Plantillas en Astro para Páginas Markdown

Curso de Creación de Páginas Web con Astro

Clase 12 de 25

Clase 12 / 25

Creación de Plantillas en Astro para Páginas Markdown

Curso de Creación de Páginas Web con Astro

Clase 12 / 25

Ver clases

--- 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>

Comentarios

Ameth Ordoñez Erazo#4622629

Slots

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 />.

---
import Header from './Header.astro';
import Logo from './Logo.astro';
import Footer from './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.

Javier Alvarez Tarazona#4736710

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 😅

Emmanuel Rodríguez#4698138

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

---
import Header from './Header.astro';
import Logo from './Logo.astro';
import Footer from './Footer.astro';

const { titulo } = Astro.props
---
<div id="content-wrapper">
  <Header />
  <Logo />
  <h2>{titulo}</h2>
  <slot />  <!-- aquí van los hijos -->
  <Footer />
</div>

---
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 -->

---
import BaseHead from '../components/BaseHead.astro';
import Footer from '../components/Footer.astro';
const { title } = Astro.props
---
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <BaseHead title={title}/>
  </head>
  <body>
    <nav>
      <a href="#">Home</a>
      <a href="#">Posts</a>
      <a href="#">Contact</a>
    </nav>
    <h2>{title}</h2>
    <article>
      <slot /> <!-- your content is injected here -->
    </article>
    <Footer />
  </body>
</html>

---
interface Props {
	person: string
}

// person es como el parámetro de una función que obtienes desde un objeto llamado props
const { person } = Astro.props
---

<h2>Hola {person}</h2>

Comentarios

Ameth Ordoñez Erazo#4622629

Slots

---
import Header from './Header.astro';
import Logo from './Logo.astro';
import Footer from './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.

Javier Alvarez Tarazona#4736710

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 😅

Emmanuel Rodríguez#4698138

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).

---
import Header from './Header.astro';
import Logo from './Logo.astro';
import Footer from './Footer.astro';

const { titulo } = Astro.props
---
<div id="content-wrapper">
  <Header />
  <Logo />
  <h2>{titulo}</h2>
  <slot />  <!-- aquí van los hijos -->
  <Footer />
</div>

---
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 -->

---
import BaseHead from '../components/BaseHead.astro';
import Footer from '../components/Footer.astro';
const { title } = Astro.props
---
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <BaseHead title={title}/>
  </head>
  <body>
    <nav>
      <a href="#">Home</a>
      <a href="#">Posts</a>
      <a href="#">Contact</a>
    </nav>
    <h2>{title}</h2>
    <article>
      <slot /> <!-- your content is injected here -->
    </article>
    <Footer />
  </body>
</html>

---
interface Props {
	person: string
}

// person es como el parámetro de una función que obtienes desde un objeto llamado props
const { person } = Astro.props
---

<h2>Hola {person}</h2>

Comentarios (12)12 comentarios

Ameth Ordoñez Erazo

Hace 4 años

Eudes Serpa

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:

Title.astro

<h2>
	<slot name="icon">
	<span class="text-gradient">
		<slot name="text">
	</span>
</h2>

Hero.astro

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.

Carlos Rubén Díaz Gutiérrez

Hace 3 años

¿Sería como utilizar { children } en React?

Javier Alvarez Tarazona

Alonso Americo Molero Colina

Ramiro José López Velásquez

Hace 2 años

Graciaaaaaaaaaaaaaas.

Emmanuel Rodríguez

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

✨ 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: .

Nolis Maldonado

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

Carlos Alberto Granada Vasquez

Hola Nolis revisa que el si esta correcta mente la url de layout: ""

Andrés Muñoz

Hace un año

a mi me funciono importando global.css

Andres Eduardo Maneiro Antunez

en tailwind no existe la clase "flex-block" asi que no se exactamente que clase quiso colocar ahi

Brandon Lee Aguero Fernandez

Errores que a cualquiera nos pasa jajaja

Sebastián Peña

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.

Daniel Gil

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.

Ana Liotta

Me sale duplicado el mensaje arriba... Alguien sabe en que parte estará el error?

Juan José Mamani Tarqui

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:

function saludar(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)

desdeOtroArchivo.astro

---
import Saludo from ".../Saludo.astro"
---
...
<Saludo person="Juan" /> // -> Hola Juan
...

Julian Roa Villamil

dejo por acá como va quedando mi layout

Jhonny Pimiento

Realice un leve cambio en mi proyecto

Jesús Rosas Ramírez

No olvidar reiniciar el proceso principal si los resultados no se visualizan en el browser

Recursos

Resumen

Creación de Plantillas en Astro para Páginas Markdown

Creación de Plantillas en Astro para Páginas Markdown

Creación de Plantillas en Astro para Páginas Markdown

Progreso del curso

¿Qué es Astro?

Primeros Pasos

Proyecto

Astro API

Astro Islands

Deploy

Bonus

Cierre

Creación de Plantillas en Astro para Páginas Markdown

Creación de Plantillas en Astro para Páginas Markdown

Recursos

Resumen

¿Cómo utilizar plantillas en Astro para mejorar tu proyecto?

¿Qué es una plantilla base en Astro?

¿Cómo integramos Tailwind CSS para darle estilo al layout?

¿Cómo aplicar una plantilla a un archivo Markdown?

¿Qué hacer si los cambios no se reflejan?

Comentarios

Slots

Plantillas en Astro

Recursos

Resumen

¿Cómo utilizar plantillas en Astro para mejorar tu proyecto?

¿Qué es una plantilla base en Astro?

¿Cómo integramos Tailwind CSS para darle estilo al layout?

¿Cómo aplicar una plantilla a un archivo Markdown?

¿Qué hacer si los cambios no se reflejan?

Comentarios

Slots

Plantillas en Astro

Layouts Astro

Desarrollo de layouts