gatsby_转换Gatsby默认入门博客以使用MDX

gatsby

In this guide we're going to cover converting the Gatsby default blog starter to use MDX.

在本指南中，我们将介绍如何将Gatsby默认博客启动程序转换为使用MDX。

All the cool kids are using Gatsby and MDX in their blogs these days. If you already have a blog that uses Gatsby but want to move onto the new hotness then this is the guide for you.

这些天，所有很酷的孩子都在他们的博客中使用Gatsby和MDX。 如果您已经拥有一个使用Gatsby的博客，但想进入新的热点，那么这就是您的指南。

版本： (Versions:)

This guide is being used with the following dependency versions.

本指南与以下依赖项版本一起使用。

• gatsby: 2.3.5
  盖茨比：2.3.5
• react: 16.8.6
  React：16.8.6
• react-dom: 16.8.6
  React区：16.8.6
• gatsby-mdx: 0.4.5
  gatsby-mdx：0.4.5
• @mdx-js/mdx: 0.20.3
  @ mdx-js / mdx：0.20.3
• @mdx-js/tag: 0.20.3
  @ mdx-js / tag：0.20.3

You can also check out the example code.

您还可以查看示例代码 。

---

---

We're going to need some links, which are:

我们将需要一些链接，这些链接是：

CodeSandbox docs for importing projects

用于导入项目的CodeSandbox文档

CodeSandbox import wizard

CodeSandbox导入向导

Gatsby starter blog

盖茨比入门博客

导入到CodeSandbox (Import to CodeSandbox)

For this example I'm going to be using the Gatsby starter blog and importing it into CodeSandbox, looking at the docs it says you can do this with the CodeSandbox import wizard linked, paste the link in there and CodeSandbox will open the representation of the code on GitHub.

在此示例中，我将使用Gatsby入门博客并将其导入CodeSandbox，查看说明可以通过CodeSandbox导入向导链接完成此操作的文档，将链接粘贴到此处，CodeSandbox将打开GitHub上的代码。

Now we can go about moving from using Gatsby transformer remark over to MDX.

现在，我们可以开始从使用Gatsby转换器注释过渡到MDX。

Let's take a look at what we'll be changing for this example. But first we're going to need to import some dependencies to get MDX running in out Gatsby project.

让我们看一下此示例将要更改的内容。 但是首先，我们将需要导入一些依赖关系才能使MDX在Gatsby项目中运行。

With the add dependency button in CodeSandbox add the following dependencies:

使用CodeSandbox中的添加依赖项按钮添加以下依赖项：

• gatsby-mdx

  gatsby-mdx

• @mdx-js/mdx

  @mdx-js/mdx

• @mdx-js/tag

  @mdx-js/tag

We will also need to add dependencies for styled-components so may as well add them now as well:

我们还需要为样式化组件添加依赖项，因此现在也可以添加它们：

• gatsby-plugin-styled-components

  gatsby-plugin-styled-components

• styled-components

  styled-components

• babel-plugin-styled-components

  babel-plugin-styled-components

Files to change:

要更改的文件：

• gatsby-node.js

  gatsby-node.js

• gatsby-config.js

  gatsby-config.js

• index.js

  index.js

• blog-post.js

  blog-post.js

gatsby-node.js (gatsby-node.js)

First up we're going to need to change gatsby-node.js this is where all the pages and data nodes are generated.

首先，我们需要更改gatsby-node.js这是所有页面和数据节点生成的地方。

Change all markdown remark occurrences with MDX, that's the initial GraphQL query in create pages, then again in the result.

使用MDX更改所有markdown备注出现，这是创建页面中的初始GraphQL查询，然后再次在结果中。

Then change the node.internal.type in onCreateNode from MarkdownRemark to Mdx.

然后将onCreateNode的node.internal.type从MarkdownRemark更改为Mdx 。

gatsby-config.js (gatsby-config.js)

Here we're going to replace gatsby-transformer-remark with gatsby-mdx

在这里，我们将用gatsby-mdx替换gatsby-transformer-remark

index.js (index.js)

