You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

1 Días
3 Hrs
51 Min
56 Seg

Plantillas en Astro

12/25
Resources

How to use templates in Astro to improve your project?

Incorporating templates in your Astro project can significantly optimize code reuse, allowing for a more homogeneous and efficient structure in both pages and components. This approach is crucial to maintain order and uniformity in software development, saving time and effort in structuring repetitive configurations and visual styles.

What is a base template in Astro?

A base template in Astro is a component that defines standard HTML styles and structures, benefiting pages written in Markdown. To start with, a component called base.astro is created which will establish a core structure for the layout. Here, the slot value is used to encapsulate content, which allows flexibility and dynamism in the presentation of page content.

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

How do we integrate Tailwind CSS to style the layout?

Tailwind CSS is used to give a sleek, modern design to the body of pages by implementing specific color variables and dimensions. Styles are applied that include background-color, with a slate shade, and a color 400 for visual variations. In addition, the use of classes such as FlexBlock and MaxWidth XL are considered to adapt the presentation to different resolutions.

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

How to apply a template to a Markdown file?

Once the template is created, Markdown files must be told that they must use this base structure. To do this, a reference is added to the corresponding file in the pages directory, ensuring that the specified layout is loaded.

---layout: '../layouts/base.astro'title: 'About'---
 #About
This is the content of the about page...

What to do if the changes are not reflected?

In case the changes are not visible, it is recommended to check the local development environment. Errors or warnings in the terminal may be signs that something is not working properly. A restart of the process with the npm run dev command can solve many of these problems, ensuring that the modifications are visible.

Using templates in Astro not only improves project organization, but allows us to leverage the power of Markdown content to provide a consistent layout. I encourage you to experiment and enrich this setup, sharing your results to learn together - constant practice is key to mastering these tools!

Contributions 8

Questions 3

Sort by:

Want to see more contributions, questions and answers from the community?

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 />
  <h1>{titulo}</h1>
  <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.

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 😅

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

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
---
<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>
    <h1>{title}</h1>
    <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:
.

![](https://static.platzi.com/media/user_upload/image-b308defe-4cd9-4ae4-8c98-d2bdf2cb348c.jpg) 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

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

dejo por acá como va quedando mi layout ![](https://static.platzi.com/media/user_upload/image-eaac3a5c-80cf-4b47-9cb0-f99e4c443087.jpg)
![](https://static.platzi.com/media/user_upload/image-e01441b3-1e9b-4a00-92d0-8aeb6b1441f0.jpg) Realice un leve cambio en mi proyecto
No olvidar reiniciar el proceso principal si los resultados no se visualizan en el browser