published on : 2019.10.21Web制作

#4 Gatsby + WordPress REST APIでブログを作ろう【breadcrumbs編】

#3に続き、パンくずを作ってみます

今回はgatsby-plugin-breadcrumbを使ってみます

Breadcrumbsコンポーネントを作ってlocation等のpropsを渡せば作れるかと思いますが、Gatsbyが提供するプラグインのレビューも兼ねて、gatsby-plugin-breadcrumbを紹介していきますね

まずはインストール

yarn add gatsby-plugin-breadcrumb

configに追加

gatsby-config.js

`gatsby-plugin-breadcrumb`,

gatsby-plugin-breadcrumbについて

gatsby-plugin-breadcrumbには以下の３種類パンくずの表示方法があります

Click Tracking
Sitemap
useBreadcrumb

「Click Tracking」はその名の通り、ユーザーがクリックしたページ遷移応じてパンくずが作られます

つまりユーザーが来た道がパンくずになる訳ですね

これは初めてみました

そもそもパンくずは来た道を迷わず帰れるように、パンのカケラを置いて歩くみたいなイメージなので本質的なパンくずになりますね(多分w)

面白いのでこれを使ってみようかと思います

＊他のパンくずもドキュメント通りやれば実装できましたので、必要に応じて試してみてください^ ^(＊別記事で紹介するかもです)

Click Trackingは以下のようにユーザーの動きに応じてパンくずが生成されます

ユーザーの動き：「トップ -> 下層ページA -> 下層ページB -> 記事A」
パンくず：「Home / 下層ページA / 下層ページB / 記事A」

ユーザーの動き：「トップ -> 記事A -> 記事B -> 記事C 」
パンくず：「Home / 記事A / 記事B / 記事C 」

これは便利なのかわかりにくいのか謎ですが、ちゃんと動くのか試してみます^ ^

components/layout.jsを変更

パンくずが必要なページ１つ１つにBreadcrumbコンポーネントを追加してもいいみたいですが、layout.jsに追加すれば、あとは各ページでlocationとcrumbLabelを追記するだけでパンくずが表示されるようになります

layout.js

import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import { Breadcrumb } from 'gatsby-plugin-breadcrumb'

import Header from "./header"

const Layout = ({ location, crumbLabel, children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)
  const rootPath = `${__PATH_PREFIX__}/`

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />
      <div>
        <main>
          {location.pathname !== rootPath &&
            <Breadcrumb
              location={location}
              crumbLabel={crumbLabel}
              crumbSeparator=""
              crumbStyle={{ color: "#666" }}
              crumbActiveStyle={{ color: "#333" }}
            />
          }
          {children}
        </main>
        <footer>
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.org">Gatsby</a>
        </footer>
      </div>
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

ラベル

crumbLabel：各ページから渡ってくる
crumbSeparator：” / ”とすると「HOME / ページA / ページB」と表示される
crumbStyle：パンくずのスタイリング
crumbActiveStyle：今表示されているページのパンくずのスタイリング

トップページでパンくずはいらないので条件分岐しています

const rootPath = `${__PATH_PREFIX__}/`でルートのパス(今回はトップページ)を取って、それがもしlocation.pathname(今いるとこのパス)と同じじゃなければパンくずを表示するように分岐しています

locationはGatsbyから与えられるものなので、最初のconst Layoutの{}の中でにlocationを追加しておけば使えます

デフォルトのパンくずを設定する

Click TrackingはクリックされないとHOMEすら出てこないので、HOMEを常に表示するように設定しておきます

デフォルトのパンくず設定はgatsby-config.jsで行います

gatsby-config.js

{
      resolve: `gatsby-plugin-breadcrumb`,
      options: {
        defaultCrumb: {
          location: {
            state: { crumbClicked: false },
            pathname: "/",
          },
          crumbLabel: "Home",
          crumbSeparator: "",
          crumbStyle: { color: "#666" },
          crumbActiveStyle: { color: "#333" },
        },
      },
    }

これがデフォルトの設定です

各ページにlocationとcrumbLabelを追加

パンくずを表示する各ページにlocationとcrumbLabelのpropsを追加してあげます

このデータを元にパンくずが生成されます

BlogPost.js

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
import SEO from "../components/seo"

const BlogPostTemplate = ({ location, data }) => (
  <Layout location={location} crumbLabel={data.wordpressPost.title}>
    <SEO
      title={data.wordpressPost.title}
      description={data.wordpressPost.excerpt}
    />
    <h1>{data.wordpressPost.title}</h1>
    <span>{data.wordpressPost.date}</span>
    <span>{data.wordpressPost.categories[0].name}</span>
    {data.wordpressPost.featured_media && (
      <div>
        <Img fluid={data.wordpressPost.featured_media.localFile.childImageSharp.fluid} />
      </div>
    )}
    <div
      dangerouslySetInnerHTML={{ __html: data.wordpressPost.content }}
    />
  </Layout>
)
export default BlogPostTemplate

export const query = graphql`
  query($id: Int!) {
    wordpressPost(wordpress_id: { eq: $id }) {
      title
      content
      excerpt
      date(formatString: "YYYY.MM.DD")
      categories {
        name
        slug
      }
      featured_media {
        localFile {
          childImageSharp {
            fluid(maxWidth: 1000) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`

記事のタイトルを渡してみました

gatsby developをして記事ページに行くとパンくずが表示されているかと思います