カートに入れました

gatsby-starter-blogのブログ投稿記事にサムネイル画像を設定する

編集するファイル

  • 投稿記事のmarkdownファイル
  • 投稿記事一覧を表示させるファイル
  • src/components/blogs.js

上から一つずつ見ていきます

投稿記事のmarkdownファイル

設定項目にhero欄を追加する markdownファイルと同じディレクトリに今回は1.pngという画像を置く

投稿記事一覧を表示しているファイル

  • src/pages/index.js
  • src/templates/blog-list.js
  • src/templates/tags-band-blog-list.js

それぞれのGraphQLに項目を追加

GraphQLにどの項目を追加したらいいかは http://localhost:8000/___graphql にアクセスして確かめることが出来る

childImageSharp { fluid { originalImg}}

  • fluidは古いらしい

今回は

hero {
  id
  childImageSharp {
    original {
      src
    }
  }
}

をfrontmatterに追加

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      limit: 5
      skip: 0
    ) {
      nodes {
        excerpt
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
          description
          hero {
            id
            childImageSharp {
              original {
                src
              }
            }
          }
        }
      }
    }
  }
`

サムネイルを表示するコンポーネントを編集する

src/components/blogs.jsはGraphQLで取得できる

dataの中の

const posts = data.allMarkdownRemark.nodes

を引数に持つコンポーネント

src/components/blogs.js 
import * as React from "react"
import { Link } from "gatsby"


const Blogs = ({ posts }) => {

  return (
    <ol style={{ listStyle: `none` }}>
      {posts.map(post => {
        const title = post.frontmatter.title || post.fields.slug

        return (
          <li key={post.fields.slug}>
            <article
            className="post-list-item"
            itemScope
            itemType="http://schema.org/Article"
            >
              {
                post.frontmatter.hero ?
                  <div style={{
                    float: "left",
                    maxWidth: "250px",
                    maxHeight: "250px",
                    width: "30%",
                    margin: "24px",
                    marginLeft: 0,
                  }}>
                    <img
                      alt={`${post.frontmatter.title}`}
                      src={`${post.frontmatter.hero.childImageSharp.original.src}`}
                      style={{ width: "100%", borderRadius: 24, }}
                    />
                    <small>{post.frontmatter.date}</small>
                  </div>
                : ""
              }
              <header>
                  <h2>
                  <Link to={`${post.fields.slug}${post.frontmatter.title}`} itemProp="url">
                      <span itemProp="headline">{title}</span>
                  </Link>
                  </h2>
                  {
                    !post.frontmatter.hero ? <small>{post.frontmatter.date}</small> : ''
                  }
              </header>
              <section>
                  <p
                  dangerouslySetInnerHTML={{
                      __html: post.frontmatter.description || post.excerpt,
                  }}
                  itemProp="description"
                  />
              </section>
            </article>
          </li>
        )
      })}
    </ol>
  )
}

export default Blogs

画像を表示している部分は

<img
  alt={`${post.frontmatter.title}`}
  src={`${post.frontmatter.hero.childImageSharp.original.src}`}
  style={{ width: "100%", borderRadius: 24, }}
/>

これで記事一覧にサムネイルが表示できる

参考 :