Gatsby 插件 mdx

如果你是一名程序员，你可能会需要写很多文档或博客。而最好的方式，就是使用 Markdown，这样可以让你专注于内容而不是排版。

然而，当你想要使用更多的功能，例如加入一些 React 组件或写一些复杂的代码时，Markdown 就显得力不从心了。这时候，mdx 就是一个不错的解决方案。

什么是 mdx?

mdx 是一个将 Markdown 和 JSX 相结合的语言。简单来说，它可以让你在 Markdown 中写 React 组件，并且可以直接进行编译执行。

如何使用 Gatsby 插件 mdx？

使用 Gatsby 插件 gatsby-plugin-mdx，可以轻松的将 mdx 文件转化为可执行的网站页面。

首先安装插件：

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

接着在 gatsby-config.js 文件中配置插件：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        defaultLayouts: {
          default: require.resolve(`./src/components/Layout.js`)
        }
      }
    }
  ]
};

这里我们指定了 mdx 文件的默认布局组件 Layout.js

然后在页面中使用 mdx，例如 index.mdx：

---
title: My Index Page
---

Welcome to my **awesome** blog!

<MyComponent />

## My Latest Posts

<PostList />

这里我们可以使用 React 组件 <MyComponent /> 和 <PostList />，同时也可以在 Markdown 中使用粗体字样 **awesome**。

最后，在 gatsby-node.js 中创建页面：

const { createFilePath } = require(`gatsby-source-filesystem`);

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions;

  if (node.internal.type === `Mdx`) {
    const value = createFilePath({ node, getNode });

    createNodeField({
      name: `slug`,
      node,
      value: `/posts${value}`
    });
  }
};

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions;

  const result = await graphql(`
    query {
      allMdx {
        nodes {
          id
          fields {
            slug
          }
        }
      }
    }
  `);

  if (result.errors) {
    reporter.panicOnBuild(`There was an error loading your blog posts`, result.errors);
    return;
  }

  const posts = result.data.allMdx.nodes;

  posts.forEach(post => {
    createPage({
      path: post.fields.slug,
      component: require.resolve(`./src/templates/post.js`),
      context: { id: post.id }
    });
  });
};

这样就可以让 index.mdx 和其他的 mdx 文件成为网站的页面了。

总结

gatsby-plugin-mdx 可以让我们在 Gatsby 中使用 mdx，方便快捷地编写有 React 组件和复杂代码的文档或博客。虽然需要一些配置，但是一旦配置好了，便可以大大提高生产效率和用户体验。