CODEWITHSUNDEEP
javascriptreactjsgatsby
Tithos
Tithos

Reputation: 1417

is is possible to have multiple layouts in Gatsby

I am looking to have a layout for my home page, resume pages, blog pages, and other pages.

So far in the tutorial, all I see is this: 

import React from "react";

export default ({ children }) => (
  <div style={{ margin: `0 auto`, maxWidth: 650, padding: `0 1rem` }}>
    {children()}
  </div>
);

This does not allow me to specify which page this applies to. It seems to apply to all child pages

Upvotes: 1

Views: 2119

Answers (1)

thomann061
thomann061

Reputation: 639

In gatsby-node.js:

// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
exports.onCreatePage = async ({ page, boundActionCreators }) => {
  const { createPage } = boundActionCreators;

  return new Promise((resolve, reject) => {
    if (page.path.match(/^\/landing-page/)) {
      // It's assumed that `landingPage.js` exists in the `/layouts/` directory
      page.layout = "landingPage";

      // Update the page.
      createPage(page);
    }

    resolve();
  });
};

Create src/layouts/landingPage.js. This will be the new layout template.

Create src/pages/landing-page/index.js. This will be the index page for the newly created layout template.

Source: Creating and modifying pages | GatsbyJS

Upvotes: 5

Related Questions