Gatsbyでパンくずリストを作る

ウェブサイトの中でいろんなページを遷移している時に、ひとつ上の階層に移りたいと思うことがあります。

例えば、ブログ記事を読んだ後に、そのカテゴリーのページをもっと読みたいと思った時に、カテゴリーページに飛べると便利ですよね。

ところが、ヘッダーからはブログ記事一覧には行けるけれども、カテゴリーの記事がまとまったページには飛べないこともあるかもしれません。そうなると、行きたいページに辿り着くまでに、少しだけ手間が増えてしまいます。

そうしたことを解消するために、パンくずリストを作成することができます。

gatsby-plugin-breadcrumbをインストールする

Gatsbyでのパンくずリストの作成にはプラグインが使えるので、簡単に行えます。

gatsby-plugin-breadcrumbと呼ばれるプラグインをインストールしましょう。

npm install gatsby-plugin-breadcrumb

このプラグインを使うことで、2種類のリストを作成することができます。１つは[Click Tracking]です。これはユーザーが遷移してきたページを表示することができます。前のページに戻りたいときなんかには便利です。

もう１つが[AutoGen]です。これは自動生成されたパンくずリストになります。今回はこちらの実装を行います。

まずはgatsby-config.jsにプラグインを追加して初期設定を行います。

    {
     resolve: `gatsby-plugin-breadcrumb`,
     options: {
       useAutoGen: true,
       autoGenHomeLabel: `トップ`
    },
   }

先ほども言ったように[AutoGen]でパンくずリストを作成するので、オプションでAutoGenをTrueにします。 

 autoGenHomeLabelは一番上位のページに戻る時に使われる名前です。今回は"トップ"にしておきます。

後は実際にパンくずリストを表示させたいページに表示するようにします。

パンくずリストをGatsbyページに表示する

パンくずリストの効果がわかりやすいように、ブログの記事にパンくずリストをつけてみましょう。

# src/pages/blogs/{mdx.slug}.js

import * as React from 'react'
import Layout from '../../components//layout'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import { graphql } from 'gatsby'

import { Breadcrumb } from 'gatsby-plugin-breadcrumb'

// Breadcrumbのデフォルトのデザイン
import 'gatsby-plugin-breadcrumb/gatsby-plugin-breadcrumb.css'

const BlogPost = ( { pageContext, data } ) => {

// pageContextからcrumbsを取り出す
 const {
   breadcrumb: { crumbs },
   } = pageContext

 return (
     <Layout pageTitle={data.mdx.frontmatter.title}>

       <Breadcrumb
       
       //crumbsはpageContextからとったものを渡すだけ
       crumbs={crumbs}
       
       //crumbSeparatorはリストの間に挟まれる文字列
       crumbSeparator=" > "
       
       //crumbLabelはこのページのパンくずリストに表示される文字列、デフォルトはページのslug
       crumbLabel={data.mdx.frontmatter.title}
       />
       
       <MDXRenderer>
         {data.mdx.body}
       </MDXRenderer>
     </Layout>
 )
}

export const query = graphql`
 query ($id: String) {
   mdx(id: {eq: $id}) {
     frontmatter {
       title
     }
     body
   }
 }
`

export default BlogPost

実際にブログ記事を表示させてみると、パンくずリストが追加されています。僕のサンプルサイトの場合、tutorialという階層が1つ余分にありますが、気にしないでください。

…でも途中のページのパンくずがtutorialとblogsと日本語になっていませんよね。この場合、gatsby-config.jsで以下のようにcrumbLabelUpdatesでそれぞれのpathにcrumbLabelをつけることができます。

// http://localhost:8000/tutorial/blogs/blog10というアドレスの場合

    {
     resolve: `gatsby-plugin-breadcrumb`,
     options: {
       useAutoGen: true,
       autoGenHomeLabel: `トップ`,
       crumbLabelUpdates: [
         {
           pathname: '/tutorial',
           crumbLabel: 'チュートリアル'
         },
         {
           pathname: '/tutorial/blogs',
           crumbLabel: 'ブログ'
         },
      ],
   }
      

もしあなたのウェブサイトがsrc/pages/blogsというフォルダ構成になっているのであれば、pathname: '/blogs',を設定するだけで良いでしょう。

ローカル開発環境を再起動して、再度ブログ記事を表示されてみると、ブログとチュートリアルが日本語で表示されるようになりました。

gatsby-plugin-breadcrumbのデザインを変更する

デフォルトのデザインを利用したくない場合は、自分でデザインをすることもできます。変更できるクラスは以下に一覧になっています。

GitHub - sbardian/gatsby-plugin-breadcrumb: Breadcrumbs for gatsby sites

"import 'gatsby-plugin-breadcrumb/gatsby-plugin-breadcrumb.css'"は消しておいて、新しくデザインを設定します。CSS-in-JSの使い方は以下の記事を参照してください。

import tw, { styled } from "twin.macro"

const BreadcrumbStyled = styled.div`
   nav .breadcrumb__link{
       ${tw`text-blue-500 underline`}
   }
`

そして作成していたBreadcrumbをこのタグで囲みます。

 <BreadcrumbStyled>
   <Breadcrumb
       crumbs={crumbs}
       crumbSeparator=" > "
       crumbLabel={"ぱんくず"}
   />
 </BreadcrumbStyled>

青文字に下線を引いたパンくずリストができました。

階層に関係なくパンくずリストを作る

このパンくずリストは、自動的に作られたものです。でも、「途中にカテゴリ欄を付け足したい…」なんてことがあるかもしれません。

そんな時は、crumbsを自分で書いてしまえば、自由にリストを作ることができます。例えば、以下のようにcrumbsを定義して…

const crumbs = [
   {
   pathname: '/',
   crumbLabel: 'ホーム'
   },
   {
   pathname: '/tutorial',
   crumbLabel: 'チュートリアル'
   },
   {
   pathname: '/tutorial/blogs',
   crumbLabel: 'ブログ'
   }, 
   {
   pathname: '/tutorial/blogs/categories',
   crumbLabel: 'カテゴリ'
   }, 
   {
   pathname: '/tutorial/about',
   crumbLabel: 'about'
   }, 
]

Breadcrumb内のcrumbLabelを消しておきます。

<Breadcrumb
   crumbs={crumbs}
   crumbSeparator=" > "
/>

以下のように自作したパンくずリストが作られています。もちろん、ちゃんとそれぞれのリンクに飛ぶことができます。

実装結果

Tutorial:Bread Page | 好かれるマーケティング研究室

まとめ

Gatsbyではプラグインを使えば、パンくずリストはすぐに作成することができます。

ここまで読んでいただけたなら、”スキ”ボタンを押していただけると励みになります！(*´ー｀*)ﾜｸﾜｸ