| type | title | i18nReady | description |
|---|---|---|---|
tutorial |
Crear un archivo de entradas de blog |
true |
Tutorial: Construye tu primer blog de Astro -
Utiliza Astro.glob() para acceder a los datos de los archivos de tu proyecto |
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 tienes unas cuantas entradas de blog a las que enlazar, ¡es hora de configurar la página Blog para que cree una lista de ellas automáticamente!
- Acceder a los datos de todos tus puestos a la vez utilizando `Astro.glob()`. - Mostrar una lista de entradas generada dinámicamente en la página del blog - Refactorizar para utilizar un componente `` para cada elemento de la lista 1. Añade el siguiente código a `blog.astro` para devolver información sobre todos tus archivos Markdown. `Astro.glob()` devolverá un array de objetos, uno por cada entrada del blog.```astro title="src/pages/blog.astro" ins={3}
---
import BaseLayout from '../layouts/BaseLayout.astro'
const allPosts = await Astro.glob('../pages/posts/*.md');
const pageTitle = "Mi blog de aprendizaje de Astro";
---
<BaseLayout pageTitle={pageTitle}>
<p>Aquí es donde publicaré sobre mi viaje de aprendizaje de Astro.</p>
<ul>
<li><a href="/posts/post-1/">Publicación 1</a></li>
<li><a href="/posts/post-2/">Publicación 2</a></li>
<li><a href="/posts/post-3/">Publicación 3</a></li>
</ul>
</BaseLayout>
```
-
Para generar toda la lista de entradas dinámicamente, utilizando los títulos y las URL de las entradas, sustituye las etiquetas
<li>individuales por el siguiente código de Astro:--- import BaseLayout from '../layouts/BaseLayout.astro' const allPosts = await Astro.glob('../pages/posts/*.md'); const pageTitle = "Mi blog de aprendizaje de Astro"; --- <BaseLayout pageTitle={pageTitle}> <p>Aquí es donde publicaré sobre mi viaje de aprendizaje de Astro.</p> <ul> <li><a href="/posts/post-1/">Publicación 1</a></li> <li><a href="/posts/post-2/">Publicación 2</a></li> <li><a href="/posts/post-3/">Publicación 3</a></li> {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)} </ul> </BaseLayout>
La lista completa de entradas de tu blog se genera ahora dinámicamente, mapeando sobre el array devuelto por
Astro.glob(). -
Añade una nueva entrada de blog creando un nuevo archivo
post-4.mdensrc/pages/posts/y añadiendo algo de contenido Markdown. Asegúrate de incluir al menos las propiedades frontmatter utilizadas a continuación.--- layout: ../../layouts/MarkdownPostLayout.astro title: Mi cuarta entrada en el blog author: Alumno de Astro description: "Esta entrada aparecerá sola!" image: url: "https://docs.astro.build/default-og-image.png" alt: "La palabra 'astro' contra una ilustración de planetas y estrellas." pubDate: 2022-08-08 tags: ["astro", "éxitos"] --- Esta entrada debería aparecer con las demás entradas de mi blog, porque `Astro.glob()` está devolviendo una lista de todas mis entradas para crear mi lista.
-
Vuelve a visitar la página de tu blog en la vista previa de tu navegador en
http://localhost:4321/blogy busca una lista actualizada con cuatro elementos, incluida tu nueva entrada de blog
Intenta por tu cuenta realizar todos los cambios necesarios en tu proyecto de Astro para que puedas utilizar el siguiente código para generar tu lista de entradas de blog:
<ul>
{allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
{allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
</ul>Ampliar para ver los pasos
1. Crear un nuevo componente en `src/components/`.<details>
<summary>Mostrar el nombre del archivo</summary>
```
BlogPost.astro
```
</details>
-
Escribe la línea de código en tu componente para que pueda recibir un
titley unaurlcomoAstro.props.Mostrar el código
```astro --- // src/components/BlogPost.astro const { title, url } = Astro.props; --- ``` -
Añade la plantilla utilizada para crear cada elemento de la lista de entradas de tu blog.
Mostrar el código
```astro- {title}
``` -
Importa el nuevo componente a tu página Blog.
Mostrar el código
```astro title="src/pages/blog.astro" ins={3} --- import BaseLayout from '../layouts/BaseLayout.astro'; import BlogPost from '../components/BlogPost.astro'; const allPosts = await Astro.glob('../pages/posts/*.md'); const pageTitle = "Mi blog de aprendizaje de Astro"; --- ``` -
Compruébalo tu mismo: mira el código del componente terminado.
Mostrar el código
```astro title="src/components/BlogPost.astro" --- const { title, url } = Astro.props ---- {title}
``` ```astro title="src/pages/blog.astro" ins={3,10} --- import BaseLayout from '../layouts/BaseLayout.astro'; import BlogPost from '../components/BlogPost.astro'; const allPosts = await Astro.glob('../pages/posts/*.md'); const pageTitle = "Mi blog de aprendizaje de Astro" ---Aquí es donde publicaré sobre mi viaje de aprendizaje de Astro.
-
{allPosts.map((post) => )}
Si tu componente de Astro contiene la siguiente línea de código:
---
const myPosts = await Astro.glob('../pages/posts/*.md');
---Elige la sintaxis que podrías escribir para representar:
-
El título de la tercera entrada de tu blog.
`myPosts.map((post) => )` `myPosts[2].frontmatter.title` `¡¡Primera publicación!!` -
Un enlace a la URL de tu primera entrada en el blog.
`myPosts.map((post) => )` `myPosts[2].frontmatter.title` `¡¡Primera publicación!!` -
Un componente para cada entrada, que muestra la fecha de su última actualización.
`myPosts.map((post) => )` `myPosts[2].frontmatter.title` `¡¡Primera publicación!!`