Here we're going to alter the posts variable to take the Mdx edges.

在这里，我们将更改posts变量以使用Mdx边缘。

The Mdx edges are taken from the page query, which is also altered to use allMdx in place of allMarkdownRemark.

Mdx边缘取自页面查询，页面查询也更改为使用allMdx代替allMarkdownRemark 。

blog-post.js (blog-post.js)

Now last on the list to get MDX working is the blog post template, we're going to need to import MDXRenderer from gatsby-mdx we're going to replace dangerouslySetInnerHTML with this shortly.

现在， MDXRenderer MDX正常工作的列表中最后一个是博客帖子模板，我们将需要从gatsby-mdx导入MDXRenderer ，我们将很快用此dangerouslySetInnerHTML替换gatsby-mdx 。

Here's where we use it, we'll come onto post.code.body.

在这里使用它，我们将进入post.code.body 。

Again in the query we're replacing markdownRemark with mdx and this time also doing away with html from the query and adding in code for body which we're using in our render method.

再次在查询中，我们用mdx替换markdownRemark ，这一次也取消了查询中的html ，并为我们在render方法中使用的body添加了code 。

现在我们正在使用MDX！ (Now we're using MDX!)

So now we can create a .mdx post, let's do that.

现在，我们可以创建一个.mdx帖子，让我们开始吧。

Import the styled-components dependencies:

导入样式组件依赖关系：

gatsby-plugin-styled-components
styled-components
babel-plugin-styled-components

Then configure them in gatsby-config.js:

然后在gatsby-config.js配置它们：

module.exports = {
  siteMetadata: {
    title: `Gatsby Starter Blog`,
    ...
    },
  },
  plugins: [
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
  ...

Now we can use styled-components, in src/components make a new component, I have called my one butt.js call yours what you like.

现在我们可以使用样式化组件，在src/components创建一个新组件，我已经将我的一个butt.js称为您想要的。

We're going to use this component in a .mdx document, first the component:

我们将在.mdx文档中使用此组件，首先是该组件：

import styled from 'styled-components';

export const Butt = styled.button`
  background-color: red;
  height: 40px;
  width: 80px;
`;

Spicy, right! ?

辛辣的，对！ ？

Now we can include this component in a .mdx document so let's go ahead and create that, in content/blog make a new directory, I'm giving mine the imaginative name first-mdx-post, in there create a index.mdx file and use the frontmatter from one of the other posts as an example of what to use:

现在我们可以将此组件包含在.mdx文档中，因此让我们继续创建它，在content/blog创建一个新目录，我给我一个有想象力的名称first-mdx-post ，在其中创建一个index.mdx文件并以其他文章之一的前题为例：

---
title: My First MDX Post!
date: '2019-04-07T23:46:37.121Z'
---

# make a site they said, it'll be fun they said

more content yo!

This will render a h1 and a p and we should see it render in our CodeSandbox preview.

这将渲染一个h1和一个p ，我们应该在CodeSandbox预览中看到它的渲染。

Now we can go ahead and import our beautifully crafted button:

现在，我们可以继续导入我们制作精美的按钮：

---
title: My First MDX Post!
date: '2019-04-07T23:46:37.121Z'
---

import { Butt } from '../../../src/components/button';

# make a site they said, it'll be fun they said

more content yo!

<Butt>yoyoyo</Butt>

结语！ (Wrap up!)

So, that's it, we've gone and converted the Gatsby starter blog from using Markdown Remark over to using MDX.

就是这样，我们已经将Gatsby入门博客从使用Markdown Remark转换为使用MDX。

I hope you have found it helpful.

希望对您有所帮助。

Thanks for reading.

谢谢阅读。

Please take a look at my other content if you enjoyed this.

如果喜欢的话，请看看我的其他内容。

Follow me on Twitter or Ask Me Anything on GitHub.

在Twitter上关注我，或在GitHub上询问我 。

You can read other articles like this on my blog.

您可以在我的博客上阅读其他类似的文章 。

翻译自: https://www.freecodecamp.org/news/convert-the-gatsby-default-starter-blog-to-use-mdx/

gatsby