참고

학습 내용

1. Markdown을 이용할 준비

2.GraphQL Playground 도입

3.Markdown을 데이터로 사용

1. Markdown을 이용할 준비

플러그인 설치(3개)

⑴ gatsby-transformer-remark

yarn add gatsby-transformer-remark

⑵ gatsby-remark-images

yarn add gatsby-remark-images gatsby-plugin-sharp

⑶ gatsby-remark-relative-images

yarn add gatsby-remark-relative-images

gatsby.config.js에 추가 (플러그인 3 분)

gatsby-source-filesystem의 option에 취득하는 데이터를 추기한다

gatsby.config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-sass`,
    `gatsby-plugin-react-helmet`, //gatsby-starter-defaultでは既に設定されている
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
//追記 /postのmdファイルを扱う為追記
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/posts`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
// 追加 gatsby-transformer-remark
// https://www.gatsbyjs.com/plugins/gatsby-transformer-remark/?=remark
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        // CommonMark mode (default: true)
        commonmark: true,
        // Footnotes mode (default: true)
        footnotes: true,
        // Pedantic mode (default: true)
        pedantic: true,
        // GitHub Flavored Markdown mode (default: true)
        gfm: true,
        // Plugins configs
        plugins: [],
      },
    },
// 追加 gatsby-remark-images
// https://www.gatsbyjs.com/plugins/gatsby-remark-images/?=remark
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 590,
            },
          },
        ],
      },
    },
// 追加 gatsby-remark-relative-images
// https://www.gatsbyjs.com/plugins/gatsby-remark-relative-images/?=remark%20re
    // Add static assets before markdown files
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/images`,
        name: 'images',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          // gatsby-remark-relative-images must
          // go before gatsby-remark-images
          {
            resolve: `gatsby-remark-relative-images`,
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 590,
            },
          },
        ],
      },
    },
  ],
}

2.GraphQL Playground의 도입

package.json

    "develop": "GATSBY_GRAPHQL_IDE=playground gatsby develop"

개발 서버가 http://localhost:8000/___graphql에서 실행 중일 때 gatsby develop 대신 npm run develop을 사용하여 액세스

3. Markdown을 데이터로 이용

데이터 준비

쿼리를 작성하고 검색 가능한 데이터를 확인합니다.

쿼리를 코드 쪽으로 복사

src/posts/blog-001.md

---
title: "タイトル　001"
date: "2020-04-04"
thumbnail: "../images/image_001.jpg"
---

Gatsbyブログ作成チュートリアル001
![Sample](../images/image_001.jpg)
## topic

1. list1
2. list2
3. list3

gatsby-source-filesystem의 option에 지정된 경로의 데이터를 얻을 수 있습니다.

allMarkdownRemark > edges > node > frontmatter

title

date

thumbnail

index.js

import { graphql, useStaticQuery } from "gatsby" //追加

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    query {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
　　　　　　　 date
              title
              thumbnail {
　　　　　　　　　name
　　　　　　　 }
            }
          }
        }
      }
    }
  `)
  return (
//使用コンポーネント
  )
}