Saltearse al contenido

Crea un pie de página para redes sociales

Prepárate para...

  • Crear un componente de pie de página
  • Crear y pasar props a un componente de redes sociales

Ahora que ya has utilizado componentes de Astro en una página, ¡es hora de utilizar un componente dentro de otro componente!

Crea un componente de pie de página

Sección titulada Crea un componente de pie de página

  1. Crea un nuevo archivo en la ubicación src/components/Footer.astro.

  2. Copia el siguiente código en tu nuevo archivo, Footer.astro.

    src/components/Footer.astro
    ---
    const platform = "github";
    const username = "withastro";
    ---
    

    <footer>
      <p>¡Más información sobre mis proyectos en <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
    </footer>

Importa y utiliza Footer.astro

Sección titulada Importa y utiliza Footer.astro

  1. Añade la siguiente import al frontmatter de cada una de tus tres páginas de Astro (index.astro, about.astro, y blog.astro):

    import Footer from '../components/Footer.astro';

  2. Añade un nuevo componente <Footer /> en tu plantilla de Astro en cada página, justo antes de la etiqueta de cierre </body> para mostrar tu pie de página en la parte inferior de la página.

        <Footer />
      </body>
    </html>
    ">

  • En la vista previa de tu navegador, comprueba que puedes ver el nuevo texto del pie de página en cada página.

    • Pruébalo tu mismo - Personaliza tu pie de página

    Sección titulada Pruébalo tu mismo - Personaliza tu pie de página

    Personaliza tu pie de página para mostrar varias redes sociales (por ejemplo, Instagram, Twitter, LinkedIn) e incluye tu nombre de usuario para enlazar directamente con tu propio perfil.

    Registro de códigos

    Sección titulada Registro de códigos

    Si has seguido cada paso del tutorial, tu archivo index.astro debería tener este aspecto:

    src/pages/index.astro
    ---
    import Navigation from '../components/Navigation.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    

    const pageTitle = 'Página de inicio';
    ---
    

    <html lang="es">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
      </head>
      <body>
        <Navigation />
        <h1>{pageTitle}</h1>
        <Footer />
      </body>
    </html>
    ">

    Crea un componente de redes sociales

    Sección titulada Crea un componente de redes sociales

    Dado que puedes tener varias cuentas online a las que enlazarte, puedes crear un único componente reutilizable y mostrarlo varias veces. Cada vez, le pasarás diferentes propiedades (props) para que las use: la plataforma online y tu nombre de usuario allí.

    1. Crea un nuevo archivo en la ubicación src/components/Social.astro.

    2. Copia el siguiente código en tu nuevo archivo, Social.astro.

      src/components/Social.astro
      ---
      const { platform, username } = Astro.props;
      ---
      <a href={`https://www.${platform}.com/${username}`}>{platform}</a>

    Importa y utiliza Social.astro en el pie de página

    Sección titulada Importa y utiliza Social.astro en el pie de página

    1. Cambia el código en src/components/Footer.astro para importar, luego usa este nuevo componente tres veces, pasando diferentes atributos de componente como props cada vez:

      src/components/Footer.astro
      ---
      const platform = "github";
      const username = "withastro";
      import Social from './Social.astro';
      ---
      

      <footer>
        <p>¡Más información sobre mis proyectos en <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
        <Social platform="twitter" username="astrodotbuild" />
        <Social platform="github" username="withastro" />
        <Social platform="youtube" username="astrodotbuild" />
      </footer>

    2. Comprueba la vista previa de tu navegador y deberías ver tu nuevo pie de página mostrando enlaces a estas tres plataformas en cada página.

    Estiliza tu componente de redes sociales

    Sección titulada Estiliza tu componente de redes sociales

    1. Personaliza la apariencia de tus enlaces añadiendo una etiqueta <style> a src/components/Social.astro.

      src/components/Social.astro
      ---
      const { platform, username } = Astro.props;
      ---
      <a href={`https://www.${platform}.com/${username}`}>{platform}</a>
      

      <style>
        a {
          padding: 0.5rem 1rem;
          color: white;
          background-color: #4c1d95;
          text-decoration: none;
        }
      </style>

    2. Añade una etiqueta <style> a src/components/Footer.astro para mejorar el diseño de tu contenido.

      src/components/Footer.astro
      ---
      import Social from './Social.astro';
      ---
      <style>
        footer {
          display: flex;
          gap: 1rem;
          margin-top: 2rem;
        }
      </style>
      

      <footer>
        <Social platform="twitter" username="astrodotbuild" />
        <Social platform="github" username="withastro" />
        <Social platform="youtube" username="astrodotbuild" />
      </footer>

    3. Comprueba de nuevo la vista previa de tu navegador y confirma que cada página muestra un pie de página actualizado.

    Ponte a prueba

    Sección titulada Ponte a prueba

    1. ¿Qué línea de código hay que escribir en el frontmatter de un componente de Astro para recibir los valores de title, author y date como props?

    2. ¿Cómo pasar valores como props a un componente de Astro?

    Checklist

    Sección titulada Checklist

    Recursos

    Sección titulada Recursos
    Contribuir Comunidad Patrocinador
    OSZAR »