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

Question

我正在用 Gatsby 构建一个多页网站(所以，多组件)。
在官方文档中，它说在 Layouts 文件夹中我应该有文件 index.js，它存储其他页面共有的组件(例如导航栏和页脚，就像一个 react 路由器，这里命名为 MainNavBar 和 MainFooter)。
现在，index.js 文件也是主页和登录页面，当您到达 localhost:8000 位置时(上传后将是 www.mywebsite.com)。
问题是现在这个页面是空的，在网站中选择一个页面后，只呈现存储在 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>
  )
}

index.js

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

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

about.js

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

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