Plantillas
Las plantillas son componentes de Astro para proporcionar una estructura reutilizable, como una plantilla de página.
Convencionalmente usamos el término “plantilla” para proporcional elementos compartidos en la interfaz del usuario por medio de páginas, como encabezados, barras de navegación y pies de página. Una plantilla proporciona a Astro, Markdown o páginas MDX con:
- una página shell (con estiquetas
<html>
,<head>
y<body>
) - un
<slot/>
para especificar dónde colocar el contenido de la página.
Pero, ¡no hay nada especial acerca de los componentes plantilla! Pueden aceptar props e importar y usar otros componentes como cualquier otro componente de Astro. Pueden incluir componentes de framework y scripts de lado del cliente. Ni siquiera tienen que proporcionar un plantilla entera, en su lugar se pueden utilizar como plantillas parciales.
Sin embargo, si un componente de plantilla contiene una página shell, su elemento <html>
debe ser el padre de todos los demás elementos en el componente. Todos los elementos <style>
o <script>
deben estar encerrados por las etiquetas <html>
.
Los componentes de plantilla se colocan comúnmente en la carpeta src/layouts
en tu proyecto, pero esto no es un requisito; puedes elegir ubicarlos en cualquier lugar de tu proyecto. Incluso puedes colocar las plantillas junto a tus páginas mediante el uso de un prefijo _
en los nombres de las plantillas.
Plantilla de ejemplo
Sección titulada Plantilla de ejemplo---import BaseHead from '../components/BaseHead.astro';import Footer from '../components/Footer.astro';const { title } = Astro.props;---<html lang="es"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <BaseHead title={title} /> </head> <body> <nav> <a href="#">Inicio</a> <a href="#">Publicaciones</a> <a href="#">Contacto</a> </nav> <h1>{title}</h1> <article> <slot /> <!-- tu contenido es inyectado aquí --> </article> <Footer /> </body> <style> h1 { font-size: 2rem; } </style></html>