Gatsby触ってみる【ページ作成編②】

2021/01/23

Gatsby触ってみる【ページ作成編①】の続きからGatsbyチュートリアル進めていきます。

7. Programmatically Create Pages from Data(データからプログラムでページを作成する)

前回は,パスの作成までをやったので今日はページを作成していきます。

ページ作成の実装

ページ作成用の実装をしていきます。

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {
  // 略
}

// プラグインにページを追加するように指示するAPI
exports.createPages = async ({ graphql, actions }) => {
  // actionsからcreatePage関数を定義
  const { createPage } = actions
  // 作成したパスをGraphQLで取得
  const result = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)

  // 取得したすべてのMarkdownRemarkノードに対してページを作成する
  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    // ページ作成関数
    createPage({
      // ページのパス
      path: node.fields.slug,
      // ページ作成テンプレートのパス
      component: path.resolve(src/templates/blog-post.js`),
      // テンプレートコンポーネントで使うgraphqlクエリの引数
      context: {
        slug: node.fields.slug,
      },
    })
  })
}

テンプレートコンポーネントを作成する

gatsby-node.jsのページ作成時に使うテンプレートコンポーネントを作成します。

// blog-post.js
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

// ブログページのコンポーネント
export default function BlogPost({ data }) {
  // MarkdownRemarkノード情報
  const post = data.markdownRemark
  return (
    <Layout>
      <div>
        <h1>{post.frontmatter.title}</h1>
        <div dangerouslySetInnerHTML={{__html: post.html}} />
      </div>
    </Layout>
  )
}

// gatby-node.jsのcreatePage関数の引数 contextのプロパティをクエリの引数に与えてMarkdownRemarkノードを取得する
export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug }}) {
      html
      frontmatter {
        title
      }
    }
  }
`

トップページの編集

トップページから作成したページにアクセスできるようにリンクを貼ります。

import React from "react"
import { css } from "@emotion/react"
import { Link, graphql } from "gatsby"import { rhythm } from "../utils/typography"
import Layout from "../components/layout"

export default function Home({ data }) {
  return (
    <Layout>
      <div>
        <h1
          css={css`
            display: inline-block;
            border-bottom: 1px solid;
          `}
        >
          Amazing Pandas Eating Things
        </h1>
        <h4>{data.allMarkdownRemark.totalCount} Posts</h4>
        {data.allMarkdownRemark.edges.map(({ node }) => (
          <div key={node.id}>
            <Link              to={node.fields.slug}              css={css`                text-decoration: none;                color: inherit;              `}            >              <h3
                css={css`
                  margin-bottom: ${rhythm( 4)};
                `}
              >
                {node.frontmatter.title}{" "}
                <span
                  css={css`
                    color: #bbb;
                  `}
                >
                  — {node.frontmatter.date}
                </span>
              </h3>
              <p>{node.excerpt}</p>
            </Link>          </div>
        ))}
      </div>
    </Layout>
  )
}

export const query = graphql`
  query {
    allMarkdownRemark {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "YYYY/MM/DD")
          }
          fields {            slug          }          excerpt
        }
      }
    }
  }
`

感想

ひととおり,データを取得してそれをどのように扱ってページを作成したらいいかというのがチュートリアルを通してわかりました。
ゼロからブログを作成してもいいのですが,GatsbyにはStarterというテンプレートみたいなのが用意されているので,まずはそれでブログを作って自分用にカスタマイズしていくというのが良いかなと思っています。
人の書いたソースも読めるからそれはそれで新たな発見や経験を積めるかなと。
Gatsby良いですね。
ドキュメントが豊富だし,サンプルサイトも結構たくさんあるので参考にしやすいですし,VuePressと比べるのは酷な話しだとは思いますが。
明日からはブログ構築かな？

それではまた明日。

Gatsby触ってみる記事一覧

参考ページ

公式チュートリアル