Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

i18n(es): update 5-astro-api/3 #7959

Merged
merged 2 commits into from
Apr 22, 2024
Merged

i18n(es): update 5-astro-api/3 #7959

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6bcdb04
i18n(es): update `5-astro-api/3`
dreyfus92 Apr 20, 2024
8f81efd
Merge branch 'main' into updates-13
yanthomasdev Apr 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
101 changes: 56 additions & 45 deletions src/content/docs/es/tutorial/5-astro-api/3.mdx
View file
Open in desktop
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