Gatsby에서 초안 블로그 게시물 만들기

Originally published on bhansa.github.io

안녕하세요 😃 그래서... 새 블로그를 만들었고 블로그 게시물에 대한 많은 아이디어가 이미 있습니다. 나중에 작업할 수 있도록 프로젝트에서 직접 블로그 게시물 제목 목록이나 일부 초안을 만들 것입니다.

블로그 게시물을 작성하는 동안 작성해야 할 다른 제목이 떠올랐습니다. 귀하는 현재 기사를 버리고 새 기사를 작성하기 위해 이동했습니다.

이제 package.json 에 gh-pages 가 포함되어 있다고 가정하고 npm run deploy 를 사용하고 "deploy": "gatsby build --prefix-paths && gh-pages -d public" 를 사용하여 배포하는 경우 이미 그 중 하나를 완료하고 게시하려고 한다고 가정해 보겠습니다.

완료되지 않은 게시물도 배포할 수 있습니다.

따라서 아직 진행 중이거나 개발 중인 게시물을 몇 개만 숨기고 싶다면 어떻게 해야 할까요?

한 가지 간단한 방법은 마크다운 전면을 사용하는 것입니다. 마크다운 파일에 키 값 쌍을 추가할 수 있습니다.

예시:

---
title: "<title>"
date: <date>
description: "<desc>"
draft: true
---

위의 예에서 추가 매개변수로 draft: true를 추가했으며 DOM을 렌더링하는 동안 동일한 것을 사용할 것입니다.

이미 있는 다른 세부 정보와 함께 graphql 구문에서 동일한 매개변수를 가져올 수 있습니다.

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
            draft // I'm here :)
          }
        }
      }
    }
  }
`

모든 블로그 게시물 목록을 렌더링하는 render 메서드에서 사용합니다.

{
  posts.map(({ node }) => {
    const title = node.frontmatter.title || node.fields.slug
    return (
      <article
        key={node.fields.slug}
        itemScope
        itemType="http://schema.org/Article"
        hidden={node.frontmatter.draft} // like this, using `draft` parameter here
      >
        <header>
          <h3
            style={{
              marginBottom: rhythm(1 / 4),
            }}
          >
            <Link
              style={{ boxShadow: `none` }}
              to={node.fields.slug}
              itemProp="url"
            >
              <span itemProp="headline">{title}</span>
            </Link>
          </h3>
          <small>{node.frontmatter.date}</small>
        </header>
        <section>
          <p
            dangerouslySetInnerHTML={{
              __html: node.frontmatter.description || node.excerpt,
            }}
            itemProp="description"
          />
        </section>
      </article>
    )
  })
}

당신이 본다면 나는 hidden={node.frontmatter.draft} 숨김이 HTML 요소 속성인 곳에 사용했습니다.

여기에서는 모든 블로그 목록에서 게시물만 숨깁니다. 예를 들어 완전히 렌더링하지 않는 등 다른 작업도 수행하도록 선택할 수 있습니다.

그게 다야 이제 게시물 작업을 하고 다른 생성된 게시물과 함께 배포하고 싶지 않다면 프론트매터에 draft: true를 넣고 게시 준비가 되면 제거하면 됩니다 😃✨