GatsbyJS使用不同的布局创建页面

时间:2020-04-11 22:26:37

标签: javascript gatsby

我已经四处张望,找不到答案。我正在创建一堆页面,这很好,但是有几个页面我想指定一个不同的layout / html.js,在这里我可以完全自定义从页面输出的所有内容(inc head)。仅凭头盔无法满足我的需求。

是否有一种方法告诉createPage不要使用html.js /默认布局,而是使用其他内容?

非常感谢

1 个答案:

答案 0 :(得分:0)

您应该能够在gatsby-node.js文件中过滤出所需的页面。 本质上,您要用来动态创建这些页面的查询,将其分为两个单独的查询并在这些查询上创建一个过滤器。

例如,如果您有一个来自graphQL查询的类别字段,或者想要使用要过滤的特定布局的特定子弹,则为

这是一个使用ButterCMS的示例graphQL查询,该查询呈现“ ReactPosts”和“ NonReactPosts”

{
  ReactPosts: allButterPost(filter: {categories: {elemMatch: {name: {eq: "React"}}}}) {
    nodes {
      id
    }
  }
  NonReactPosts: allButterPost(filter: {categories: {elemMatch: {name: {ne: "React"}}}}) {
    nodes {
      id
    }
  }
}

使用 createPages 创建页面时,将使用不同的组件模板,并且这些组件将包含不同的布局。

在这种情况下,您还需要调用createPages两次,每种帖子类型一次(响应页面与非响应页面)