缺少布局的基本 Gatsby Shopify 示例

Question

我在此处使用基本的 Gatsby Shopify 网站模板https://www.gatsbyjs.com/docs/building-an-ecommerce-site-with-shopify/

我正在尝试建立这个简单的示例，运行但我注意到

中的以下代码块

/src/pages/products.js

import Layout from "../components/layout"

文章中没有提及组件或布局，应用程序在那里抛出错误。我只是想让一个基本的例子起作用。此代码是否有 github link？

Answer 1

<Layout> 组件是几乎所有 Gatsby 启动器（例如 default one）中的公共资源，如果没有，只需在 [=12= 下创建以下结构] 文件夹（以保持您的代码结构）：

/**
 * Layout component that queries for data
 * with Gatsby's useStaticQuery component
 *
 * See: https://www.gatsbyjs.com/docs/use-static-query/
 */

import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

import Header from "./header"
import "./layout.css"

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Header siteTitle={data.site.siteMetadata?.title || `Title`} />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0 1.0875rem 1.45rem`,
        }}
      >
        <main>{children}</main>
        <footer style={{
          marginTop: `2rem`
        }}>
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.com">Gatsby</a>
        </footer>
      </div>
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

如你所见，<Layout>组件用childrenprop包裹了整个应用，共享一个<Header>组件和一个<footer>标签使用时跨越所有应用程序。

如果您不使用它们，您可以删除 propTypes。

缺少布局的基本 Gatsby Shopify 示例

Basic Gatsby Shopify example missing Layouts

shopify

reactjs

graphql

gatsby