Question

我正在用Gatsby构建一个多页的网站（因此，多组件）。在官方文档中，它说在Layouts文件夹中，我应该有文件index.js，该文件存储其他页面所共有的组件（例如navbar和页脚，起着React Router的作用，这里称为MainNavBar和MainFooter）。现在，当您到达localhost：8000位置时（上载将是www.mywebsite.com），index.js文件也是主页和登录页面。问题在于，此页面现在为空，在网站上选择页面后仅呈现存储在页面文件夹中的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

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

建议您使用layout.js组件包装诸如页眉和页脚之类的内容。这是一个例子：

layout.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>
  )
}

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

1 个答案:

layout.js

index.js

about.js