GatsbyJS에서 마크다운 파일을 분리하기 위해 frontmatter를 사용하지 마세요. 파일 시스템을 사용하세요.

소개

Gatsby에서 마크다운 파일을 frontmatter 필드보다 더 의미 있는 방식으로 분리하는 방법을 안내해 드리겠습니다.

Markdown 분할이 일반적으로 수행되는 방법

가장 오랫동안 게시물과 페이지 유형 간의 차이를 지정하기 위해 머리말 필드와 같은 솔루션을 사용해야 했습니다.

내가 배우기 전에 어떤 마크다운 파일이 페이지인지 게시물인지 알도록 GraphQL에 지시할 수 있었습니다. 내 머리말은 다음과 같습니다.

---

title: 'How to be productive as a programmer with ADHD'

date: '2020-06-19'

published: true

tags: ['adhd', 'productivity']

coverImage: cover.jpg

type: article

description: Being productive while having ADHD can sometimes feel like a colossal task.

---

게시물이나 기사만 필터링할 수 있도록 type: article를 사용합니다.

왜 나쁜가

모든 마크다운 파일에 추가 구문을 추가합니다

.

오류가 발생하기 쉽습니다

.

파일 시스템은 이 작업을 위해 설계되었습니다.

게시물이 누락된 이유를 파악하지 않고 콘텐츠 작성에 집중할 수 있도록 블로그에서 기사를 생성하는 방법을 단순화하고 싶었습니다.

그리고 나는 이미 다음과 같은 폴더 구조를 가지고 있습니다.



GatsbyJS가 마크다운 파일이 폴더에 기반한 페이지인지 블로그 게시물인지 알 수 있다면 좋지 않을까요?

그것은 나에게 더 의미가 있습니다.

전제 조건

gatsby-source-filesystem가 설치되어 있어야 합니다.
gatsby-transform-remark 또는 gatsby-plugin-mdx를 사용하는 경우 이미 설치되어 있을 것입니다. 👍

1단계 - 폴더 구조 만들기

사용할 폴더 구조를 만듭니다.

나는 게시물을 내 코드에서 분리하는 것을 좋아하므로 다음과 같이 내 게시물을 루트 수준에 배치합니다project-folder/content.

이것이 내가 사용할 폴더 구조입니다.

📂 content

├── 📂 blog

│ ├── 📂 hello-world

│ │ ├── 📄 index.md

│ │ └── 🖼 salty\_egg.jpg

│ ├── 📂 my-second-post

│ │ └── 📄 index.md

│ └── 📂 new-beginnings

│ └── 📄 index.md

└── 📂 pages

   ├── 📂 about

   │ ├── 📄 index.md

   │ └── 🖼 profile-pic.jpg

   └── 📂 now

      └── 📄 now.md

각 페이지 또는 블로그 게시물에는 자체 폴더가 있습니다. 이를 통해 정리가 필요한 이미지나 파일을 쉽게 보관할 수 있습니다.

2단계 - Gatsby에서 파일 시스템 설정

없는 경우 gatsby-source-filesystem를 설치하십시오.

yarn add gatsby-source-filesystem

Gatsby Source File System을 사용하여 폴더를 분리할 것입니다.

이렇게 하려면 먼저 gatsby-source-filesystem를 gatsby.config.js에 플러그인으로 추가합니다. 이미 추가했을 수도 있습니다.

분리하려는 각 유형의 콘텐츠에 대해 이름 및 경로와 함께 새 gatsby 소스 파일 시스템 개체를 추가합니다.

우리의 경우 게시물과 페이지를 분리하고 싶기 때문에 2개의 섹션이 필요합니다.

다음과 같아야 합니다.

plugins: [

{

      resolve: `gatsby-source-filesystem`,

      options: {

        path: `${\_\_dirname}/content/blog`,

        name: `blog`,

},

},

{

      resolve: `gatsby-source-filesystem`,

      options: {

        path: `${\_\_dirname}/content/pages`,

        name: `page`,

},

},

...

}

3단계 - Gatsby 구성 업데이트

gatsby-node.js에서 이 코드를 onCreateNode에 추가합니다.

exports.onCreateNode = ({ node, getNode, actions }) => {

const { createNodeField } = actions;

if (node.internal.type === `MarkdownRemark`) {

const parent = getNode(node.parent);

let collection = parent.sourceInstanceName;

createNodeField({

      node,

      name: 'collection',

      value: collection,

});

}

};

MDX를 사용하는 경우 allMarkdownRemark를 Mdx로 바꾸십시오.

먼저 편집 중인 노드가 마크다운 파일인지 확인하고 추가 정보에 액세스할 수 있도록 상위 노드를 가져옵니다.
sourceInstanceName는 마지막 단계에서 설정한 필드gatsby-source-filesystem입니다.
allMarkdownRemark 단독으로는 사용할 수 있는 이 필드가 없으므로 부모로부터 가져와야 합니다.

그런 다음 그것이 속한 컬렉션의 마크다운 노드에 field를 추가합니다.

4단계 - 분리를 시작하자

이제 gatsby에 필터를 전달하여 액세스하려는 컬렉션을 알릴 수 있습니다. 만세! 더 이상 머리말 유형 없음

query {

  allMdx(

sort: { fields: [frontmatter\_\_\_date], order: DESC }

filter: { fields: { collection: { eq: "posts" } } }

) {

    edges {

      node {

        id

        fields {

          slug

}

        frontmatter {

          title

          published

          slug

          date(formatString: "MMMM DD, YYYY")

}

        excerpt(pruneLength: 280)

}

}

}

}

마무리

들러 주셔서 감사합니다! 이것은 내가 GatsbyJS와 관련된 문제를 해결하기 위해 만든 빠른 자습서였습니다. 이 글은 저의 "한달에 블로그 글 하나 쓰기"챌린지의 일부입니다.

이와 같은 더 많은 자습서를 보고 싶으면 에서 또는 내 .

또한 Gatsby의 장점을 더 원한다면 Josh W Comeau을 확인하는 것이 좋습니다. darkmode에 대한 그의 튜토리얼은 내 사이트에 추가하도록 영감을 주었습니다.