DEVELOPMENT
web
node
js
Gatsby
目次
Gatsby JSでのblogのスターターを使った際、マークダウンファイルの中に、記事のカバーimage等のパスを設定し、リストページでその画像を使いたいことがあると思います。
その際、そのマークダウンファイルで指定した画像ファイルをindexページや、記事ページで扱う方法を紹介します。
サクッと出来るかと思いましたが、リファレンス通りやってもエラーとなり、全く動かなく、手こずったので
書いておこうと思います。
▶ 参考
Gatsby JSについてはこちらを見て下さい。 Gatsby js でブログを作成するのは簡単だった
前提
$ gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-bloggatsby-starter-blog でgatsby jsが動く環境にある
必要なpluginのインストール
yarn add gatsby-transformer-sharp gatsby-plugin-sharp gatsby-remark-images gatsby-image※スターターの時点で入っているものもある
Configの設定
マークダウンファイル中で設定した画像パスをプロセスする
gatsby-remark-imagesを
gatsby-transformer-remarkのoptionsに設定します。
- maxWidth
- quality
- linkImagesToOriginal をその中に設定します
他の詳しくは ここ
- gatsby-config.js
plugins: [
'gatsby-plugin-catch-links',
'gatsby-transformer-sharp',
'gatsby-plugin-sharp',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'blog',
path: `${__dirname}/blog`
}
},
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-images',
options: {
maxWidth: 好きなサイズに,
quality: 90,
linkImagesToOriginal: true,
}
}
]
}
}]markdownファイルにimage pathを設定
---
title: コリコリ
date: "xxxx-xx-xx xx:xx:xx"
description: "説明文"
avatar: './avatar.jpg' < これを追加
---この場合、ファイルの構成は
content/
- blog/
- hello-world
- index.md
- avatar.jpg記事と同じ階層にimgが配置されている状態
indexページに入れてみる
- src/pages/index.jsx
import Image from "gatsby-image"
.
.
.
const BlogIndex = ({ data, location }) => {
return (
<div>
.
.
// 画像表示部分
<Image
fluid={node.frontmatter.avatar.childImageSharp.fluid}
/>
<Image
fixed={node.frontmatter.avatar.childImageSharp.fixed}
/>
.
.
.
</div>
)
}
export default BlogIndex
export const pageQuery = graphql`
query {
site {
siteMetadata {
title
}
}
allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
edges {
node {
excerpt
fields {
slug
}
frontmatter {
date(formatString: "MMMM DD, YYYY")
title
description
avatar {
childImageSharp {
fixed(width: 50, height: 50) {
...GatsbyImageSharpFixed
}
fluid(maxWidth: 1000, quality: 90) {
...GatsbyImageSharpFluid_withWebp_tracedSVG
}
// 好きなタイプを選んで下さい詳細は
// こちら → https://www.gatsbyjs.org/packages/gatsby-image/
}
}
}
}
}
}
}
`記事詳細ページ（blog-post.js）でも同じように書けば使えます。
※ gatsby-imageの仕様はこちら
material-uiのAvatarコンポーネントを使いたい時
Materia UIのAvatarなど、画像のパスをわたして、画像を描画する際、上記の方法ではうまくいきません。 だからといって、pathをそのまま渡しても描画されませんね。
その場合は下記のようにします。
<Avatar aria-label="recipe" className={classes.avatar} src={node.frontmatter.avatar.childImageSharp.fixed.src} />最後に.srcをつけるだけです。
まとめ
意外と記載がなく、苦労しました。
パスの取得方法は探すのに結構時間がかかってしまいました。
お役に立てたら幸いです。
⬇🙏よかったらシェアお願いします🙏⬇
Nobuyuki Ukai
株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス２軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから