2019-01-18に投稿

GatsbyJSのLayoutを設定しよう

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 Footer

getFullYear()メソッドは、指定された日付のローカルタイムに沿って、その年を返します。
よく似た表記に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 Layout

import Footer from '../footer'で読み込んで`

を入れます。
004.png
ちゃんと追加したMyblogが表示されていますね。よかった。

お願い

頑張って勉強しながら書いています。間違いなどがあればご指摘いただけたらうれしいです。

Originally published at www.corylog.com
ツイッターでシェア
みんなに共有、忘れないようにメモ

view_list [連載] ブロガー向けGatsby講座
第2回 GatsbyJSをインストールする
第3回 GatsbyJSにページを追加しよう
第4回 GatsbyJSのLayoutを設定しよう
第5回 GatsbyJSのimageを使ってみよう
第6回 GatsbyJSでCSS Modulesを使ってみよう

aocory

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!
ボードとは?

関連記事

コメント