내 개츠비 사이트를 위해 Contentful에서 MDX로

지난 몇 주 동안 나는 내 사이트의 블로그를 내용이 풍부한 CMS에서 MDX로 옮기는 것을 고려하고 시도해 왔다.
Contentful은 아주 좋은 CMS입니다. 저는 확실히 조금 사용한 적이 있지만, 가격 인하 서류의 양식을 개선하고 싶습니다.나는 어떤 요소가 댓글에 나타나는 방식을 좋아하지 않는다.이 문제를 해결할 수 있는 또 다른 방법이 있을지도 모르지만, 나는 이미 MDX에 관한 책을 많이 읽었다.그것은 갈수록 환영받고 사용되는 것 같다.그것은 내가 원하는 것을 제공할 것 같다. 더 맞춤형 가격 인하 (구성 요소를 통해).
이 사이트는 현재 게이츠비가 창립했다.게이츠비는 무언가를 시작하거나 옮길 때 보통 지침이 많기 때문에 먼저 그곳에 가서 MDX를 어떻게 사용하는지 보겠습니다.그 전에 나는 내 사이트의 내용과 관련된 코드를 삭제해야만 했다.
우선, 나는 나의 gatsby-config.js 파일로 옮겼다. 왜냐하면 여기에 나의 내용 id와 영패(환경 변수를 통해)가 저장되어 있기 때문이다.다음 코드가 삭제되었습니다 -

// gatsby-config.js

// ...
{
  resolve: `gatsby-source-contentful`,
  options: {
    spaceId: `yzwpq1epaq68`, 
    accessToken: process.env.GATSBY_CONTENTFUL_ACCESS_TOKEN,
  }
}
// ...

다음으로, 나는 세 개의 파일을 변경해야 한다.저의 index.js(홈페이지)에 블로그 게시물 목록이 하나 있기 때문에 코드와 GraphQL 조회를 삭제해야 합니다.내용과 관련된 GraphQL 조회를 위해 설정된 블로그 게시물 템플릿도 변경해야 합니다.이것은 우리가 프로그래밍을 통해 내용 게시물에서 페이지를 만드는 곳이기 때문에 gatsby-node.js을 변경해야 합니다.
이것은 내가 삭제한 몇 가지 코드이다 -

// gatsby-node.js

