Gatsby: 질문-Frontmatter에서 Markdown을 읽는 방법

이 튜토리얼은 이에 대해 설명합니다. 특히 5-7 부 https://www.gatsbyjs.org/tutorial/

또한 시작 도구 중 하나로 시작할 수도 있습니다. 대부분은 이미 마크 다운 지원이 설정되어 있습니다. https://www.gatsbyjs.org/docs/gatsby-starters/

질문은 더 미묘하고 튜토리얼에서 다루지 않으므로 다시 열어 보겠습니다.

제 생각에는 두 가지 옵션이 있습니다.

1. 마크 다운 콘텐츠를 분리하여 파일을 분리하고 경로 링크를 사용할 수 있습니다.

Separate file - let's call it `someContent.md`
```md
### This is the actual content in **MarkDown** format.

- This is the first row
- This is second row
- This is third row
```
and reference that file in your main file (by relative path):
```md
halfBlocks:
  - title: This is first title
    content: "./someContent.md"
```
then in query you could
```
halfBlocks {
  content {
    childMarkdownRemark {
      html
    }
}
```

1. 다른 접근 방식은이를 프로그래밍 방식으로 처리하는 것입니다. frontmatter 필드에 대한 마크 다운 노드를 만들고 createNodeField 를 통해 추가하는 것입니다. 이것은 더 복잡합니다. MarkdownRemark 노드를 만드는 방법을 보려면 Contentful 소스 플러그인을 찾아야 할 것입니다.

안녕하세요 @KyleAMathews 귀하의 제안에 감사드립니다. 나는 그것들을 읽었지만 이것에 대해 완전히 이해하기가 어려웠다. 나는 스타터를 사용하고 있지만 이것은 더 복잡했습니다. 사용 된 스타터 : https://github.com/v4iv/gatsby-starter-business

@pieh 나를 정말 감사합니다. 당신이 옳습니다. 나는 너무 많은 작은 파일을 가질 것이라고 생각했기 때문에 아래 코드로 작업했습니다. 다른 사람이 같은 문제를 가지고있는 경우에도이를 볼 수 있도록 여기에 이것을 문서화하고 있습니다.

1 단계 : 콘텐츠 읽기

Graphql을 통해 정상적으로 내용을 읽고 있습니다. 이것은 마크 다운을 문자열로 제공합니다. 여전히 변환해야합니다.

2 단계 : HTML로 변환

이를 위해 나는 이것을 표시 할 실제 구성 요소에 도달 할 때까지 내용을 문자열로하기로 결정했습니다. 거기에서 마크 다운으로 변환합니다.

이를 프로그래밍 방식으로 수행하는 것에 대한 설명을 추가하십시오. remark-preset-lint-recommended를 무시할 수 있습니다.

설치 비고

yarn add remark remark-preset-lint-recommended remark-html

수입

import remark from 'remark';
import recommended from 'remark-preset-lint-recommended';
import remarkHtml from 'remark-html';

세우다
나중에 렌더링 부분에서 content 가 문자열로 읽힌 마크 다운이라고 가정합니다.

content = remark()
      .use(recommended)
      .use(remarkHtml)
      .processSync(content).toString();

이제 콘텐츠를 HTML로 재 해석 할 수 있습니다.

3 단계 : 마크 다운에 콘텐츠 추가

내가 만난 한 가지 더 있습니다. >- 에 여러 줄을 사용할 때 형식이 적절하지 않았습니다.

content: >-
    ### This is the actual content in **MarkDown** format.
    - This is the first row
    - This is second row

그러나 파이프 기호 | 잘 작동합니다.

content: |
    ### This is the actual content in **MarkDown** format.
    - This is the first row
    - This is second row

지금은 이것을 닫습니다. 원하시면 언제든지 재개 장하십시오.

감사!!

나는 표제 (제목, 정확한 발췌)에도 마크 다운을 사용하고 싶습니다. 기본적으로 지원되어야한다고 생각합니다.

gatsby-transformer-remark 가 예를 들어 title.md 가 마크 다운 필드라는 것을 이해할 수 있도록 명명 규칙을 갖는 것이 좋습니다.

