gatsby의 작업 내역

gatsby 입문 자습서를 다루는 0. 개발 환경 설정
gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (1)
gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (2)
gatsby 입문 자습서 2. 개츠비 스타일링 개요
gatsby 시작하기 튜토리얼 3. 중첩 된 레이아웃 구성 요소 만들기
gatsby 입문 자습서 4. 개츠비 데이터
gatsby 시작하기 자습서 5. 소스 플러그인과 쿼리 된 데이터 렌더링
이번：gatsby 입문 튜토리얼을 해낸다 6. 변압기 플러그인※Transformer plugins의 google 번역
gatsby 입문 튜토리얼을 다루는 7. 프로그램으로 데이터로부터 페이지를 작성한다
gatsby 입문 자습서 8. 게시할 사이트 준비
gatsby 입문 블로그 만들어서 서버에 올려보자

튜토리얼

이번에 실시하는 gatsby의 튜토리얼은 이쪽
htps //w w. tsbyys. 코 m / 쓰리 아 l / 파 rt-x /
튜토리얼의 시작 부분에 이렇게 썼습니다. 이 중요

이전 튜토리얼에서는 소스 플러그인이 데이터를 개츠비 데이터 시스템에 어떻게 캡처하는지 보여주었습니다. 이 튜토리얼에서는 변환 플러그인이 소스 플러그인이 가져온 원시 콘텐츠를 변환하는 방법을 배웁니다. 소스 플러그인과 트랜스포머 플러그인의 조합은 Gatsby 사이트를 구축할 때 필요할 수 있는 모든 데이터 소스 및 데이터 변환을 처리할 수 있습니다.

※google 번역
튜토리얼을 대략 본 느낌, 블로그의 투고 기능을 구현할 수 있게 되는 것일까.
빨리 가자.
소스는 지난번 만든 사람을 사용합니다.

Transformer plugins

Transformer plugins

마크다운 파일을 사이트에 추가하고 변환 플러그인과 GraphQL을 사용하여 HTML로 변환하는 방법을 이해합니다.
마크다운 파일(src/pages/sweet-pandas-eating-sweets.md)을 만듭니다.

src/pages/sweet-pandas-eating-sweets.md

---
title: "Sweet Pandas Eating Sweets"
date: "2017-08-10"
---

Pandas are really sweet.

Here's a video of a panda eating sweets.

<iframe width="560" height="315" src="https://www.youtube.com/embed/4n0xNbfJLR8" frameborder="0" allowfullscreen></iframe>

http://localhost:8000/my-files

나왔다!
이것은 gatsby-source-filesystem을 항상 추가하는 새 파일을 스캔하는 것 같습니다.
좋아. 더 이상 서버 처리가 필요하지 않습니다.
계속 transformer plugin 설치
서버를 중지하고 다음을 수행합니다.npm install --save gatsby-transformer-remark※tutorial-part-four 디렉토리 바로 아래에서 실행
설치 후 gatsby-config.js 수정

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Pandas Eating Lots`,
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-transformer-remark`,←これ追記
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

재부팅

오, 추가되었습니다.

튜토리얼 거리에서 쿼리를 실행하여 튜토리얼 거리의 결과. 좋아.

Create a list of your site’s markdown files in

게시물 목록을 색인에 표시하도록 다음을 작성하십시오.

src/pages/index.js

import React from "react"
import { graphql } from "gatsby"
import { css } from "@emotion/core"
import { rhythm } from "../utils/typography"
import Layout from "../components/layout"

export default function Home({ data }) {
  console.log(data)
  return (
    <Layout>
      <div>
        <h1
          css={css`
            display: inline-block;
            border-bottom: 1px solid;
          `}
        >
          Amazing Pandas Eating Things
        </h1>
        <h4>{data.allMarkdownRemark.totalCount} Posts</h4>
        {data.allMarkdownRemark.edges.map(({ node }) => (
          <div key={node.id}>
            <h3
              css={css`
                margin-bottom: ${rhythm(1 / 4)};
              `}
            >
              {node.frontmatter.title}{" "}
              <span
                css={css`
                  color: #bbb;
                `}
              >
                — {node.frontmatter.date}
              </span>
            </h3>
            <p>{node.excerpt}</p>
          </div>
        ))}
      </div>
    </Layout>
  )
}

export const query = graphql`
  query {
    allMarkdownRemark {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "DD MMMM, YYYY")
          }
          excerpt
        }
      }
    }
  }
`

query에서 title과 날짜를 얻고 표시하는 느낌.

좋아.
또 1건 md 파일을 추가하자.

src/pages/pandas-and-bananas.md

---
title: "Pandas and Bananas"
date: "2017-08-21"
---

Do Pandas eat bananas? Check out this short video that shows that yes! pandas do seem to really enjoy bananas!

<iframe width="560" height="315" src="https://www.youtube.com/embed/4SZl1r2O_bY" frameborder="0" allowfullscreen></iframe>

좋아! 재부팅이지만 불필요하고 소코로 반영되는 것이 훌륭합니다!
query를 이하로 하면, 날짜의 내림차순으로 취득할 수 있다

src/pages/index.js(query 부분)

export const query = graphql`
  query {
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {←ここ修正
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "DD MMMM, YYYY")
          }
          excerpt
        }
      }
    }
  }
`

정렬이 바뀌었다!

자습서는 여기까지?
어쩌면 앞으로 md 파일을 표시하는 처리가 있을까.

이번은 여기까지.

고마워요.