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

可以在盖茨比有多个布局

1 个答案: