| type | title | i18nReady | description |
|---|---|---|---|
tutorial |
Combina plantillas para obtener lo mejor de ambos mundos |
true |
Tutorial: Crea tu primer blog con Astro —
Agrega tu plantilla de página básica a la plantilla que formatea tus publicaciones de blog. |
import Blanks from '/components/tutorial/Blanks.astro';
import Box from '/components/tutorial/Box.astro';
import Checklist from '/components/Checklist.astro';
import MultipleChoice from '/components/tutorial/MultipleChoice.astro';
import Option from '/components/tutorial/Option.astro';
import PreCheck from '/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
Ahora que ya has añadido una plantilla a cada entrada del blog, ¡es hora de hacer que tus entradas del blog se parezcan al resto de páginas de tu sitio web!
- Anidar la plantilla de tus publicaciones de blog dentro de la plantilla principal de tu páginaYa tienes un BaseLayout.astro para definir la plantilla general de tus páginas.
El MarkdownPostLayout.astro te proporciona algunas plantillas adicionales para las propiedades comunes de las publicaciones de tu blog, como title y date, pero las publicaciones de tu blog no tienen el mismo aspecto que el resto de páginas de tu sitio. Puedes adaptar el aspecto de las entradas de tu blog al resto de tu sitio anidando plantillas.
```astro title="src/layouts/MarkdownPostLayout.astro" ins={2,5,12}
---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
<h1>{frontmatter.title}</h1>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
<p><em>{frontmatter.description}</em></p>
<p>Escrito por: {frontmatter.author}</p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<slot />
</BaseLayout>
```
-
Comprueba la vista previa de tu navegador en
http://localhost:4321/posts/post-1. Ahora debería ver el contenido renderizado por:- Tu plantilla de página principal, incluyendo tus estilos, enlaces de navegación y pie de página social.
- Tu plantilla de plublicación de blog, incluyendo propiedades del frontmatter como la descripción, fecha, título e imagen.
- Tu contenido individual en formato Markdown de tu publicación de blog, incluyendo sólo el texto escrito en esta publicación.
-
Observa que el título de tu página se muestra ahora dos veces, una por cada plantilla.
Elimina la línea que muestra el título de tu página de
MarkdownPostLayout.astro:<BaseLayout pageTitle={frontmatter.title}> <h1>{frontmatter.title}</h1> <p>{frontmatter.pubDate.toString().slice(0,10)}</p> <p><em>{frontmatter.description}</em></p> <p>Escrito por: {frontmatter.author}</p> <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} /> <slot /> </BaseLayout>
-
Comprueba de nuevo la vista previa de tu navegador en
http://localhost:4321/posts/post-1y verifica que esta línea ya no aparece y que su título sólo se muestra una vez. Realiza cualquier otro ajuste necesario para asegurarte de que no tienes contenido duplicado.
Asegúrate de que:
- Cada publicación muestra la misma plantilla de página y no falta contenido. (Si a una de tus publicaciones le falta contenido, comprueba sus propiedades frontmatter).
- Ningún contenido se duplica en una página. (Si algo se está renderizando dos veces, asegúrate de eliminarlo de `MarkdownPostLayout.astro`).
Si quieres personalizar la plantilla de tu página, puedes hacerlo.
-
Esto le permite anidar una plantilla dentro de otra y aprovechar las ventajas de trabajar con piezas modulares.
despliegue continuo diseño adaptable diseño basado en componentes -
Las plantillas múltiples son especialmente útiles para proyectos que contienen páginas Markdown, como...
blog panel de control aplicación de chat -
¿Cuál de ellos proporciona plantillas para todas tus páginas?
`index.astro` `BaseLayout.astro` `post-1.md`