이 게시물에서는 블로그 게시물에 전체 크기 이미지 표지를 추가하는 방법을 설명합니다.

Gatsby의 좋은 점은 다양한 화면 크기에 다양한 이미지를 수동으로 제공하는 데 신경 쓰지 않고 플러그인으로 이를 매우 훌륭하게 처리할 수 있다는 것입니다. 각 기기는 최적화된 커버 버전을 받게 됩니다. 정돈된!

이 게시물은 « 10x Better Gatsby » 시리즈의 일부로, Gatsby를 튜닝, 부스트 및 조정하는 것에 대한 개인적인 경험을 공유합니다. Gatsby 튜닝에 대한 더 좋은 내용을 게시하겠습니다. 확인 해봐!

가정

마크다운이 이미 설정되어 있다고 가정합니다. 이는 이 플러그인이 설치 및 구성되었음을 의미합니다.

gatsby-source-filesystem

gatsby-transformer-remark

지침

#1. 구성 편집

구성에 플러그인이 설정되어 있는지 확인하십시오.

// gatsby-config.js
module.exports = {
  /*
    ...
  */
  plugins: [
    /*
    ...
    */
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 620,
            },
          },
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    /*
      ...
    */
  ],
}

#2. 마크다운 파일 업데이트

마크다운 파일 근처에 이미지를 놓고 마크다운 파일(제 경우에는 post.md)을 업데이트하여 cover 필드를 이미지로 지정합니다.

---
title: 'How Failing With Pomodoro Technique Made Me 2x Better Programmer'
date: '2019-03-27'
cover: './cover.png'
---

이제 GraphQL 쿼리를 업데이트하겠습니다.

#삼. GraphQL 쿼리 업데이트

blog-post.js

const query = graphql`
  query BlogPostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        title
        cover {
          publicURL
          childImageSharp {
            sizes(maxWidth: 2000) {
              ...GatsbyImageSharpSizes
            }
          }
        }
      }
    }
  }
`

이제 구성 요소 코드를 편집할 수 있습니다.

#4. 반응 구성 요소 업데이트

gatsby-image가 설치되어 있는지 확인하십시오. 이것은 모든 응답 마법을 처리할 구성 요소입니다.

yarn add gatsby-image

이미지를 전체 크기로 표시하기 위해 cover 데이터를 내 Layout 구성 요소에 전달합니다.

<Layout
  location={props.location}
  title={siteTitle}
  cover={data.frontmatter.cover}
>
  {/* ... */}
</Layout>

그런 다음 레이아웃 구성 요소에 해당 데이터를 표시합니다.

import Img from 'gatsby-image'

구성 요소 사용은 매우 간단합니다. 이것은 내 Layout.js에서 수행하는 방법입니다.

!!cover ? <Img sizes={cover.childImageSharp.sizes} /> : null

결과

이 간단한 단계로 얻을 수 있는 결과의 예입니다.


이제 모든 장치에 빠르게 로드되도록 최적화된 멋진 외관의 표지에 만족하실 수 있습니다.

여기요! <10x Better Gatsby> 시리즈의 한 장입니다. 당신이 감사하게 생각하는 것을 공유하겠습니다. 확인해보세요!