GatsbyJSのLayoutを設定しよう
01 18, 2019
GatsbyJSのLayoutを設定しよう
GatsbyJSのレイアウトを修正していきましょう。
/components/header.js
/layout.js
/layout.css
/image.js
/seo.jsという構造になっていますが、この構造だとlayout.cssに全部CSSを書く構造にしたりするとあとあと辛くなります。 そこで、今回は以下のようにフォルダ構造をしておくと後々見通しが良くなると考えました。
/components/header/index.js
/layout/index.js
/layout.css
/image.js
/seo.jsこのように設定するとコンポーネントごとに分かれてCSSが読み込めるので良い感じにデザインできるのではないでしょうか？
コンポーネントを追加する
Layout/index.jsを見てみましょう。
<footer>
© {new Date().getFullYear()}, Built with
{` `}
<a href="https://www.gatsbyjs.org">Gatsby</a>
</footer>ここの部分をコンポーネントで切り出してindex.jsに組み込んでいきます。 components/footer/index.jsを作成して以下のように記述してみます。
import React from 'react'
const Footer = () => (
<footer>
© {new Date().getFullYear()}, Built with
<a href="https://www.gatsbyjs.org">Gatsby</a>
<p>Myblog</p>
</footer>
)
export default FootergetFullYear()メソッドは、指定された日付のローカルタイムに沿って、その年を返します。
よく似た表記にgetYear()がありますがgetYear()は、Web標準から削除されています。 廃止される過程にあるので使用しないでください。
続いて/Layout/index.jsを以下のように修正
import React from 'react'
import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
import Footer from '../footer'
import Header from '../header'
import './layout.css'
const Layout = ({ children }) => (
<StaticQuery
query={graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`}
render={data => (
<>
<Header
siteTitle={data.site.siteMetadata.title}
/>
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `0px 1.0875rem 1.45rem`,
paddingTop: 0,
}}
>
{children}
<Footer />
</div>
</>
)}
/>
)
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layoutimport Footer from '../footer'で読み込んで`