// ...
 exports.createPages = async ({ graphql, actions }) => { 
   const { createPage } = actions 
   const blogPostTemplate = path.resolve(`src/templates/blogPost.js`)    
   const result = await graphql(` 
   {
     allContentfulBlogPost {
       edges {
         node {
           slug
           title
           id
         }
       }
     }
   }
  `) 
  // ...

  result.data.allContentfulBlogPost.edges.forEach(edge => {
    createPage({
      path: `${edge.node.slug}`,
      component: blogPostTemplate,
      context: {
        slug: edge.node.slug,
        title: edge.node.title
      }
    })
    }  
  )

GraphQL 쿼리로 내 콘텐츠 게시물을 가져오고 블로그 게시물 템플릿으로 페이지를 만듭니다.내 새 데이터 소스는 MDX이기 때문에 나는 이 모든 것을 필요로 하지 않는다.pages/index.js(홈페이지)에서 이와 관련된 코드(GraphQL 조회 포함)를 삭제했습니다.나도 나의 전체 블로그 게시물 템플릿을 삭제했다.
프로젝트에서gatsby 원본 코드 패키지를 삭제하지 않은 것 같지만, 우리는 그것을 사용하지 않기 때문에 이렇게 할 수 있습니다.
자, 이제 MDX를 사용할 때가 되었습니다.js.
DX는 어떻게 사용합니까?

설치에 필요한 소프트웨어 패키지

블로그 게시물

을 수용하기 위해 /posts/ 폴더 만들기

업데이트 gatsby-config.js

업데이트 gatsby-node.js (신규 조회 + 페이지 만들기)

새 블로그 템플릿 만들기

(선택 사항) 블로그 목록을 홈 페이지에 추가(pages/index.js)

MDX 구성 요소의 스타일

을 만들거나 설정하는 방법에 대해 알아보기
저는 MDX와 교환에 익숙해지기 위해 자원을 사용했습니다 -
How to convert an existing Gatsby blog to use MDX
Gatsby Docs: Adding Components to Markdown with MDX
MDX Docs: Gatsby
우리는 소프트웨어 패키지를 설치하는 것부터 시작할 수 있다 -

npm install gatsby-plugin-mdx @mdx-js/mdx@latest @mdx-js/react@latest

다음은 gatsby-config.js 파일을 업데이트할 수 있습니다 -

// gatsby-config.js

// ...
module.exports = {
  plugins: [
    `gatsby-plugin-mdx`,
  ]
  // ...
}  

너는 글을 쓰기 시작할 수 있다.지금은 mdx입니다.만들 수 있습니다.mdx 파일은 게시물/폴더에서 시도됩니다.
저는 지금 댓글 폴더를 만들고 예시 댓글을 작성합니다-

mkdir src/posts
touch src/posts/hello-world.mdx

내 거야.mdx 파일,frontmatter (제목, 날짜, slug 등) 를 추가해야 합니다.
일단 만들면mdx 파일에서 로컬 호스트에서 GraphQL 조회: 8000/\uu GraphQL을 확인할 수 있습니다.
우리가 gatsby-node.js에 있을 때, 우리는 정확한 조회를 찾아야 한다.
패키지가 설치되었습니다. gatsby-config.js이 업데이트되었습니다. src/posts이 생성되었습니다. gatsby-node.js이 업데이트됩니다.

// gatsby-node.js

const path = require("path");

exports.createPages = async ({ graphql, actions, reporter }) => {
  const template = path.resolve(`./src/templates/mdxPost.js`)
  const { createPage } = actions
  const result = await graphql(`
    query {
      allMdx {
        edges {
          node {
            id
            slug
       }
        }
      }
    }
  `)
  if (result.errors) {
    reporter.panicOnBuild('🚨  ERROR: Loading "createPages" query')
  }
  // Create blog post pages.
  const posts = result.data.allMdx.edges
  // you'll call `createPage` for each result
  posts.forEach(({ node }, index) => {
    createPage({
      // This is the slug you created before
      // (or `node.frontmatter.slug`)
      path: `${node.slug}`,
      // This component will wrap our MDX content
      component: template,
      // You can use the values in this context in
      // our page layout component
      context: { id: node.id },
    })
  })
}

상기 코드의 원본 코드는 https://www.gatsbyjs.com/docs/mdx/programmatically-creating-pages/에서 찾을 수 있다
다음은 게시물 템플릿입니다.위에서 파일 ./src/templates/mdxPost.js을 기반으로 페이지를 만들고 있음을 볼 수 있습니다.그것을 만듭니다.
위 링크에서 제공한 템플릿 코드를 사용할 수도 있습니다.

// src/template/mdxPost.js

import React from "react"
import { graphql } from "gatsby"
import { MDXProvider } from "@mdx-js/react"
import { MDXRenderer } from "gatsby-plugin-mdx"
import { Link } from "gatsby"

const shortcodes = { Link } // Provide common components here

export default function PageTemplate({ data: { mdx } }) {
  return (
    <div>
      <h1>{mdx.frontmatter.title}</h1>
      <MDXProvider components={shortcodes}>
        <MDXRenderer>{mdx.body}</MDXRenderer>
      </MDXProvider>
    </div>
  )
}
export const pageQuery = graphql`
  query BlogPostQuery($id: String) {
    mdx(id: { eq: $id }) {
      id
      body
      frontmatter {
        title
      }
    }
  }
`

유일하게 다른 것은 웹 사이트의 양식이 일치하도록 레이아웃 구성 요소에mdxPost를 포장했다는 것이다.
됐어, 이렇게!만족에서 MDX로 전환합니다.나는 나의 프로젝트 파일에 나의 블로그 게시물을 쓸 수 있다.mdx.
그러나, 내가 그것을 더욱 맞춤형으로 만들려고 시도했을 때, 그것은 손상되지 않았지만, 나는 어떤 업데이트도 보지 못했다.
나는 또한 나의 사이트를 위해 어두운 모드를 추가했기 때문에 링크 라벨 같은 것들이다.mdx 게시물에 색상이 업데이트되지 않았습니다.
문서와 인터넷을 훑어본 후에 제 문제는 MDXRendererer와 MDXProvider라고 생각합니다.내가 게이츠비 사이트에서 사용한 템플릿 코드에서, 이 두 구성 요소는 같은mdxPost 템플릿 파일에 있다.
나는 템플릿 파일에 shortcodes에 구성 요소를 추가했지만, 그것들은 나에게 반영되지 않았다.mdx 게시물.
나에게 있어서 이 문제를 해결하는 방법은 이 게시물들을 위해 또 다른 레이아웃 구성 요소를 만드는 것이다.MDXProvider 구성 요소를 여기에 놓을 것입니다. MDXRenderer는templates/mdxPost 파일에 있습니다.
예시에서 사용된 파일이기 때문에 src/components/posts-page-layout.js을 만들었습니다.다음은 gatsby-config.js에서 기본 레이아웃으로 추가합니다.

// gatsby-config.js

// ...
module.exports = {
  plugins: [
    `gatsby-plugin-mdx`,
  ]
  // ...
}  

위의 내용을 --

// gatsby-config.js

// ...
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      {
        options: {
          defaultLayouts: {
            default: `./src/components/post-page-layout`
          }
        }
      }
    }
  ]
  // ...
}  

