Gatsbyブログサイト移行物語~個別ページテンプレート作成~

公開日: 2020.12.14
メンテナンス日: 2022.01.01

GatsbyでプライバシーポリシーやAboutページなど記事一覧のループと分ける方法をご紹介します。

この記事を書いた人

かみーゆ/フロントエンドエンジニア

資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生」や「海外ノマド」のライフスタイルについて発信。好きなものは肉とハイボール。

今までのGatsbyの記事と注意点

現在ここまで記載しています。
制作するまでを目標にUPしていくので順を追ったらGatsbyサイトが作れると思います。

v5へのアップグレード方法はこちら。

Gatsby をアップグレード（v4→v5）して Netlify にデプロイ

Gatsbyのv4からv5へアップグレードしたのでそのやり方をメモしておきます。Netlify の Nodeバージョンの...

2023.01.29

このシリーズはGithub・gatsby-blogに各内容ブランチごとで分けて格納しています。

今回のソースはotherブランチにあります。

このシリーズではテーマGatsby Starter Blogを改造

この記事は一番メジャーなテンプレート、「Gatsby Starter Blog」を改造しています。同じテーマでないと動かない可能性があります。

個別ページテンプレートの作り方

ポイントはループに含めないという点だけです。今回はブログ詳細一覧をコピーしてテンプレートを作成しました。

ファイル名をpage-post.jsとしておきます。

/ (プロジェクトディレクトリー)
    ├ gatsby-node.js（ページを生成するところ）
    ├ src/
    |  └ templates/
    |    └ page-post.js（個別ページを出力するテンプレート）
    └ content/
      └ blog/
        └ provacy-policy.md (個別のページ)

createPageで個別ページを生成する

gatsby-node.jsにページを生成するためのコードを追記しておきます。
createPage()関数でページは生成されます。

filterでfrontmatterのpagetypeがblog以外のものを抽出します。

gatsby-node.js

// ~ 省略 ~
exports.createPages = async ({ graphql, actions, reporter }) => {
  // ~ 省略 ~

  const pagePost = path.resolve(`./src/templates/page-post.js`)

  if (posts.length > 0) {

    // ~ 省略 ~
    const pagePosts = posts.filter(post => post.frontmatter.pagetype !== "blog")

    pagePosts.forEach(
      createPage({
        path: post.fields.slug,
        component: pagePost,
        context: {
          id: post.id,
        },
      })
    )
  }
}

個別ページを出力するテンプレートpage-post.jsの編集

記事のIDが一致するものを出力するように設定します。

page-post.js

import * as React from "react"
import { Link, graphql } from "gatsby"

import Layout from "../components/layout"
import Seo from "../components/seo"

import styled from "styled-components"

const PagePostTemplate = ({ data, location }) => {
  const post = data.markdownRemark
  const siteTitle = data.site.siteMetadata?.title || `Title`

  return (
    <Layout location={location} title={siteTitle}>
      <Seo
        title={post.frontmatter.title}
        description={post.frontmatter.description || post.excerpt}
      />
      <Article
        className="blog-post"
        itemScope
        itemType="http://schema.org/Article"
      >
        <header>
          <h1 itemProp="headline">{post.frontmatter.title}</h1>
        </header>
        <BlogEntry
          dangerouslySetInnerHTML={{ __html: post.html }}
          itemProp="articleBody"
        />
      </Article>
    </Layout>
  )
}

export default PagePostTemplate

export const pageQuery = graphql`
  query PagePostBySlug($id: String!) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(id: { eq: $id }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "YYYY-MM-DD")
        description
        cate
        tags
      }
    }
  }
`

const Article = styled.article`
  max-width: 750px;
  margin: 0 auto;
`
const BlogEntry = styled.section`
  margin: 15px 0 30px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
`

privacy-policy.md ファイルを追加し編集

プライバシーポリシーページを追加します。

privacy-policy.md

---
title: プライバシーポリシー
description: 個人情報保護方針についてのページです
---
## 個人情報の利用目的
銀ねこアトリエ（以下、当サイト）では、メールでのお問い合わせ、メールマガジンへの登録などの際に、名前（ハンドルネーム）、メールアドレス等の個人情報をご登録いただく場合がございます。

これらの個人情報は質問に対する回答や必要な情報を電子メールなどをでご連絡する場合に利用させていただくものであり、個人情報をご提供いただく際の目的以外では利用いたしません。
~ 省略 ~

これで個別ページが追加できるようになりました。