게이츠비-가격 인하에서 MDX로 전환

최근에 나는 GoDaddy가 위탁 관리하는 Wordpress의 오래된 사이트를 Gatsby 사이트로 바꾸어 Netlify에 위탁 관리할 것이다.처음에, 나는 수동으로 나의 사이트를 굴리려고 했지만, 그것은 내가 원하는 모든 것을 실현하는 데 너무 오랜 시간이 걸렸다.게이츠비, 살려줘!선택한 템플릿에는 원하는 태그, 검색, 블로그, 연락처가 포함되어 있습니다.나머지 몇 가지 기능은 소셜 링크, 프로젝트 페이지와 관련 페이지를 찾고 있습니다. 저는 시간의 추이에 따라 추가할 수 있습니다.
이 템플릿은 상자를 열면 바로 사용할 수 있는 게이츠비 방법을 사용하는데, 단지 간단한 표기 파일일 뿐이다.제 댓글과 구성 요소를 강화하기 위해서 MDX로 전환해야 합니다.

변화를 꾀하다🎉

게이츠비에서 MDX를 사용하려면 여러 개의 다른 가방이 필요합니다.우선 그것들을 설치해라.

npm install --save @mdx-js/mdx @mdx-js/react gatsby-plugin-feed-mdx gatsby-plugin-mdx

게이츠비 플러그인 MDX

gatsby-config.js에서 내보내기 부분을 gatsby-transofrmer-remark에서 gatsby-plugin-mdx로 변경합니다.이것은 게이츠비에게 MDX 플러그인을 사용하고 일반적인 태그 파일을 처리하기 위해transformer를 사용하지 말라고 알려 줍니다.plugins 노드의 이름을 gatsbyRemarkPlugins로 바꾸고 이전 플러그인을 보존합니다(한두 가지 예외가 있지만 뒤에 설명하겠습니다).플러그인을 MDX 및 MD와 함께 사용하고 이미 가지고 있는 템플릿을 사용하려고 합니다.

        extensions: [`.mdx`, `.md`],
        defaultLayouts: {
          posts: require.resolve('./src/templates/PostTemplate.js'),
          page: require.resolve('./src/templates/PageTemplate.js'),
          tags: require.resolve('./src/templates/TagTemplate.js'),
        },

Gatbsy 플러그인 소스 MDX

만약 RSS 요약을 발표하는 설정이 있다면, 이 가방으로 전환해야 합니다. 이것은 우리가 이름을 바꾸어야 할 또 다른 플러그인 gatsby-config.js 입니다.요약 조회를 allMarkdownRemark에서 allMdx로 조정합니다.

- serialize: ({ query: { site, allMarkdownRemark } }) => {
- return allMarkdownRemark.edges.map(edge => {
+ serialize: ({ query: { site, allMdx } }) => {
+ return allMdx.edges.map(edge => {

모든 질의 변경

우리는 사이트 내의 모든 조회에 대해 상술한 변경을 진행해야 한다.markdownRemark에 대한 쿼리가 있는 경우 MDX 버전은 mdx에 불과합니다.좀 지루할 수도 있지만 걱정하지 마세요. 상황이 그렇게 나쁘지는 않아요.

- posts: allMarkdownRemark(
+ posts: allMdx(

- page: markdownRemark(fields: { slug: { eq: $slug } }) {
+ page: mdx(fields: { slug: { eq: $slug } }) {
       id
-      html
+      body

구성 요소 및 도구 교체

모든 검색이 업데이트되었으니, 업데이트된 검색 결과를 구성 요소에 전달하고, 도구에서 올바르게 업데이트될 수 있도록 해야 합니다.다음은 이 변화의 예입니다. 제가 사용한 템플릿에 첨부된 BodyText 구성 요소입니다.
MDXdangerouslySetInnerHTML와 함께 사용하는 대신 이 구성 요소를 사용해야 합니다.내가 필요로 하는 일에 대해 GraphQL 조회를 되돌려주는 body 를 구성 요소에 포장하면 MDX 내용을 보여 줍니다.

import { MDXRenderer } from 'gatsby-plugin-mdx'

구성 요소의 아이템을 body 대신 html 변경하기

- const { html, theme } = props
+ const { body, theme } = props

MDXRenderer 구성 요소를 사용하여 결과를 페이지에 표시합니다.

- <div className="bodytext" dangerouslySetInnerHTML={{ __html: html }} />
+ <div className="bodytext">
+   <MDXRenderer>{body}</MDXRenderer>
+ </div>

구성 요소의 propTypes를 html에서 body로 변경합니다.

- html: PropTypes.string.isRequired,
+ body: PropTypes.string.isRequired,

구성 요소에 따라 이와 유사한 변경 사항을 적용하기만 하면, 나는 짧은 시간 안에 모든 구성 요소를 업데이트할 수 있다.

이전 패키지 제거

이 모든 변경 사항을 한 후에, 게이츠비 페이지를 MDX로 시작하고 실행할 수 있을 것입니다.필요한 경우 모든 이전 MD를 MDX로 변환할 수 있습니다. 그렇지 않으면 확장 옵션을 그대로 두어야 합니다.이제 더 이상 사용하지 않는 패키지를 삭제할 때가 되었다.

npm uninstall gatsby-plugin-feed gatsby-transformer-remark

고차스

이 과정에서 나는 작은 문제에 부딪혔다. 아마도 내가 일을 안배하는 방식이 특유한 것일 것이다. 그러나 나는 여기서 그것들을 말하고 싶다.

MDX는 코드 블록 구문을 강조 표시하지 않습니다.

전환하기 전에 MDX가 코드 블록을 직접 보여주지 않는다는 것을 몰랐습니다.그러나 이 문제를 처리할 수 있는 몇 가지 옵션이 있습니다. 저는 PRISMJ를 추가했고 그 중 하나인 CSS 파일을 사용해서 블록의 외관을 처리했습니다.궁금하시다면 gatsby-remark-prismjsplugin를 보시기를 강력히 권장합니다.

Jest 스냅샷 테스트가 중지됨

기존의 Jest 스냅샷 테스트가 있는데, 테스트는 문장 구성 요소입니다. 이 구성 요소는 제목, 주체, 스타일이 있습니다.전환 후 테스트의 주체 부분이 실패하기 시작했습니다. 무시하기 위해jest 설정에 exclude를 포함해야 합니다. gatsby-plugin-mdx그것은 Jest가 생각하지 못했던 것들을 미리 설치했다.

- transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
+ transformIgnorePatterns: ['node_modules/(?!(gatsby|gatsby-plugin-mdx)/)'],

만약 네가 게이츠비에서 MDX를 사용하기로 바뀌었다면, 나는 너의 경력이 어떠한지 궁금할 것이다.만약 저와 같은 문제가 발생하거나, 코드 블록 렌더링을 처리하기 위해 다른 패키지/해결 방안을 사용하셨다면.