【Gatsby】サイドバーを実装する

14405 ワード
gatsby React JavaScript JavaScript テキストリンク

はじめに

こんにちは。Qiitaの記事を書いていると思うのが、ストックされるより、LGTMされる方が遥かにうれしいですね、筆者です

さて今回はほとんどチュートリアルそのままだったGatsbyのサイトにサイドバーを実装しました。
どなたかの参考になれば幸いです。

前提

1. 使用しているGatsbyのテーマ

このテーマにはサイドバーはついていないのでこちらに実装していきます。

2. サイドバーの要素

サイドバーには新着記事を20件表示します。

いざサイドバーを実装する

1. 記事のItemコンポーネントを作成

以下のようにサムネ画像と記事タイトルの2つの要素で作成しました。

styleはお好みでどうぞ！

src/components/ArticleItem.js
import Img from 'gatsby-image'
import { Link } from 'gatsby'
import React from 'react'
import styled from '@emotion/styled'

const Wrapper = styled.div`
`

const ThumbnailWrapper = styled.div`
`

const TitleWrapper = styled.div`
`

const Title = styled.h3`
`

const ArticleItem = props => {
  return (
    <Wrapper>
      <ThumbnailWrapper>
        <Link to={`/${props.slug}`}>
          <Img fluid={props.heroImage.fluid} backgroundColor={'#eeeeee'} />
        </Link>
      </ThumbnailWrapper>
      <TitleWrapper>
        <Link to={`/${props.slug}`}>
          <Title>{props.title}</Title>
        </Link>
      </TitleWrapper>
    </Wrapper>
  )
}

export default ArticleItem

2. サイドバーのコンポーネントを作成

GraphQLで新着記事を取得し1で作成したコンポーネントに渡します。

こちらもstyleはお好みでどうぞ！

src/components/Sidebar.js
import { graphql, useStaticQuery } from "gatsby"
import ArticleItem from './ArticleItem'
import React from 'react'
import styled from '@emotion/styled'

const Wrapper = styled.div`
`

const List = styled.div`
`

const SectionTitle = styled.h2`
`

const Sidebar = () => {
  const data = useStaticQuery(graphql`
    query {
      allContentfulPost(sort: { fields: [publishDate], order: DESC }, limit: 20) {
        edges {
          node {
            slug
            title
            publishDate
            heroImage {
              fluid(maxWidth: 1800) {
                ...GatsbyContentfulFluid_withWebp_noBase64
              }
            }
          }
        }
      }
    }
  `)

  const posts = data.allContentfulPost.edges
  return (
    <Wrapper>
      <SectionTitle>新着記事</SectionTitle>
      <List>
        {posts.map(({ node }) => {
          return (
            <ArticleItem
              key={node.slug}
              title={node.title}
              heroImage={node.heroImage}
              slug={node.slug}
            />
          )
        })}
      </List>
    </Wrapper>
  )
}

export default Sidebar

3. 記事ページのtemplateにサイドバーを挿入する

2で作成したコンポーネントを入れます

こちらもstyleはお好みでどうぞ！
divでくくったりしてflexとか使うとサイドに配置できると思います

src/templates/post.js
+ import Sidebar from '../components/Sidebar'

  return (
    <Layout>
      <Hero title={title} image={heroImage} height={'50vh'} />
      <Container>
        {tags && <TagList tags={tags} basePath={basePath} />}
        <PostDetails
          date={publishDate}
          timeToRead={body.childMarkdownRemark.timeToRead}
        />
        <PageBody body={body} />
+       <Sidebar />
      </Container>
      <PostLinks previous={previous} next={next} basePath={basePath} />
    </Layout>
  )

おわりに

無事にサイドバーを実装できました。
css周りはお好みで調整をお願いします

それでは！