gatsby-starter-blog にタグを表示する

May 03, 2022[Gatsby][gatsby-starter-blog]

gatsby-starter-blog の改造メモ。
タグを表示したかったのでやってみたときのメモ。

タグを設定する

タグは frontmatter に tags という名前で設定している。
以下のような感じに設定。

---
tags: [Gatsby, 改造]
---

トップページに表示する

タグを取得する

トップ画面は src/pages/index.js に記述されていて、ページで使用するデータは pageQuery に書いてある graphql で取得している。

デフォルトだとタグが取得されないようになっているので取得するように変更する。

src/pages/index.js

  export const pageQuery = graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
      allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
        nodes {
          excerpt
          fields {
            slug
          }
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            title
            description
+           tags
          }
        }
      }
    }
  `

タグを表示する

ここまででこのページ内で記事毎のタグのリストが使えるようになったので表示していく。
タグのリストには post.frontmatter.tags でアクセスできる。
tags が記事に設定されていない場合はエラーになってしまうので post.frontmatter.tags || [] としている。

src/pages/index.js

<div>
  {(post.frontmatter.tags || []).map($0 => {
    return <span style={{paddingRight: "0.5em", color: "lightslategray"}}>{$0}</span>;
  })}
</div>

これでこんな表示になる。スタイルの設定は適当なので style.css などで設定しよう。

記事内にタグを表示する

同じ要領で記事ページにタグを表示する。

記事ページは src/templates/blog-post.js を変更する。
一覧のときと同様に graphql の frontmatter に tags を追加。

         title
         date(formatString: "MMMM DD, YYYY")
         description
+        tags
       }
     }
     previous: markdownRemark(id: { eq: $previousPostId }) {

で、表示。

         <header>
           <h1 itemProp="headline">{post.frontmatter.title}</h1>
-          <p>{post.frontmatter.date}</p>
+          <p>
+            {post.frontmatter.date}
+            <TagList tags={post.frontmatter.tags || []} />
+          </p>
         </header>

こんな感じ。

できた！！