Gatsby中怎么使用MDX？

一、MDX 是啥？

MDX 是一种文档格式，可以在 Markdown 文档中无缝地插入 JSX 代码。

代码语言：txt复制

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" />

• mdx - 中文 - 官方文档
• mdx - 英文 - 官方文档
• mdx - 源码 - GitHub

二、Gatsby 中使用 MDX

1、安装插件

把 markdown 文件，转为gatsby 数据层节点。

代码语言：txt复制

# 安装插件及其依赖库
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、.md 的文件，生成新的 gatsby 数据层节点：allMdx、mdx。
  • 默认只处理 .mdx 文件，可以通过extensions 来增加文件格式。
  • 依赖 gatsby-source-filesystem ，所以两个插件需要同时安装和设置。

2、修改配置

gatsby-config.js 增加下面内容：

代码语言：txt复制

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/mdx/`,
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`]
      },
    },
  ],
}

3、增加数据源文件

gatsby 项目中，新增目录 src/mdx 和 文件 src/mdx/about.mdx

代码语言：txt复制

// src/mdx/about.mdx

This is my first blog post! Isn't it *great*?
Some of my **favorite** things are:
* Petting dogs
* Singing
* Eating potato-based foods

4、展示页面

gatsby 项目中，新增页面 src/pages/about.js

代码语言：txt复制

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

const AboutPageMdx = ({ data }) => {
    return (
        <MDXRenderer>{data.allMdx.nodes[0].body}</MDXRenderer>
    )
}

export default AboutPageMdx

export const pageQueryMDX = graphql`
  query MDXQuery {
    allMdx {
        nodes {
          body
        }
      }
  }
 `

5、访问

重启 gatsby 项目，浏览器访问页面：http://localhost:8000/about/

三、参考文档

• Gatsby中怎么使用MDX？

网站建设

0 人点赞