@omeid @ thorn0 이것은 우리가 gatsby-transformer-remark에서 직접 지원하는 것일 수 있지만 그 동안 https://github.com/gatsbyjs/gatsby/issues/5729#issuecomment 와 같이이 작업을 수행하는 플러그인을 만들 수 있습니다. -395701042 및 createNodeField

이미 종료 된 문제에 대해 댓글을 남겨 주셔서 죄송합니다.하지만 제가 사용했던 gatsby-node.js 에서 사용했던 스 니펫을 공유하고 싶었습니다.

// Need to `yarn add remark remark-html`, then include the following code in
// gatsby-node.js.
const remark = require('remark');
const remarkHTML = require('remark-html');

exports.onCreateNode = ({ node }) => {
  // Conditionals, etc. can be used here, but I omitted those just for example's sake.
  const markdown = node.frontmatter.my_field;
  node.frontmatter.my_field = remark()
    .use(remarkHTML)
    .processSync(markdown)
    .toString();
  return node;
};

createNodeField 를 사용하지 않고 그렇게해도 괜찮습니까? 혼란 스럽습니다.

@ thorn0 은 node.frontmatter.my_field = createNodeField 대신 node 변경하면 버그를 디버깅하기 어려울 수 있기 때문입니다.

@amitjindal @nshki 잘 작동하지만 "react-flickity-component"라이브러리를 설치했기 때문에 프로덕션 빌드 프로세스가 완전히 충돌합니다.

success delete html and css files from previous builds — 0.626 s
success open and validate gatsby-config — 0.018 s
success copy gatsby files — 0.075 s
success onPreBootstrap — 2.782 s
error UNHANDLED EXCEPTION


  TypeError: Cannot set property 'Compiler' of null

  - index.js:16 plugin
    [blog]/[remark-html]/index.js:16:17

  - index.js:271 Function.use
    [blog]/[unified]/index.js:271:25

  - gatsby-node.js:63 exports.onCreateNode.postscriptumsMarkdown.forEach.postscr    iptum
    /home/projects/blog/gatsby-node.js:63:12

  - Array.forEach

  - gatsby-node.js:61 Object.exports.onCreateNode
    /home/projects/blog/gatsby-node.js:61:29

  - api-runner-node.js:110 runAPI
    [blog]/[gatsby]/dist/utils/api-runner-node.js:110:36

  - api-runner-node.js:187 
    [blog]/[gatsby]/dist/utils/api-runner-node.js:187:33

  - map.js:27 
    [blog]/[async]/internal/map.js:27:9

  - eachOfLimit.js:66 replenish
    [blog]/[async]/internal/eachOfLimit.js:66:17

  - eachOfLimit.js:50 iterateeCallback
    [blog]/[async]/internal/eachOfLimit.js:50:17

  - onlyOnce.js:12 module.exports
    [blog]/[async]/internal/onlyOnce.js:12:16

  - map.js:29 
    [blog]/[async]/internal/map.js:29:13

  - util.js:16 tryCatcher
    [blog]/[bluebird]/js/release/util.js:16:23

  - nodeify.js:23 Promise.successAdapter
    [blog]/[bluebird]/js/release/nodeify.js:23:30

  - promise.js:566 Promise.module.exports.Promise._settlePromise
    [blog]/[bluebird]/js/release/promise.js:566:21

  - promise.js:606 Promise.module.exports.Promise._settlePromiseCtx
    [blog]/[bluebird]/js/release/promise.js:606:10


Waiting for the debugger to disconnect...

Process finished with exit code 130 (interrupted by signal 2: SIGINT)

