javascript - 在 Gatsby 中可以有多个布局

Question

我正在寻找主页、简历页面、博客页面和其他页面的布局。

到目前为止，在本教程中，我所看到的是:

import React from "react";

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

这不允许我指定它适用于哪个页面。它似乎适用于所有子页面

Answer 1

在 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();
  });
};

创建 src/layouts/landingPage.js。这将是新的布局模板。

创建 src/pages/landing-page/index.js。这将是新创建的布局模板的索引页。

来源:Creating and modifying pages | GatsbyJS