Saltearse al contenido

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

Sección titulada Define y utiliza una variable

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

src/pages/about.astro
---
---
<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>

  1. 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";
    ---

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

    src/pages/about.astro
    <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>

  3. 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.

  4. 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

Sección titulada Escribe expresiones JavaScript en Astro

  1. 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.)

    src/pages/about.astro
    ---
    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"];
    ---

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

    src/pages/about.astro
    <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

Sección titulada Pon a prueba tus conocimientos

  1. La portada de un archivo .astro se escribe en:

  2. Además de HTML, la sintaxis Astro permite incluir:

  3. ¿Cuándo hay que escribir JavaScript entre llaves?

Renderización condicional de elementos

Sección titulada 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>.

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

    src/pages/about.astro
    ---
    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;
    ---

  2. 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 && <p>¡Estoy feliz de aprender Astro!</p>}
    

    {finished && <p>¡He terminado este tutorial!</p>}
    

    {goal === 3 ? <p>Mi objetivo es terminar en 3 días.</p> : <p>Mi objetivo no son 3 días.</p>}

  3. 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

Sección titulada Analiza el patrón

Dado el siguiente script .astro:

src/pages/about.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.

  1. <p>{operatingSystem}</p>

  2. {student && <p>Sigo estudiando.</p>}

  3. <p>Tengo {quantity + 8} pares de {footwear}</p>

  4. {operatingSystem === "MacOS" ? <p>Utilizo un Mac.</p> : <p>No utilizo un Mac.</p>}

Checklist

Sección titulada Checklist

Recursos

Sección titulada Recursos