Webpack에서 라이브러리를 제외하려고하면 작동하지 않습니다 ( @see https://github.com/gatsbyjs/gatsby/issues/7599).

안녕하세요 David (@comxd), 여행 중이 어서 죄송합니다.
불행히도 나는 이것에 대한 통찰력이 없습니다. 코드를 확인하려고했습니다. null의 컴파일러는 비고 라이브러리에서 오는 것 같습니다.

gatsby-node.js 파일에서 루프를 사용하는 것 같습니다.
마크 다운이 아니거나 비어있는 일부 콘텐츠와 관련이있을 수 있으며 처리하려고합니다. 거기에 console.log 문을 넣고 비어있는 것이 원인이되는 패턴을 찾는 지 확인하십시오.

이것은 완전히 꺼져있을 수 있지만 HTML로 변환해야하는 마크 다운이 필요한 모든 곳에서 템플릿에서 사용할 수있는 아래와 같은 마크 다운 구성 요소를 만들 수는 없습니다.

import React from 'react'
import PropTypes from 'prop-types'
import showdown from 'showdown'

const converter = new showdown.Converter()

const MarkdownContent = ({ content, className }) => (
  <div className={className} dangerouslySetInnerHTML={{ __html: converter.makeHtml(content) }} />
)

MarkdownContent.propTypes = {
  content: PropTypes.string,
  className: PropTypes.string,
}


export default MarkdownContent

@blakenoll 확실히 완전히 꺼진 것은 아닙니다! 합리적인 접근 방식입니다.

즉, Gatsby의 큰 이점 중 하나는 빌드 타임에 이러한 작업을 수행한다는 것입니다. 이는 최종 사용자에게 Markdown 파서를 구입할 필요가 없기 때문에 좋습니다!

@DSchau 앱이 재수 화 될 때 Markdown 파서가 실제로 사용자에게 배송되지 않습니까?

@blakenoll 즉시 사용 가능한 생각을 사랑하십시오!

gatsby-config.js 내에 포함 된 모든 remark 플러그인 / 구성을 가져올 수있는 것이 있습니까? 그래서 Gatsby의 remark 구현이 제공하는 모든 기능을 복제 할 필요가 없습니다. ? 그러면 노드 필드를 좀 더 쉽게 생성 할 수 있습니다. 그러나 중첩되고 반복 가능한 필드와 페이지 당 콘텐츠의 변형에 대해 생각할 때 엄청나게 번거 롭습니다.

@blakenoll 대결 팁에 감사드립니다. 매우 도움이되었고 프론트 매터에서 HTML을 사용하는 데 필요한 작업을 수행했습니다. 즉, Markdown을 사용하여 페이지의 다른 부분에 다른 콘텐츠 조각을 전달해야하는 웹 페이지를 만드는 데 어색한 접근 방식으로 보입니다.

graphQL 쿼리의 frontmatter 섹션 내에 일종의 markdownParser 함수를 적용 할 수있는 방법이 있습니까? (이미지를 조작 할 수있는 방법과 유사) frontmatter에서 들어오는 markdown 문자열을 구문 분석하고이를 HTML로 변환 할 수 있습니까? graphQL 전문가가 아닙니다 ... 그냥 생각하려고합니다.

Netifly CMS와 함께 Gatsby를 사용하는 경우 IMO b / c는 중요한 문제입니다. Netifly는 다양한 frontmatter 필드가 Markdown을 값으로 받아들이도록하는 옵션을 제공합니다. 그러나 이러한 필드를 쿼리 할 때 HTML로 구문 분석되는 대신 문자열의 마크 다운으로 반환됩니다. @amitjindal 및 @blakenoll 의 솔루션은 작동하지만 @DSchau가 언급했듯이 사용자에게 마크 다운 구문 분석을 피할 수있는 경우 전달하는 것은 바람직하지 않습니다. 나보다 Gatbsy를 더 잘 아는 사람의 생각은?

@skylarweaver 나는 확실히 당신과 같은 페이지에 있습니다. 이 정보를 구문 분석 할 수있는 노드 필드를 만드는 특성을 이해하고 있지만 반복 가능한 필드와 엄청나게 많은 필드 이름 변형이있을 수있는 CMS 데이터를 사용하면 다소 다루기 어려워집니다. 그 당시 모든 Gatsby Remark 플러그인을 재사용하는 명확한 방법이 없다는 것입니다.

@skylarweaver가 말한 내용 +1!

@amitjindal 어쩌면 어리석은 질문일지도 모르지만 ">-"는 무엇을 하는가? netlify cms 스타터를 사용하면 생성 된 출력에>,>-, |가 있거나 전혀없는 것처럼 보입니다.

@ nol13 블록 스칼라 참조, 개행에 관한 것입니다.

표를 어떻게 삽입 할 수 있습니까? 이것은 작동하지 않습니다

content: |
        |   |   |   |   |   |
        |---|---|---|---|---|
        |   |   |   |   |   |
        |   |   |   |   |   |
        |   |   |   |   |   |

@ qnguyen12 https://jmalarcon.github.io/markdowntables/ 와 같은 도구를 사용하여 변환을 도와 드리겠습니다.

예, 테이블이 아닌 소스로 렌더링됩니다.
예를 들면 :

text: |
        test   
        ### This is the actual content in **MarkDown** format.  
        |Month|Savings|Spending|
        |--- |--- |--- |
        |January|$100|$900|
        |July|$750|$1000|
        |December|$250|$300|
        |April|$400|$700|

다음을 생성합니다.
테스트

이것은 MarkDown 형식의 실제 내용입니다.

| 월 | 저축 | 지출 | | --- | --- | --- | | 1 월 | $ 100 | $ 900 | | 7 월 | $ 750 | $ 1000 | | 12 월 | $ 250 | $ 300 | | 4 월 | $ 400 | $ 700 |

@KyleAMathews 감사합니다. 그런 종류의 작업이지만 분명히 설명 플러그인 구성 및 플러그인에 응답해야하거나 다른 결과를 얻습니다. 마크 다운 프론트 매터를 지원할 계획이 있습니까? frontmattermd 필드와 원시 frontmatter ?

@omeid 저는 계획이 없습니다. 이것은 누군가가 만들고 커뮤니티와 공유 할 수있는 훌륭한 플러그인이 될 것입니다!

이 작업을 수행해야하는 플러그인을 만들었습니다 : gatsby-transformer-remark-frontmatter . 내 테스트에서 작동하는 것 같고 클라이언트를 위해 수행하는 프로젝트에서 사용할 계획이지만 여러분이 살펴보고 잘못된 것이 있으면 알려 주시면 감사하겠습니다. , 처음으로 gatsby 플러그인을 작성했습니다. @omeid가 제안한 경로를 취하고 MarkdownRemark 노드에 frontmattermd 필드를 추가합니다.

처음에는 gatsby-transformer-remark가 사용할 새 마크 다운 파일 노드를 생성 할 수 있다는 사실을 깨닫기 전에 gatsby-transformer-remark의 setFieldsOnGraphQLNodeType 함수에서 내 보낸 리졸버를 호출하고 새로운 다른 리졸버 내에서 생성 된 마크 다운 노드. 이렇게하면 필드 열거 형을 사용하여 MarkdownRemark 노드의 모든 필드를 쿼리 할 수 ​​있습니다. 그룹 함수에 사용되는 것과 같은 필드가 정말 마음에 들었지만 실제로는 무엇이든 사용할 수있는 해킹처럼 느껴졌습니다. 후손을 위해 여기 에 저장했습니다.

안녕하세요 @WhiteAbeLincoln 설치 및 테스트를 시도했습니다.
npm i gatsby-transformer-remark-frontmatter npm ERR! code ENOVERSIONS npm ERR! No valid versions available for gatsby-transformer-remark-frontmatter

죄송합니다. 아직 npm에 게시하지 않았다는 것을 깨달았습니다. 퇴근 후 알려 드릴게요.

— 아베 화이트

2019 년 6 월 17 일 22:53에 broeker [email protected] 은 다음과 같이 썼습니다.

안녕하세요 @WhiteAbeLincoln 설치 및 테스트를 시도했습니다.
npm i gatsby-transformer-remark-frontmatter npm ERR! 코드 ENOVERSIONS npm ERR! gatsby-transformer-remark-frontmatter에 유효한 버전이 없습니다.

—
당신이 언급 되었기 때문에 이것을 받고 있습니다.
이 이메일에 직접 답장하거나 GitHub에서 보거나 대화 목록을 음소거하세요.

@WhiteAbeLincoln 나는 gatsby-transformer-remark-frontmatter를 시도 했지만 오류가 발생했습니다.

오류 # 11325

사이트의 "gatsby-node.js"가 존재하지 않는 구성 요소가있는 페이지를 생성했습니다.

이 오류가 발생합니까?

원래 리포지토리 의 문제 로그에

아마도 나는 그것을 올바르게 사용하지 않을 것입니다. 그래서 도움을 주셔서 감사합니다.

@nshki 답변 을 기반으로 하고 노드 변형에 대한

const remark = require("remark");
const remarkHTML = require("remark-html");

exports.onCreateNode = ({ node, actions: { createNodeField } }) => {
  const my_field = node.frontmatter.my_field;

  if (my_field) {
    const value = remark()
      .use(remarkHTML)
      .processSync(my_field)
      .toString();

    // new node at:
    // fields {
    //   my_field_html
    // }
    createNodeField({
      name: `my_field_html`,
      node,
      value
    });
  }
};

수정 : my_field => my_field_html

@aziaziazi 배열에 중첩 된 필드에 대해 동일한 작업을 어떻게 수행 할 수 있습니까?

pressEventsList:
  - body: >-
      *My md content...*
    image: 'https://res.cloudinary.com/press/01.jpg'
  - body: >-
      *My md content...*
    image: 'https://res.cloudinary.com/press/02.jpg'
---

각 pressEventsList[i].body 를 변환해야합니다.

@alexeychikk 저는 pressEventList 를 찾은 다음 콘텐츠를 매핑하여 결과 배열을 만들 수 있습니다.

const remark = require("remark");
const remarkHTML = require("remark-html");

exports.onCreateNode = ({ node, actions: { createNodeField } }) => {
const pressEventList = node.frontmatter.pressEventList;

if (pressEventList) {
  const value = pressEventList.map(event =>
     remark()
    .use(remarkHTML)
    .processSync(event.body)
    .toString()
  )

  createNodeField({
    name: `pressEventList`,
    node,
    value
  });
}
};

createNodeField 를 사용하지 않고 위의 작업을 수행하기 위해 사용자 지정 YAML 태그를 구문 분석하는 플러그인을 만드는 데 관심이 있습니다 (샤프 이미지 URL 구문 분석과 같은 방식).
누구든지 이미지 URL이 파싱되는 코드를 알려줄 수 있습니까?

👋 MDX를 사용하는 사람들을 위해 frontmatter 지원을 추가하는 플러그인을 만들었습니다 https://www.gatsbyjs.org/packages/gatsby-plugin-mdx-frontmatter/

@zslabs , "9 시간 전에"게시 된 솔루션을 자주 보지 않습니다! 내가 돌려 줄게! 잘 했어.

내 페이지 중 하나에 더 복잡한 데이터 구조를 사용하고 싶었 기 때문에이 문제를 해결하기 위해 고심하고 있습니다.
Frontmatter에는 제목 및 추천 이미지와 같은 몇 개의 필드가있는 섹션 배열이 있었고 각 섹션에는 마크 다운으로 만든 본문이 있습니다.
createNodeField를 사용하는 것은 기존의 frontmatter 구조에 추가되지 않고 자체 필드에서 생성 되었기 때문에 논리적으로 연결하는 데 문제가 있었기 때문에 저에게 적합하지 않았습니다.
내 section.body가 쿼리되면 HTML로 반환되도록 createFieldExtension을 사용했습니다.
이것이 좋은 해결책이 아니라면 누군가 나를 바로 잡으십시오. 나에게 효과가있는 것처럼 보이지만 이것이 잘못된 방법이라는 느낌이 들었습니다.

내 frontmatter 구조는 다음과 같습니다.

templateKey: project-entry
date: 2020-06-22T13:16:57.702Z
featuredproject: true
title: Project title
description: Description for listing the project on other pages
featuredimage: Image for listing the project on other pages
featuredpost: false
sections:
  - heading: Section heading
    standout: false
    intro: >-
      Introduction to be displayed separately to body
    body: >-
       ## section title
       * bullet point
       * bullet point
       Some other text here

그리고 gatsby-node.js에서 사용한 코드

exports.createSchemaCustomization = ({actions}) => {
  const { createTypes, createFieldExtension} = actions

  createFieldExtension({
    name: 'toHTML',
    extend:() => ({
        resolve(source) {
          return remark().use(remarkHTML).processSync(source.body).toString()
        }
      })
  })
  const typeDefs = `
  type MarkdownRemark implements Node {
    frontmatter: Frontmatter
  }
  type Frontmatter <strong i="14">@infer</strong> {
    sections: [section]
  }
  type section <strong i="15">@infer</strong> {
    body: String <strong i="16">@toHTML</strong>
  }
  `
  createTypes(typeDefs)
}

관심이있는 다른 사람을 위해 사용자 지정 YAML 유형을 사용하여 임의의 필드를 마크 다운으로 구문 분석 할 수 있도록 해결했습니다.

---
title: My Page
inline: !md Some **bold** and _italic_ text
block: !md |
  ## I'm a H2 title
  [I'm an inline-style link](https://www.google.com)
---

이렇게하려면 사용자 지정 유형을 만든 다음 grey-matter의 YAML 파서를 재정의합니다.

// custom-yaml.js
const yaml = require('js-yaml')
const remark = require('remark')
const remarkHTML = require('remark-html')

const MarkdownYamlType = new yaml.Type('!md', {
  kind: 'scalar',
  construct: data => remark().use(remarkHTML).processSync(data).toString(),
})

const MARKDOWN_SCHEMA = yaml.Schema.create(MarkdownYamlType)

module.exports = doc => yaml.safeLoad(doc, { schema: MARKDOWN_SCHEMA })

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        engines: { yaml: require("path/to/custom-yaml.js") },
      },
    }
  ]
}

