如何在 Gatsby 中的特定页面模板上设置值

Question

Gatsby 的新手，无法解决这个问题。我创建了一个新页面，我想在该页面上更改徽标模板文件中使用的值。在第 'my-mobile-app.js' 页上，我需要使用 'pulse' 徽标。我将它添加到下面的导出默认值中，但如何从特定页面调用它？将 dark={true} 添加到 <Img> 会按预期在全局范围内更改它。如果不清楚，请告诉我。

这是页面结构：

my-mobiel-app.js（新页面需要使用与其他所有不同的徽标）
- 从'../../components/layout'导入布局
src/components/layout.js
- 从“./Header”导入Header
src/components/Header/Header.js
- 从“../Logo”导入徽标

最后src/components/Logo.js有这段代码：

  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>

Answer 1

最好导出命名组件（可以是默认的），例如：

 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>

那么无论你想去哪里，你只需要：

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

<Logo white />

相应地更改 white 或 dark。我认为如果你创建一个像 isWhite 或 isDark 这样的布尔值并将其设置为默认值 true 或 false 会更清楚，无论你喜欢什么：

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

这样一来，您就不需要始终传递 <Logo isWhite={false} />，因为它已设置为默认值 false。如果你像 <Logo isWhite={true} /> 一样传递它，将覆盖默认配置。

如何在 Gatsby 中的特定页面模板上设置值

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

javascript

reactjs

gatsby