Crear un archivo de entradas de blog
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!
Prepárate para...
- 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
<BlogPost />
para cada elemento de la lista
Muestra dinámicamente una lista de entradas
Sección titulada Muestra dinámicamente una lista de entradas-
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. -
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: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.md
ensrc/pages/posts/
y añadiendo algo de contenido Markdown. Asegúrate de incluir al menos las propiedades frontmatter utilizadas a continuación. -
Vuelve a visitar la página de tu blog en la vista previa de tu navegador en
http://localhost:4321/blog
y busca una lista actualizada con cuatro elementos, incluida tu nueva entrada de blog
Desafío: Crea un componente BlogPost
Sección titulada Desafío: Crea un componente BlogPostIntenta 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:
Ampliar para ver los pasos
-
Crear un nuevo componente en
src/components/
.Mostrar el nombre del archivo
-
Escribe la línea de código en tu componente para que pueda recibir un
title
y unaurl
comoAstro.props
.Mostrar el código
-
Añade la plantilla utilizada para crear cada elemento de la lista de entradas de tu blog.
Mostrar el código
-
Importa el nuevo componente a tu página Blog.
Mostrar el código
-
Compruébalo tu mismo: mira el código del componente terminado.
Mostrar el código
Pon a prueba tus conocimientos
Sección titulada Pon a prueba tus conocimientosSi tu componente de Astro contiene la siguiente línea de código:
Elige la sintaxis que podrías escribir para representar:
-
El título de la tercera entrada de tu blog.
-
Un enlace a la URL de tu primera entrada en el blog.
-
Un componente para cada entrada, que muestra la fecha de su última actualización.