Skip to content

Commit

Permalink
i18n(es): update 5-astro-api/3 (withastro#7959)
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 9, 2024
1 parent b70a6ee commit 57681f5
Showing 1 changed file with 56 additions and 45 deletions.
101 changes: 56 additions & 45 deletions src/content/docs/es/tutorial/5-astro-api/3.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';

Ahora que tienes páginas individuales para cada etiqueta, ¡es hora de crear enlaces a ellas!

Expand All @@ -32,6 +31,7 @@ Pero, como ya tienes el directorio `/tags/`, puedes aprovechar otro patrón de e

## Pruébalo tú mismo: crea una página de índice de etiquetas

<Steps>
1. Crea un nuevo fichero `index.astro` en el directorio `src/pages/tags/`.

2. Ve a `http://localhost:4321/tags` y comprueba que tu sitio contiene ahora una página en esta URL. Estará vacía, pero existirá.
Expand All @@ -40,7 +40,7 @@ Pero, como ya tienes el directorio `/tags/`, puedes aprovechar otro patrón de e

<details>
<summary>Ampliar para ver los pasos</summary>

<Steps>
1. Crea un nuevo componente de página en `src/pages/tags/`.

<details>
Expand Down Expand Up @@ -74,10 +74,12 @@ Pero, como ya tienes el directorio `/tags/`, puedes aprovechar otro patrón de e
<BaseLayout pageTitle={pageTitle}></BaseLayout>
```
</details>
</Steps>
</details>

4. Comprueba de nuevo la vista previa de tu navegador y deberías tener una página formateada, ¡lista para añadirle contenido!

</Steps>
</Box>

## Crea un array de etiquetas
Expand Down Expand Up @@ -105,8 +107,7 @@ Podrías hacer esto, pero entonces tendrías que volver a este archivo y actuali

Afortunadamente, ya conoces una forma de obtener los datos de todos tus archivos Markdown en una sola línea de código y luego devolver una lista de todas tus etiquetas.



<Steps>
1. En `src/pages/tags/index.astro`, añade la línea de código al script frontmatter que dará acceso a tu página a los datos de cada archivo de entrada de blog `.md`.

<details>
Expand All @@ -131,11 +132,13 @@ Afortunadamente, ya conoces una forma de obtener los datos de todos tus archivos
---
```
</Steps>

## Crea tu lista de etiquetas

En lugar de crear elementos en una lista desordenada esta vez, crea un `<p>` para cada elemento, dentro de un `<div>`. El patrón debería resultarte familiar.

<Steps>
1. Añade el siguiente código a tu plantilla de componentes:

```astro title="src/pages/tags/index.astro" ins={2}
Expand All @@ -156,9 +159,11 @@ En lugar de crear elementos en una lista desordenada esta vez, crea un `<p>` par
</div>
</BaseLayout>
```
</Steps>

## Añade estilos a tu lista de etiquetas

<Steps>
1. Añade las siguientes clases CSS para dar estilo a tu `<div>` y a cada `<p>` que se genere. Nota: Astro utiliza sintaxis HTML para añadir nombres de clases.

```astro title="src/pages/tags/index.astro" 'class="tags"' 'class="tag"'
Expand Down Expand Up @@ -196,6 +201,7 @@ En lugar de crear elementos en una lista desordenada esta vez, crea un `<p>` par
```

3. Comprueba la vista previa de tu navegador en `http://localhost:4321/tags` para verificar que tienes algunos estilos nuevos y que cada una de las etiquetas de la página tiene un enlace que funciona a su propia página de etiquetas individual.
</Steps>

### Registro de códigos

Expand Down Expand Up @@ -242,6 +248,7 @@ En este momento, puedes navegar a `http://localhost:4321/tags` y ver esta págin

Pero aún así, debes hacer que estas páginas se puedan descubrir desde otras páginas de tu sitio web.

<Steps>
1. En tu componente `Navigation.astro`, incluye un enlace a esta nueva página de índice de etiquetas.

<details>
Expand All @@ -254,6 +261,8 @@ Pero aún así, debes hacer que estas páginas se puedan descubrir desde otras p
```
</details>

</Steps>

<Box icon="puzzle-piece">

## Reto: Incluye etiquetas en la plantilla de las entradas del blog
Expand All @@ -262,49 +271,51 @@ Ya has escrito todo el código que necesitas para mostrar también una lista de

Sigue los pasos que se indican a continuación y comprueba tu trabajo comparándolo con la [muestra de código final](#registro-de-códigos-markdownpostlayout).

<Steps>
1. Copia el `<div class="tags">...</div>` y `<style>...</style>` de `src/pages/tags/index.astro` y reutilízalo dentro de `MarkdownPostLayout.astro`:

```astro title="src/layouts/MarkdownPostLayout.astro" ins={13-17, 21-40}
---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
<p><em>{frontmatter.description}</em></p>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
<p>Escrito por: {frontmatter.author}</p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<div class="tags">
{tags.map((tag) => (
<p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
))}
</div>
<slot />
</BaseLayout>
<style>
a {
color: #00539F;
}
```astro title="src/layouts/MarkdownPostLayout.astro" ins={13-17, 21-40}
---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
<p><em>{frontmatter.description}</em></p>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
<p>Escrito por: {frontmatter.author}</p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<div class="tags">
{tags.map((tag) => (
<p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
))}
</div>
<slot />
</BaseLayout>
<style>
a {
color: #00539F;
}
.tags {
display: flex;
flex-wrap: wrap;
}
.tag {
margin: 0.25em;
border: dotted 1px #a1a1a1;
border-radius: .5em;
padding: .5em 1em;
font-size: 1.15em;
background-color: #F8FCFD;
}
</style>
```
.tags {
display: flex;
flex-wrap: wrap;
}
.tag {
margin: 0.25em;
border: dotted 1px #a1a1a1;
border-radius: .5em;
padding: .5em 1em;
font-size: 1.15em;
background-color: #F8FCFD;
}
</style>
```
</Steps>

Antes de que este código funcione, necesitas hacer **una pequeña edición** al código que pegaste en `MarkdownPostLayout.astro`. ¿Puedes averiguar cuál es?

Expand Down

0 comments on commit 57681f5

Please sign in to comment.