如何正确设置 Gatsby.js 主页？

Question

我正在使用 Gatsby 构建一个多页网站（因此，多组件）。 在官方文档中，它说在 Layouts 文件夹中我应该有文件 index.js，它存储其他页面通用的组件（例如导航栏和页脚，就像一个反应路由器，这里命名为 MainNavBar 和 MainFooter）。 现在，当您访问 localhost:8000 位置（上传后将是 www.mywebsite.com）时，index.js 文件也是主页和登陆页面。 问题是现在这个页面是空的，在网站中选择一个页面后，只呈现存储在 pages 文件夹中的 children() 。 但是，如果我在其中创建一个组件，例如主页（现在作为 home.js 存储在 pages 文件夹中），则其他页面将呈现在主页下方，并且主页本身对所有页面都是通用的其他页面，无法正确显示组件。 如何正确创建主页，该主页也是保留此配置的登录页面？

这是 index.js 组件

import Helmet from 'react-helmet'
import MainNavBar from '../components/navbar.js';
import Footer from '../components/footer';
import React, { Component } from 'react';
import logo from '../images/recsenz.png';
import tile1 from '../images/tile_imgs/prova(m).png';
import tile2 from '../images/tile_imgs/prova(d).png';
import tile3 from '../images/tile_imgs/prova(x).png';
import { Card, CardImg, CardText, CardBody,
   CardTitle, CardSubtitle, Button, Col, Row, Container } from 'reactstrap';
import PropTypes from 'prop-types';
import 'bootstrap/dist/css/bootstrap.min.css';


import './index.css'


const Layout = ({ children, data }) => (
  <div>
    <Helmet
      title={data.site.siteMetadata.title}
      meta={[
        { name: 'description', content: 'Sample' },
        { name: 'keywords', content: 'sample, something' },
      ]}
    />
    <MainNavBar />
      {children()}
    <Footer />      
  </div>
)

Layout.propTypes = {
  children: PropTypes.func,
}

export default Layout

export const query = graphql`
  query SiteTitleQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`

Answer 1

以下是 Gatsby (v2) 建议您设置工作目录的方式：

- src
 - components
  - layout.js
  - header.js
  - footer.js
 - pages
  - index.js
  - about.js

组件的命名完全取决于您。 但是，在 pages 目录中，Gatsby 会根据其中的文件名自动创建页面。 在上面的示例中，Gatsby 将使用index.js创建您的主页，并使用about.js创建一个“/about”页面。

建议您使用layout.js组件来包装页眉和页脚等内容。 这是一个例子：

布局.js

import React from "react"
import Header from "./header"
import Footer from "./footer"

export default ({ children }) => {
  return (
    <div id="main-content">
      <Header />
      {children}
      <Footer />
    </div>
  )
}

索引.js

import React from "react"
import Layout from "../components/layout"

export default () => {
  return (
    <Layout>
      <h1>Welcome to my home page</h1>
    </Layout>
  )
}

关于.js

import React from "react"
import Layout from "../components/layout"

export default () => {
  return (
    <Layout>
      <h1>Welcome to my about page</h1>
    </Layout>
  )
}