👶「GatsbyJSにサムネイル画像をつけたい」その1

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

動機

👶「GatsbyJSのブログ、CSS書いてみたけど…ダサくね???
(👶リサーチ中)おしゃれなブログにはみんな画像🗻が入ってる。つまり画像を入れればおしゃれになるのでは?助けて、🧛‍♀️」
🧛‍♀️「あい」

今回の環境:

Gatsby 2.23.3
React 16.12.0
コードはこちら: https://github.com/yuriacats/yuriacatsblogs
完成品はこちら: https://yuriacats.site

手順表

  • Index.mdのヘッダー部分の書き換えとデフォルト画像の設定 ←今回
  • blog-post.jsの変更 ←今回
  • index.jsの変更 ←次回やる
  • OGP画像の設定 ←次回やる(予定)
  • 投稿通知設定 ←次回やる(予定)

Index.mdのヘッダー部分の書き換えとデフォルト画像の設定

Index.md

title: タイトルです 
date: "2020-10-28"  
description: これからのブログで実装します。
tags: [タグを,配列で,渡します]  
thumbnail: "Hoge.png"

上記のようにタグを作ります。ここでは一番最後の行の「thumbnail」を覚えておきましょう。
そして、予め content/assets 以下にデフォルトの画像を加えておきましょう。

blog-post.jsの変更

サムネイル画像の定義付け

const thumbnail_image=post.frontmatter.thumbnail.childImageSharp.fluid;

(中略)

<Image fluid={thumbnail_image}/>

👶「サムネイル画像定義してない記事でエラーでちゃったぴえん(;_;)」
🧛‍♀️「デフォルト画像の定義しないと、画像定義してないのでエラー出るからIF文で場合分けしてデフォルト画像に設定くらいしろ」
👶「あい」

if (post.frontmatter.thumbnail){
    const thumbnail_image=post.frontmatter.thumbnail.childImageSharp.fluid;
}
else{
    const thumbnail_image=data.def_image.childImageSharp.fixed;
}

🧛‍♀️「変数代入くらい三項演算子使えよ。」
👶「あい」

  const thumbnail_image= post.frontmatter.thumbnail ? post.frontmatter.thumbnail.childImageSharp.fluid : data.def_image.childImageSharp.fixed ;

👶「これで、<Image fluid={thumbnail_image}/> を任意の場所に突っ込めばサムネイル画像が出せるのね。 後はSassでよしなにすればいいか」

GraphQLの書き換え

🧛‍♀️「export const pageQuery = graphql以下に書かれている部分を書き換えて、デフォルトのサムネイルの画像の定義と、個別設定した、サムネイル画像の定義をしていくぞ。」
👶「…GraphQLナニモワカラナイ」
🧛‍♀️「ここは、src/components/bio.jsの顔写真の画像を取るコードを参照にしているぞ いい感じにコピペしろ 」

    def_image: file(absolutePath: { regex: "/defalt.png/" }) {
        childImageSharp {
          fixed(width: 400, height: 300) {
            ...GatsbyImageSharpFixed
          }
        }
      }

🧛‍♀️「次に、Markdownに定義したサムネイル画像を定義していくぞ」
🧛‍♀️「ここで最初にthumbnail と定義し、画像の相対パスを付け加えたから無事見つけることができる。」
👶「じゃあ、わかりやすくするために全部babyに置き換えても行けるんだね。」
🧛‍♀️「……(それ逆に可読性下がらないか…?確かにthumbnailという名前もそれほど良いとは思っていないが。詳しい有志の方このへんってどうやって名前付けしてるのかご教授願いたいです。)」

(markdownEwmark 内)

       thumbnail {
          childImageSharp {
            fluid(maxWidth: 1280) {
              ...GatsbyImageSharpFluid
            }
          }
        }

🧛‍♀️「そして、それらを全部を合体させるとこうなる」

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
      }
    }
    def_image: file(absolutePath: { regex: "/defalt.png/" }) {
        childImageSharp {
          fixed(width: 400, height: 300) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
        thumbnail {
          childImageSharp {
            fluid(maxWidth: 1280) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`

終わりに

👶「わーい、これで記事の初めにいい感じに画像がついたよ!」
👶「ただこれ、maxWidthの値を書き換えるとバグったりするからちょっと不安定よね」

👶「これ記事一覧とかSNSに出したときもいい感じに画像できるようにしたいよ。助けて🧛‍♀️」

つづく

参考にさせていただいた記事

https://www.corylog.com/gatsby/gatsby005/
https://codelabo.com/posts/20200329154929

Gatsby のImageについてのDocks
https://www.gatsbyjs.com/plugins/gatsby-image/

$_GET,$_postと$REQUEST
winsockブロードキャストパケットの送受信