Añade contenido dinámico sobre ti

Ahora que ya tienes un sitio web multipágina con contenido HTML, ¡es hora de añadir algo de HTML dinámico!

Prepárate para...

Definir el título de tu página en el frontmatter y utilízarlo en tu HTML
Mostrar elementos HTML condicionalmente
Añadir algo de contenido sobre ti

Cualquier archivo HTML es un lenguaje de Astro válido. Pero con Astro puedes hacer mucho más que HTML normal.

Define y utiliza una variable

Abre about.astro que debería tener este aspecto:

---
---
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Inicio</a>
    <a href="/about/">Sobre mi</a>
    <a href="/blog/">Blog</a>
    <h1>Sobre mi</h1>
    <h2>... ¡y mi nuevo sitio Astro!</h2>

    <p>Estoy trabajando en el tutorial introductorio de Astro. Esta es la segunda página de mi sitio web, ¡y es la primera que he construido yo mismo!</p>

    <p>Este sitio se irá actualizando a medida que vaya completando más partes del tutorial, ¡así que no dejes de visitarlo para ver cómo va mi viaje!</p>
  </body>
</html>

Añade la siguiente línea de JavaScript en el script frontmatter, entre las vallas de código:
src/pages/about.astro
```
---
const pageTitle = "Sobre mi";
---
```

Sustituye tanto el título estático “Astro” como el encabezado “Sobre mi” en tu HTML por la variable dinámica {pageTitle}.

<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
    <title>{pageTitle}</title>
  </head>
  <body>
    <a href="/">Inicio</a>
    <a href="/about/">Sobre mi</a>
    <a href="/blog/">Blog</a>
    <h1>Sobre mi</h1>
    <h1>{pageTitle}</h1>
    <h2>... ¡y mi nuevo sitio Astro!</h2>

    <p>Estoy trabajando en el tutorial introductorio de Astro. Esta es la segunda página de mi sitio web, ¡y es la primera que he construido yo mismo!</p>

    <p>Este sitio se irá actualizando a medida que vaya completando más partes del tutorial, ¡así que no dejes de visitarlo para ver cómo va mi viaje!</p>
  </body>
</html>

Actualiza la vista previa en directo de tu página /about.

El texto de tu página debería tener el mismo aspecto, y el título de tu página mostrado en la pestaña de tu navegador debería decir ahora “Sobre mí” en lugar de “Astro”.

En lugar de escribir el texto directamente en las etiquetas HTML, acabas de definir y luego utilizar una variable en las dos secciones de tu archivo .astro, respectivamente.
Utiliza el mismo patrón para crear un valor pageTitle que utilizarás en index.astro (“Página de inicio”) y blog.astro (“Mi blog de Astro aprendizaje”). Actualiza el HTML de estas páginas en ambos sitios para que el título de tu página coincida con el encabezado que aparece en cada página.

Escribe expresiones JavaScript en Astro

Añade el siguiente JavaScript a tu frontmatter, entre las vallas de código:

(Puedes personalizar el código tú mismo, pero este tutorial utilizará el siguiente ejemplo.)

---
const pageTitle = "Sobre mi";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Escritor técnico",
  hobbies: ["fotografia", "observación de aves", "peñarol"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Redacción de documentos"];
---

A continuación, añade el siguiente código a tu plantilla HTML, debajo del contenido existente:

<p>He aquí algunos datos sobre mí:</p>
<ul>
  <li>Me llamo {identity.firstName}.</li>
  <li>Vivo en {identity.country} y trabajo como {identity.occupation}.</li>
  {identity.hobbies.length >= 2 &&
    <li>Dos de mis aficiones son: {identity.hobbies[0]} y {identity.hobbies[1]}</li>
  }
</ul>
<p>Mis habilidades son:</p>
<ul>
  {skills.map((skill) => <li>{skill}</li>)}
</ul>

Pon a prueba tus conocimientos

La portada de un archivo .astro se escribe en:
1. HTML
2. YAML
3. JavaScript
Además de HTML, la sintaxis Astro permite incluir:
1. Operadores lógicos, expresiones y funciones de JavaScript
2. YAML
3. Markdown
¿Cuándo hay que escribir JavaScript entre llaves?
1. Cuando no estás seguro de si es correcto.
2. Cuando está dentro de la sección de plantilla HTML de un componente Astro.
3. Entre las vallas de código de un componente de Astro.

Renderización condicional de elementos

También puedes usar tus variables de script para elegir si renderizar o no elementos individuales de tu contenido HTML <body>.

Añade las siguientes líneas a tu script frontmatter para definir variables:

---
const pageTitle = "Sobre mi";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Escritor técnico",
  hobbies: ["fotografia", "observación de aves", "peñarol"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Redacción de documentos"];

const happy = true;
const finished = false;
const goal = 3;
---

Añade las siguientes líneas debajo de los párrafos existentes.

A continuación, comprueba la vista previa en directo en la pestaña de tu navegador para ver lo que se muestra en la página:
src/pages/about.astro
```
{happy && ¡Estoy feliz de aprender Astro!}

{finished && ¡He terminado este tutorial!}

{goal === 3 ? Mi objetivo es terminar en 3 días. : Mi objetivo no son 3 días.}
```
Confirma tus cambios en GitHub antes de continuar. Haz esto cada vez que deseas guardar tu trabajo y actualizar tu sitio web en vivo.

Analiza el patrón

Dado el siguiente script .astro:

---
const operatingSystem = "Linux";
const quantity = 3;
const footwear = "botas";
const student = false;
---

Para cada expresión de la plantilla de Astro, ¿puedes predecir el HTML (¡si lo hay!) que se enviará al navegador? Haz clic para ver si has acertado.

{operatingSystem}

Linux
{student && Sigo estudiando.}

No se mostrará nada porque student se evalúa como falso.
Tengo {quantity + 8} pares de {footwear}

Tengo 11 pares de botas
{operatingSystem === "MacOS" ? Utilizo un Mac. : No utilizo un Mac.}

No utilizo un Mac.

Checklist

Puedo definir valores en archivos .astro y utilizarlos.
Puedo renderizar condicionalmente elementos HTML.

Recursos

Expresiones dinámicas en Astro

Edita esta página Translate

Página anterior
Escribe tu primera publicación en Markdown Siguiente página
Estiliza tu página 'Acerca de'

Contribute

Community