Gatsbyの投稿ページ、一覧へタグを表示する

April 04, 2023

Gatsbyの投稿ページ、トップページの投稿一覧へ追加する。

投稿ページへタグを表示する

投稿テンプレートへタグの表示を追加する。
GraphQLのpageQueryの取得項目へtagsを追加して投稿のタグ情報を取得する。
日時の上に取得したタグを表示する。
※タグのURI作成用のプラグインのインポートが必要

src/templates/blog-post.jsを修正する。


// URI作成用のプラグイン
import kebabCase from "lodash/kebabCase"

// タグへ#をつけて表示する
<header>
    <h1 itemProp="headline">{post.frontmatter.title}</h1>
    <p>
    {post.frontmatter.tags.map(tag => (
        <React.Fragment key={tag}>
        <Link to={`/tags/${kebabCase(tag)}/`}>
            #{tag}
        </Link>
        {' '}
        </React.Fragment>
    ))}
    </p>
    <p>{post.frontmatter.date}</p>
</header>

// 取得する項目へtagsを追加
export const pageQuery = graphql`
  query BlogPostBySlug(
    $id: String!
    $previousPostId: String
    $nextPostId: String
  ) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(id: { eq: $id }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
        tags
      }
    }
    previous: markdownRemark(id: { eq: $previousPostId }) {
      fields {
        slug
      }
      frontmatter {
        title
      }
    }
    next: markdownRemark(id: { eq: $nextPostId }) {
      fields {
        slug
      }
      frontmatter {
        title
      }
    }
  }
`

トップページの投稿一覧へタグ表示する

投稿一覧のそれぞれの投稿内容へタグの表示を追加する。
GraphQLのpageQueryの取得項目へtagsを追加して投稿のタグ情報を取得する。
日時の後ろへ取得したタグを表示する。
※タグのURI作成用のプラグインのインポートが必要

src/templates/blog-post.jsを修正する。


// URI作成用のプラグイン
import kebabCase from "lodash/kebabCase"

// 投稿一覧へタグ表示を追加
<header>
    <h2>
    <Link to={post.fields.slug} itemProp="url">
        <span itemProp="headline">{title}</span>
    </Link>
    </h2>
    <small>{post.frontmatter.date}</small>
    <small>
    {` `}
    {post.frontmatter.tags.map(tag => (
        <React.Fragment key={tag}>
        <Link to={`/tags/${kebabCase(tag)}/`}>
            #{tag}
        </Link>
        {' '}
        </React.Fragment>
    ))}
    </small>
</header>


// 取得情報へtagsを追加
export const pageQuery = graphql`
  {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(sort: { frontmatter: { date: DESC } }) {
      nodes {
        excerpt
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
          description
          tags
        }
      }
    }
  }
`

目次

投稿ページへタグを表示する

トップページの投稿一覧へタグ表示する