Question

是否可以从GatsbyJS中的布局访问页面上下文？

在页面上下文中，我想在标题中使用其他数据，例如元标记描述或翻译页面列表。

我尝试将graphql查询更改为..

query={graphql`
  query IndexLayoutQuery {
    site {
      siteMetadata {
        title
        description
        keywords
      }
    },
    sitePage {
      context {
        langKey
      }
    }
  }
`}

..但上下文始终为空。

我的整个布局现在看起来像这样：

interface StaticQueryProps {
  site: {
    siteMetadata: {
      title: string
      description: string
      keywords: string
    }
  }
}

interface Props {
  translation?: Translation
}

const IndexLayout: React.FC<Props> = ({ children, translation = EnglishTranslation }) => (
  <StaticQuery
    query={graphql`
      query IndexLayoutQuery {
        site {
          siteMetadata {
            title
            description
            keywords
          }
        }
      }
    `}
    render={(data: StaticQueryProps) => (
      <IntlProvider locale={translation.language} messages={translation.messages}>
        <LayoutRoot>
          <Helmet
            title={data.site.siteMetadata.title}
            meta={[
              { name: 'description', content: data.site.siteMetadata.description },
              { name: 'keywords', content: data.site.siteMetadata.keywords }
            ]}
          >
            <html lang={translation.language} />
          </Helmet>
          <Header title={data.site.siteMetadata.title} />
          <Main>{children}</Main>
          <Footer />
        </LayoutRoot>
      </IntlProvider>
    )}
  />
)

export default IndexLayout

如何从布局访问页面上下文？

Answer 1

很简单：

const Page = ({ pageContext }) => {
const dataNode = pageContext.yourRequiredNode;
// ......

}

带有TypeScript的GatsbyJS：获取布局中的页面上下文？

1 个答案: