Skip to content

Commit

Permalink
i18n(es): update 5-astro-api/2 (withastro#7958)
Browse files Browse the repository at this point in the history 
Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>
  • Loading branch information
@dreyfus92 @yanthomasdev @wpplumber
2 people authored and wpplumber committed May 15, 2024
1 parent ff030f9 commit e292bd9
Showing 1 changed file with 60 additions and 56 deletions.
116 changes: 60 additions & 56 deletions src/content/docs/es/tutorial/5-astro-api/2.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ 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';

<PreCheck>
- Crear una página para generar varias páginas
Expand All @@ -24,7 +23,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
Puedes crear conjuntos completos de páginas de forma dinámica utilizando archivos `.astro` que exporten una función `getStaticPaths()`.

## Crea páginas dinámicamente

<Steps>
1. Crea un nuevo archivo en `src/pages/tags/[tag].astro`. (Tendrás que crear una nueva carpeta) Observa que el nombre del archivo (`[tag].astro`) utiliza corchetes. Pega el siguiente código en el archivo:

```astro title="src/pages/tags/[tag].astro"
Expand Down Expand Up @@ -56,10 +55,11 @@ Puedes crear conjuntos completos de páginas de forma dinámica utilizando archi
3. Asegúrate de que cada entrada del blog contiene al menos una etiqueta, escrita como un array, por ejemplo `tags: ["bloguear"]`.

4. Visita `http://localhost:4321/tags/astro` en la vista previa de tu navegador y deberías ver una página, generada dinámicamente a partir de `[tag].astro`. Comprueba que también tienes páginas creadas para cada una de tus etiquetas en `/tags/éxitos`, `/tags/comunidad`, y `/tags/aprender%20en%20publico`, etc., o en cada una de tus etiquetas personalizadas. Es posible que primero tengas que salir y reiniciar el servidor de desarrollo para ver estas nuevas páginas.

</Steps>

## Utiliza props en rutas dinámicas

<Steps>
1. Añade los siguientes props a tu función `getStaticPaths()` para que los datos de todas las entradas de tu blog estén disponibles para cada ruta de página.

Asegúrate de dar a cada ruta de tu array los nuevos props, y luego haz que esos props estén disponibles para tu plantilla de componentes fuera de tu función.
Expand Down Expand Up @@ -120,6 +120,7 @@ Puedes crear conjuntos completos de páginas de forma dinámica utilizando archi
```

5. Verifica la vista previa de tu navegador para las páginas de etiquetas individuales, y ahora deberías ver una lista de todas tus entradas de blog que contienen esa etiqueta particular.
</Steps>

<Box icon="question-mark">

Expand Down Expand Up @@ -166,71 +167,74 @@ El siguiente ejemplo muestra cómo sustituir el código de esta página por un c
Aunque parezca un reto, puedes intentar seguir los pasos para construir esta función por ti mismo. Si no quieres repasar el código JavaScript requerido en este momento, puedes saltar a la [versión final del código](#ejemplo-de-código-final) y usarlo directamente en tu proyecto, reemplazando el contenido existente.
:::

### 1. Comprueba que todas las entradas de tu blog contienen etiquetas
<Steps>

Revisa cada una de tus páginas Markdown existentes y asegúrate de que cada entrada contiene un array `tags` en su frontmatter. Incluso si sólo tiene una etiqueta, debe escribirse como un array, por ejemplo, `tags: ["bloguear"]`.
1. Revisa que todas tus entradas de blog contengan etiquetas.

### 2. Crea un array con todas las etiquetas existentes
Vuelve a revisar cada una de tus páginas Markdown existentes y asegúrate de que cada entrada contenga un array `tags` en su frontmatter. Incluso si sólo tienes una etiqueta, debería estar escrita como un array, por ejemplo, `tags: ["blogging"]`.

Añade el siguiente código para obtener una lista de todas las etiquetas utilizadas en las entradas de tu blog.
2. Crea un array con todas las etiquetas existentes

```astro title="src/pages/tags/[tag].astro" ins={7}
---
import BaseLayout from '../../layouts/BaseLayout.astro';
Añade el siguiente código para obtener una lista de todas las etiquetas utilizadas en las entradas de tu blog.

export async function getStaticPaths() {
```astro title="src/pages/tags/[tag].astro" ins={7}
---
import BaseLayout from '../../layouts/BaseLayout.astro';
export async function getStaticPaths() {
const allPosts = await Astro.glob('../posts/*.md');
const uniqueTags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
```
```

<details>
<details>
<summary>¡Dime con más detalle qué hace esta línea de código!</summary>

¡Está bien si esto no es algo que hubieras escrito tú mismo todavía!
¡Está bien si esto no es algo que hubieras escrito tú mismo todavía!

Recorre cada entrada Markdown, una a una, y combina cada array de etiquetas en un único array más grande. A continuación, crea un nuevo `Set` a partir de todas las etiquetas individuales que ha encontrado (para ignorar los valores repetidos). Finalmente, convierte ese conjunto en un array (sin duplicaciones), que puedes usar para mostrar una lista de etiquetas en tu página.
</details>

Ahora tienes un array `uniqueTags` con los elementos `"astro"`, `"éxitos"`, `"comunidad"`, `"bloguear"`, `"contratiempos"`, `"aprender en público"`.

### 3. Sustituye el valor `return` de la función `getStaticPaths`

```js title="src/pages/tags/[tag].astro" del={1-8} ins={10-16}
return [
{params: {tag: "astro"}, props: {posts: allPosts}},
{params: {tag: "éxitos"}, props: {posts: allPosts}},
{params: {tag: "comunidad"}, props: {posts: allPosts}},
{params: {tag: "bloguear"}, props: {posts: allPosts}},
{params: {tag: "contratiempos"}, props: {posts: allPosts}},
{params: {tag: "aprender en público"}, props: {posts: allPosts}}
]

return uniqueTags.map((tag) => {
const filteredPosts = allPosts.filter((post) => post.frontmatter.tags.includes(tag));
return {
params: { tag },
props: { posts: filteredPosts },
};
});
```
Una función `getStaticPaths` siempre debe devolver una lista de objetos que contengan `params` (cómo llamar a cada ruta de página) y opcionalmente cualquier `props` (datos que quieras pasar a esas páginas). Anteriormente, definiste cada nombre de etiqueta que sabías que se usaba en tu blog y pasaste toda la lista de entradas como props a cada página.

Ahora, generas esta lista de objetos automáticamente utilizando tu array `uniqueTags` para definir cada parámetro.

Y, ahora la lista de todas las publicaciones del blog es filtrada **antes** de ser enviada a cada página como props. Asegúrate de eliminar la línea de código anterior que filtra las publicaciones, y actualiza tu plantilla HTML para usar `posts` en lugar de `filteredPosts`.

```astro title="src/pages/tags/[tag].astro" del={3,7} ins={8}
const { tag } = Astro.params;
const { posts } = Astro.props;
const filteredPosts = posts.filter((post) => post.frontmatter.tags?.includes(tag));
---
<!-- -->
<ul>
{filteredPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
{posts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
</ul>
```
</details>

Ahora tienes un array `uniqueTags` con los elementos `"astro"`, `"éxitos"`, `"comunidad"`, `"bloguear"`, `"contratiempos"`, `"aprender en público"`.

3. Sustituye el valor `return` de la función `getStaticPaths`

```js title="src/pages/tags/[tag].astro" del={1-8} ins={10-16}
return [
{params: {tag: "astro"}, props: {posts: allPosts}},
{params: {tag: "éxitos"}, props: {posts: allPosts}},
{params: {tag: "comunidad"}, props: {posts: allPosts}},
{params: {tag: "bloguear"}, props: {posts: allPosts}},
{params: {tag: "contratiempos"}, props: {posts: allPosts}},
{params: {tag: "aprender en público"}, props: {posts: allPosts}}
]

return uniqueTags.map((tag) => {
const filteredPosts = allPosts.filter((post) => post.frontmatter.tags.includes(tag));
return {
params: { tag },
props: { posts: filteredPosts },
};
});
```
4. Una función `getStaticPaths` siempre debe devolver una lista de objetos que contengan `params` (cómo llamar a cada ruta de página) y opcionalmente cualquier `props` (datos que quieras pasar a esas páginas). Anteriormente, definiste cada nombre de etiqueta que sabías que se usaba en tu blog y pasaste toda la lista de entradas como props a cada página.

Ahora, generas esta lista de objetos automáticamente utilizando tu array `uniqueTags` para definir cada parámetro.

Y, ahora la lista de todas las publicaciones del blog es filtrada **antes** de ser enviada a cada página como props. Asegúrate de eliminar la línea de código anterior que filtra las publicaciones, y actualiza tu plantilla HTML para usar `posts` en lugar de `filteredPosts`.

```astro title="src/pages/tags/[tag].astro" del={3,7} ins={8}
const { tag } = Astro.params;
const { posts } = Astro.props;
const filteredPosts = posts.filter((post) => post.frontmatter.tags?.includes(tag));
---
<!-- -->
<ul>
{filteredPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
{posts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
</ul>
```
</Steps>

### Ejemplo de código final

Expand Down

0 comments on commit e292bd9

Please sign in to comment.