Узнайте, как использовать MDX вместо Markdown, в своем блоге Gatsby

Первоначально опубликовано на https://fek.io.

MDX - это гибрид синтаксиса Markdown и синтаксиса React JSX. Авторы, которые пишут сообщения в Markdown, могут использовать в своих сообщениях компоненты React.

В настоящее время Markdown позволяет авторам добавлять HTML-теги к своим сообщениям. Одна из приятных особенностей React заключается в том, что он позволяет нам создавать компоненты из комбинации элементов HTML, а затем повторно использовать эти элементы в наших приложениях React. MDX позволяет нам использовать те же компоненты в наших публикациях по Markdown.

import { Link } from 'gatsby'

import Layout from '../components/layout'
import Image from '../components/image'
import SEO from '../components/seo'

<SEO title="Home" keywords={['gatsby', 'application', 'react']} />

# Hi people

Welcome to your new Gatsby site.

Now go build something great.

<div style={{ maxWidth: '300px', marginBottom: '1.45rem' }}>
  <Image />
</div>
<Link to="/page-2/">Go to page 2</Link>

Добавление MDX в блог

В настоящее время я использую обычный Markdown для своего блога. Я решил, что хочу посмотреть, что потребуется для добавления MDX в мой блог. В моей текущей реализации моего сайта Gatsby я использую плагин gatsby-transformer-remark для преобразования разметки в данные Gatsby, которые можно использовать для отображения моих сообщений в блоге.

Gatsby предоставляет отличное руководство о том, как создать существующий блог Gatsby с помощью начального сайта и преобразовать его для использования многомерных выражений вместо уценки.



Как преобразовать существующий блог Gatsby для использования MDX
MDX - это формат файла, который позволяет добавлять JSX в файлы Markdown через файл .mdx! Он был создан и поддерживается… www.gatsbyjs.com



Это сообщение от 2019 года, и некоторые номера строк не совпадают, но его все же можно использовать в качестве основы для преобразования вашего блога для использования многомерных выражений.

W будет использовать Gatsby Starter Blog как основу для нашего преобразования. Вы можете установить это, используя следующую команду Gatsby;

> gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog

Вам нужно будет добавить плагины mdx на свой сайт gatsby, прежде чем вносить какие-либо изменения в код. Вот команда NPM для добавления подключаемых модулей MDX.

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

В вашем gatsby-config.json файле мы заменим gatsby-transformer-remark config настройкой gatsby-plugin-mdx. В разделе опций вам нужно будет добавить свойство для extensions и изменить имя свойства plugins на gatsbyRemarkPlugins. Окончательная конфигурация должна выглядеть как в следующем примере.

Затем замените плагин gatsby-plugin-feed в конфиге на gatsby-plugin-feed-mdx. После того, как вы закончите вносить изменения в конфигурацию, вы можете удалить старые модули NPM.

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

Изменение API узла

Нам нужно будет внести некоторые изменения в файл gatsby-node.js. Нам нужно будет заменить все ссылки с allMarkdownRemark на allMdx. Нам также нужно будет изменить любые ссылочные типы, которые вместо этого используют MarkdownRemark на нас Mdx.

Изменение любой ссылки на страницу на Markdown

Теперь, когда мы изменили API узла для использования Mdx, мы можем сосредоточиться на изменении любых страниц или шаблонов, которые все еще имеют ссылки на MarkdownRemark, на использование Mdx. Вместо этого на странице index.js мы заменяем все ссылки на уценку на Mdx.

Теперь мы можем внести эти изменения в шаблон src/templates/blog-post.js, но на этот раз ссылки будут markdownRemark и mdx соответственно.

Замените html на body в запросах GraphQL, как только вы измените markdownRemark на mdx.

Теперь давайте добавим сообщение в блог о многомерных выражениях. Мы назовем этот файл example.mdx и поместим его в blog каталог с другими нашими сообщениями.

// example.mdx
---
title: MDX Example
date: "2021-07-03T22:12:03.284Z"
description: "MDX Example"
---

# My first MDX post

This is a post showing MDX in action.

MDX lets you write JSX embedded inside markdown, perfect for technical blogs.

Теперь давайте создадим компонент для добавления видео Youtube в наши сообщения MDX.

Теперь мы можем добавить этот компонент в нашу публикацию MDX.

// example.mdx
---
title: MDX Example
date: "2021-07-03T22:12:03.284Z"
description: "MDX Example"
---
import Youtube from "../../../src/components/yt.js"

# My first MDX post

This is a post showing MDX in action.

<Youtube yid="jYVM6KOWYBs" />

## MDX

MDX lets you write JSX embedded inside markdown, perfect for technical blogs.

Заключение

Внеся несколько простых изменений в наш блог Gatsby, теперь мы можем использовать компоненты React на основе MDX для наших сообщений в блоге. Теперь мы можем начать использовать собственные компоненты, смешанные с нашей упрощенной разметкой на основе разметки. Теперь мы можем делать такие вещи, как добавление видео и аудио к нашим сообщениям с помощью всего одного элемента React.

Больше контента на plainenglish.io