一、MDX 是啥?
MDX 是一种文档格式,可以在 Markdown 文档中无缝地插入 JSX 代码。
import {Chart} from './snowfall.js'
export const year = 2018
# Last year’s snowfall
In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.
<Chart year={year} color="#fcb32c" />
二、Gatsby 中使用 MDX
1、安装插件
把 markdown 文件,转为gatsby 数据层节点。
# 安装插件及其依赖库
npm install gatsby-source-filesystem gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
# 或
yarn add gatsby-source-filesystem gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
-
gatsby-source-filesystem :把文件转换为 gatsby 的数据层节点:allFile、File。
-
gatsby-plugin-mdx :转换 allFile 节点中格式为
.mdx
、