나는 이것을 조금 다르게 해결했습니다. @md 라는 필드 확장을 만들고 원하는 추상화를 얻을 수있는 필드 이름 변경과 결합 된 frontmatter 유형 정의에서 사용했습니다.

exports.createSchemaCustomization = ({ actions }) => {
  actions.createFieldExtension({
    name: "md",
    args: {
      from: {
        type: "String!",
        defaultValue: true,
      },
    },

    extend() {
      return {
        args: {
          from: "String!",
        },
        resolve(source, args) {
          const fieldValue = source[args.from]
          return convertToHTML(fieldValue)
        },
      }
    },
  })
  const typeDefs = `
    type MarkdownRemark implements Node <strong i="7">@infer</strong> {
      frontmatter: Frontmatter
    }
    type Frontmatter {
      markdownField: String! <strong i="8">@md</strong>
    }
  `
  actions.createTypes(typeDefs)
}

다음은 사용 예입니다.

...
frontmatter {
        title: markdownField(from: "title")
        subtitle: markdownField(from: "subtitle")
}

나는 이것을 조금 다르게 해결했습니다.

이것은 나를 위해 잘 작동하지 않습니다. 먼저 from 인수에 대해 defaultValue: true 을 거부하는 오류가 발생합니다. 문자열이어야합니다. defaultValue: '' 변경하면 다음 오류가 발생합니다.

