如何在Gatsby中访问模板组件中的上下文变量？

在Gatsby中，可以通过使用静态查询和GraphQL来访问模板组件中的上下文变量。

首先，在模板组件中，你可以使用pageContext对象来访问上下文变量。pageContext是一个包含页面数据的JavaScript对象，可以在createPage API中传递给页面。

例如，假设你在创建页面时传递了一个名为myVariable的上下文变量，你可以在模板组件中使用它：

import React from "react";

const MyTemplateComponent = ({ pageContext }) => {
  const { myVariable } = pageContext;

  return (
    <div>
      <h1>访问上下文变量示例</h1>
      <p>上下文变量的值是: {myVariable}</p>
    </div>
  );
};

export default MyTemplateComponent;

然后，在页面组件中，你可以在GraphQL查询中使用pageContext来访问上下文变量。

import React from "react";
import { graphql } from "gatsby";

const MyPageComponent = ({ data }) => {
  const { myVariable } = data.pageContext;

  return (
    <div>
      <h1>访问上下文变量示例</h1>
      <p>上下文变量的值是: {myVariable}</p>
    </div>
  );
};

export const query = graphql`
  query($myVariable: String) {
    pageContext {
      myVariable
    }
  }
`;

export default MyPageComponent;

注意，在上述示例中，我们使用了graphql导入的graphql函数来定义GraphQL查询。我们在查询中使用了$myVariable作为变量，并在query中指定了变量的类型为String。

这样，你就可以在Gatsby中访问模板组件中的上下文变量了。请注意，以上示例中的代码只是一种基本用法，你可以根据你的具体需求进行调整和扩展。

对于Gatsby相关的详细信息和更多示例，请参考腾讯云的Gatsby产品介绍页：Gatsby | 腾讯云