gatsby 公式チュートリアルメモ part3

公式チュートリアルリンク

https://www.gatsbyjs.com/tutorial/part-three/
パート3の内容のメモ

siteの作成

前回同様にpart3用のプロジェクトの生成

shell

gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-three

plugin導入

gatsbyはプラグインとして外部コンテンツを読み込む仕組みがある．今回は typography.js のプラグインを例に読み込みの練習をする．

shell

npm install gatsby-plugin-typography react-typography typography typography-theme-fairy-gates

configファイルを編集（このへんは他のnodejsと同じようなイメージでOk）

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

typography.js にはコンフィグファイルが必要とのことで，コンフィグファイルを追加しておく．

src/utils/typography.js

import Typography from "typography"
import fairyGateTheme from "typography-theme-fairy-gates"

const typography = new Typography(fairyGateTheme)

export const { scale, rhythm, options } = typography
export default typography

ここで確認してみる．chromeの開発モードで確認すると，HEAD に typography.js が読み込まれているのが確認できる．

shell

gatsby develop

ほかにもプラグインは色々あるのでここから参照
Plugins | gatsby

contentとstyleの追加

typography.js を使ってコンテンツを配置してみる．
ページの作成をする．

src/pages/index.js

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

export default function Home() {
  return (
    <Layout>
      <h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
      <p>
        What do I like to do? Lots of course but definitely enjoy building
        websites.
      </p>
    </Layout>
  )
}

src/pages/about.js

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

export default function About() {
  return (
    <Layout>
      <h1>About me</h1>
      <p>
        I’m good enough, I’m smart enough, and gosh darn it, people like me!
      </p>
    </Layout>
  )
}

src/pages/content.js

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


export default function Contact() {
  return (
    <Layout>
      <h1>I'd love to talk! Email me at the address below</h1>
      <p>
        <a href="mailto:[e-mail]">[e-mail]</a>
      </p>
    </Layout>
  )
}

レイアウトコンテンツの作成

src/contents/layout.js

import React from "react"

export default function Layout({ children }) {
  return (
    <div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
      {children}
    </div>
  )
}

ここでサイトを確認してみると，マージンが設定され，センタライズされたサイトを確認することができる．

サイトタイトルとヘッダーの作成

layout.js に対してさらに変更を加える．サイトのタイトルとインデックスヘッダーを追加する．
Layout要素を変更することですべてのページが更新されるので良い．

src/contents/layout.js

import React from "react"
import { Link } from "gatsby"
const ListLink = props => (
  <li style={{ display: `inline-block`, marginRight: `1rem` }}>
    <Link to={props.to}>{props.children}</Link>
  </li>
)

export default function Layout({ children }) {
  return (
    <div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
      <header style={{ marginBottom: `1.5rem` }}>
        <Link to="/" style={{ textShadow: `none`, backgroundImage: `none` }}>
          <h3 style={{ display: `inline` }}>MySweetSite</h3>
        </Link>
        <ul style={{ listStyle: `none`, float: `right` }}>
          <ListLink to="/">Home</ListLink>
          <ListLink to="/about/">About</ListLink>
          <ListLink to="/contact/">Contact</ListLink>
        </ul>
      </header>
      {children}
    </div>
  )
}

localhost:8000 を確認すると，HOME, ABOUT, CONTACTの目次が追加されているのが確認できた．