Encountered an error parsing the provided GraphQL type definitions:
Argument "from" of required type "String!" was not provided.

  1 |
  2 |     type MarkdownRemark implements Node <strong i="11">@infer</strong> {
  3 |       frontmatter: Frontmatter
  4 |     }
  5 |     type Frontmatter {
> 6 |       markdownField: String! <strong i="12">@md</strong>
    |                              ^
  7 |     }

이것은 해결 방법을 모릅니다.

관심이있는 다른 사람을 위해 사용자 지정 YAML 유형을 사용하여 임의의 필드를 마크 다운으로 구문 분석 할 수 있도록 해결했습니다.

---
title: My Page
inline: !md Some **bold** and _italic_ text
block: !md |
  ## I'm a H2 title
  [I'm an inline-style link](https://www.google.com)
---

이렇게하려면 사용자 지정 유형을 만든 다음 grey-matter의 YAML 파서를 재정의합니다.

// custom-yaml.js
const yaml = require('js-yaml')
const remark = require('remark')
const remarkHTML = require('remark-html')

const MarkdownYamlType = new yaml.Type('!md', {
  kind: 'scalar',
  construct: data => remark().use(remarkHTML).processSync(data).toString(),
})

const MARKDOWN_SCHEMA = yaml.Schema.create(MarkdownYamlType)

module.exports = doc => yaml.safeLoad(doc, { schema: MARKDOWN_SCHEMA })

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        engines: { yaml: require("path/to/custom-yaml.js") },
      },
    }
  ]
}

"gatsby-transformer-remark"에 대한 잘못된 플러그인 옵션이 나타납니다.이 방법을 시도하면?