다음은 src/components/posts-page-layout.js에 코드를 추가합니다.내 MDXProvider를 여기로 옮길 거야.

// src/components/posts-page-layout.js

import React from 'react';
import Layout from './layout';
import { MDXProvider } from '@mdx-js/react';

export default function PostLayout({ children }) {
  return (
    <Layout>
      <MDXProvider
        components={{
          a: props => <a {...props} style={{ color: 'var(--socialLinks)' }} />,
        }}
      >
        {children}
      </MDXProvider>
    </Layout>
  );
}

나는 상술한 구성 요소에 mdxPost를 포장할 것이다.이것도 사용자 정의 구성 요소를 추가할 수 있는 파일입니다. 이 구성 요소를 사용할 것입니다.mdx 파일.댓글에 표시될 닻 요소가 있습니다.src/templates/mdxPost.js을 반환하고 업데이트합니다.우리는 일부 내용을 삭제하고 위의 PostLayout에 추가할 수 있습니다.

// src/template/mdxPost.js

import React from "react"
import { graphql } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"

export default function PageTemplate({ data: { mdx } }) {
  return (
    <div>
      <h1>{mdx.frontmatter.title}</h1>
      <MDXProvider components={shortcodes}>
        <MDXRenderer>{mdx.body}</MDXRenderer>
      </MDXProvider>
    </div>
  )
}
export const pageQuery = graphql`
  query BlogPostQuery($id: String) {
    mdx(id: { eq: $id }) {
      id
      body
      frontmatter {
        title
      }
    }
  }
`

구성 요소가 PageTemplate가 아닌 PostLayout에 있기 때문에 MDXProvider, (Gatsby) 링크, 짧은 코드를 삭제했습니다.
구성 요소는 좀 곤혹스러운 것 같아서 이름을 바꿔야 합니다.이 사이트는 여전히 진보적인 작업이다. 왜냐하면 나는 더 많은 MDX 구성 요소를 추가하고 싶기 때문이다.
여기는 나의 첫 번째 미리보기다.mdx 기둥.보시다시피 링크 목록은 PostLayout 구성 요소에서 전달되는 스타일을 사용합니다.style={{ color: 'var(--socialLinks)' }}
읽어주셔서 감사합니다!제 아이템은 여기서 찾을 수 있습니다. - https://github.com/virenb/blog-portfolio