Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

68
Vistas
How to set a value on a specific page template in Gatsby

New to Gatsby and can't get past this issue. I created a new page and on that page I want to change a value that is used in template file for the logo. On page 'my-mobile-app.js' I need to use the 'pulse' logo. Ive added it to the export default below but how do I call it from the specific page? Adding dark={true} to the <Img> changes it globally as expected. Let me know if this isn't clear.

This is the page structure:

  • my-mobiel-app.js (new page that needs to have a different logo than all others)

    • import Layout from '../../components/layout'
  • src/components/layout.js

    • import Header from "./Header"
  • src/components/Header/Header.js

    • import Logo from '../Logo'
  • And finally src/components/Logo.js has this code:

      export default ({ white, dark, pulse, ...props }) => {
          const logo = useStaticQuery(graphql`
              query {
                  white: file(relativePath: { eq: "logo/Logo-whitebg.png" }) {
                      childImageSharp {
                          fluid {
                              ...GatsbyImageSharpFluid_noBase64
                          }
                      }
                  }
                  dark: file(relativePath: { eq: "logo/Logo-darkbg.png" }) {
                      childImageSharp {
                          fluid {
                              ...GatsbyImageSharpFluid_noBase64
                          }
                      }
                  }
                  pulse: file(relativePath: { eq: "logo/Logo-pulse.svg" }) {
                      childImageSharp {
                          fluid {
                              ...GatsbyImageSharpFluid_noBase64
                          }
                      }
                  }
              }
          `)
      }
      const typeLogo = (white && 'white') || (dark && 'dark') || (pulse && 'pulse') || "white"
      return <Link to="/">
          <Img
              fluid={logo[typeLogo].childImageSharp.fluid}
              alt="Tradovate Logo"
              {...props}
              loading="eager"
              fadeIn={false}
          />
      </Link>
    
7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

It's preferrable to export a named component (can be default) like:

 export default function Logo ({ white, dark, pulse, ...props }) => {
      const logo = useStaticQuery(graphql`
          query {
              white: file(relativePath: { eq: "logo/Logo-whitebg.png" }) {
                  childImageSharp {
                      fluid {
                          ...GatsbyImageSharpFluid_noBase64
                      }
                  }
              }
              dark: file(relativePath: { eq: "logo/Logo-darkbg.png" }) {
                  childImageSharp {
                      fluid {
                          ...GatsbyImageSharpFluid_noBase64
                      }
                  }
              }
              pulse: file(relativePath: { eq: "logo/Logo-pulse.svg" }) {
                  childImageSharp {
                      fluid {
                          ...GatsbyImageSharpFluid_noBase64
                      }
                  }
              }
          }
      `)
  }
  const typeLogo = (white && 'white') || (dark && 'dark') || (pulse && 'pulse') || "white"
  return <Link to="/">
      <Img
          fluid={logo[typeLogo].childImageSharp.fluid}
          alt="Tradovate Logo"
          {...props}
          loading="eager"
          fadeIn={false}
      />
  </Link>

Then wherever you want you just need to:

import Logo from '../path/to/your/brand/new/component'

<Logo white />

Change white or dark accordingly. I think it would be more clear if you create a boolean like isWhite or isDark and set it as default as true or false, whatever works for you like:

export default function Logo ({ isWhite=false, pulse, ...props }) => {}

In that way, you don't need to pass always a <Logo isWhite={false} /> because it's set as a default value to false. If you pass it like <Logo isWhite={true} /> will override the default configuration.

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.