如何使用Gatsby和MDX构建开发人员博客-js教程-PHP中文网

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

登录后复制

文本编辑器

对React的基本理解

如果您没有这些，则既有stackblitz and github代码码

>在下面的示例中，我将使用VS代码作为文本编辑器，将纱线作为我的首选软件包管理器。如果您喜欢NPM，那很酷。？

您还可以在GitHub上找到本教程的完整代码。好吧，是时候开始了！
>

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

登录后复制

酷。现在，在其他任何地方去其他任何地方之前，我都需要在安装任何NPM模块之前添加.gitignore文件：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

登录后复制

>现在，我可以安装所有需要的NPM优点，而无需VS代码git尖叫我太多的活动更改。现在，让我们安装一些依赖项，以与Gatsby一起启动并运行：

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

登录后复制

接下来，我们将为该项目添加第一个React组件（许多）。我将以下内容添加到我创建的index.js文件中：>

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

登录后复制

>我现在准备从命令行运行gatsby开发命令：>

>这将旋转Gatsby Dev Sever，并说我的项目可以在端口8000（默认的盖茨比端口）的浏览器中查看。 URL是http：// localhost：8000/。

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

登录后复制

>直接使用命令行接口（CLI）的gatsby二进制命令是完全可行的，但是大多数人会将可用命令添加到package.json文件上的脚本部分。

作为额外的奖励，可以在此处添加一些其他功能。

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

登录后复制

>如果我们不想每次在同一端口上运行该项目，则可以使用-P标志和指定的端口进行更改。例如，盖茨比开发-p 8945。

如果我们想打开“浏览器”选项卡，一旦项目准备就绪，我们可以将-O添加到脚本中。

我将使用服务脚本做同样的事情，所以我知道当我构建一个项目时，它是在开发一个端口上的不同端口：>

，强制性的“你好，世界！”欢迎使用，我可以继续介绍本文的其余部分！？

最后，我将提交我到目前为止所做的更改：

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

登录后复制

>博客的内容

好吧，该项目现在没有很多事情要做，所以首先，我将再次从命令行中添加一些内容：

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

登录后复制

我将在我制作的整个示例中使用这些。

>您会注意到文件扩展名.mdx。这是一个MDX文件。

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

登录后复制

>前物质

>在为博客添加一些内容之前，我需要谈论前提。

前提是一种存储有关盖茨比在构建页面时可以使用的文件的信息的方法。现在，我将添加帖子标题和日期。我还将为他们添加一些内容。这是我们的第一篇文章：

这是我们的第二篇文章：

第三篇文章：

<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>

登录后复制

>目前的帖子就是这样，因为这些帖子尚未被盖茨比（Gatsby）识别为页面。我需要让Gatsby知道在哪里可以找到可以添加到项目中的内容。为此，我将向盖茨比添加一个配置文件。

<span><span>---
</span></span><span><span><span>title: Hello World - from mdx!
</span></span></span><span><span><span>date: 2021-03-06</span>
</span></span><span><span>---</span>
</span>
My first post!!

<span><span>## h2 Heading</span>
</span>
Some meaningful prose

<span><span>### h3 Heading</span>
</span>
Some other meaningful prose

登录后复制

让我们提交我为git所做的更改：

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

登录后复制

gatsby config

gatsby配置是用于定义和配置您可以使用的许多盖茨比插件的方法。在盖茨比插件生态系统上有更多信息。现在，我将在终端中再次创建文件：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

登录后复制

这将在项目的根部创建gatsby-config.js，因此我可以开始配置gatsby来读取我之前创建的.mdx文件。>

盖茨比插件

>现在，我可以安装和配置插件盖茨比所需的源，并显示我创建的文件。我现在将它们全部安装，并简要详细介绍它们的目的：

快速查看软件包。JSON现在表明我已安装了以下依赖项：>

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

登录后复制

>要注意的一件事是，在盖茨比（Gatsby）中，不需要在您的组件中导入react 17的反应。但是，为了完整，为了避免任何混乱，我将其包括在这些示例中。

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

登录后复制

现在，我需要配置Gatsby-Plugin-MDX和Gatsby-Plugin-MDX。在gatsby-config.js文件中，我会添加以下内容：

commit变化到现在：

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

登录后复制

gatsby graphql

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

登录后复制

>现在是时候通过使用gatsby graphql claphiql来查看我在盖茨比的文件的位置。您可能已经注意到，如果您正在关注，CLI指示两个URL位置来查看该项目：>

>我将使用___graphql（三个下划线）路由来查看文件系统中的文件。

如果这似乎有些吓人，我将尝试涵盖所有似乎没有意义的部分。如果您要跟进，则应该很好地将示例复制到Graphiql Explorer中。

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

登录后复制

>打开GraphiQl Explorer时，我有几个Explorer面板。这些都是可以在项目中探索的所有可用数据，并且取决于我在gatsby-config.js文件中配置的内容。

graphiql查询面板和结果旁边。在这里，我将编写GraphQl查询以检索所需的数据。查询面板底部还有一个查询变量部分，稍后我将进行。

。最右边的

是GraphQl文档资源管理器。由于GraphQl的严格键入，这意味着它能够在其数据上生成自己的文档。但这超出了这篇文章的范围。

>与GraphQl

的查询本地文件

接下来，我将查询我在Graphiql查询面板中之前添加的文件。在此查询中，我要查询文件字体问题中定义的标题和日期：

>如果我们将其弹出到查询面板中，请按“大播放”按钮，我们会在结果面板中获取一些数据。我们还可以使用左图中的资源管理器来挑选数据。这是我在运行查询后得到的：

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

登录后复制

这是一个很大的JSON对象，其中包含我们在查询中要求的相关信息。我们将尽快查看如何使用它。目前，这意味着我们可以在Gatsby项目中使用此数据来制作页面。

>站点元数据

在gatsby-config.js文件中，还有一个可以指定站点元数据的选项。网站元数据是为了重复使用常见数据，例如网站标题和描述。

> 当我想在网站上添加元标记以进行搜索引擎优化（SEO）时，这将是进一步有用的。（同样，稍后再详细介绍。

可以直接在模块中定义网站metada.exports。

>网站元数据对象可能会变得有些大，我发现将其保存在自己的对象中可以使其更简单地进行推理，因此，我将分别定义它：>

然后，将SiteMetAdata对象添加到Gatsby配置文件：>

现在，我可以再次跳到Graphiql Explorer，并使用以下查询查询该站点元数据：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

登录后复制

>如果您要更改gatsby-config.js文件，请停止和重新启动开发服务器总是一个好主意，因此我要这样做（

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

登录后复制

ctrl

>，然后开发纱线），然后在GraphIQL Explorer中刷新页面并再次运行查询以获取数据：

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

登录后复制

做一个站点元数据钩

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

登录后复制

>现在，我已经在盖茨比文件系统中拥有网站元数据，我可以在要与盖茨比静态查询挂钩Usestaticquery一起使用的任何地方查询它。在将以下内容添加到src/pages/index.js文件之后，我将杀死开发服务器并重新启动

>关于其中一些符号的快速注释：const {stity：{siteMetAdata}，}是快速获取网站查询中数据的方法，在此我将SiteMetAdata从站点对象中拉出。这被称为破坏性。> 现在，在我再次启动Dev Server之后，我可以转到Windows/Linux中的浏览器控制台（ control

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

登录后复制

shift

J

命令

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

登录后复制

option

j在macOS上），请参见控制台输出中的sitemetadata对象。>我将获得以下控制台输出： >不必担心找不到缺少404页的控制台警告（net :: err_aborted 404（找不到））。我稍后再做。> 要避免每次都必须编写此查询，我想在组件中使用它。我将把它抽到自己的钩子中：

>现在，我将在新创建的src/hooks/use-supe-metadata.js文件中添加钩子，以获取site get ecter ot-octe of the网站元数据：

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

登录后复制

您可能已经注意到，此查询与Graphiql Explorer的查询不同：>

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

登录后复制

这是为了命名查询。因为我会在项目中使用很多查询，所以给他们有意义的名字很有意义。

现在，我将在src/peg/index.js文件中实现新钩子：

>少量的详细信息，我能够从site_metadata_query中选择我想要的项目。

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

登录后复制

是时候到目前为止进行更改了：

>主题UI

的样式

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

登录后复制

为了设置此项目，我将使用主题UI，因为它的速度是实现布局和诸如DAMP模式之类的功能。我将详细介绍与我所做的事情和理由有关的内容，尽管这并不是有关如何使用主题UI的指南。

>为主题UI添加一些其他依赖项，这些依赖项是：>

>安装了这些>，我需要将gatsby-plugin-theme-ui添加到gatsby-config.js插件阵列：

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

登录后复制

>现在，如果我停止并重新启动Dev Server，我的外观略有不同！确切地说，这一切都变得有点蓝色，或者Periwinkle！这是Gatsby-Plugin-theme-UI做的事情，颜色是默认的。

>主题UI的Gatsby插件提供了许多配置选项，其中有些我将在需要时详细介绍。目前，我将创建一个文件夹并为主题UI定义一个主题对象：

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

登录后复制

在src/gatsby-plugin-theme-ui/index.js文件中，我将添加一些主题UI预设，定义主题对象，然后在瑞士预设中传播到主题，主题颜色和样式。

>对于黑暗模式，我使用的是深层主题UI预设，并将其扩散到模式对象中的黑暗对象。（很快就会详细介绍。

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

登录后复制

>现在，如果我重新启动Dev Server（再次，是的，您将学会处理它），随着瑞士主题的应用，它看起来更容易接受。在撰写本文时，主题UI有时不会刷新Local -Host页面，因此有必要进行浏览器页面刷新。

将更改提交到git：

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

登录后复制

是时候添加一些React组件！

布局组件

Gatsby没有特定的布局，向开发人员付出了责任。在这种情况下，我正在为整个网站进行布局。可以将许多布局纳入盖茨比项目中，但是在此示例中，我将仅使用一个。

>现在，我将重构我当前拥有的内容，以使所有内容都被布局组件包裹。我当前在src/pepages/index.js中使用的内容可用于标题组件，因此我现在要制作几个文件以进行布局和标题：

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

登录后复制

现在将标题和描述从src/pages/index.js移动到新创建的src/components/header.js component。

>而不是让标题组件中使用的使用intemetadata，而是将我需要从布局组件的标头传递给标头，这是标题将要使用的位置。（不久此信息。）首先，这是居住在src/components/header.js的标题组件：

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

登录后复制

>我使用主题UI布局元素添加了一些基本样式。这看起来与以前有些不同：框，链接，标题……什么？这些都是所有主题UI组件，可用于布局，形式元素等。

>您可能会注意到AS = {gatsbylink}链接prop添加到链接组件中。这在主题UI中使用AS Prop，并让将组件传递到主题UI样式中。 Paul Scanlon有一篇很棒的帖子，更详细地解释了如何在主题UI中完成。为了对主题UI进行真正的全面解释，同一作者也有“理解主题UI”。

>还有主题UI的SX和变体道具。 SX使其他样式可以传递给组件。将其视为与JSX样式= {{}} prop相当的。变体道具允许将一组预定义的样式从主题应用于所使用的组件。

现在，位于src/components/layout.js中的布局组件：>

在这里，我要保留使用intemetadata钩子并通过标头组件需求的道具，再次使用SX Prop添加一些基本样式，以使对齐方式在主包含Div中。然后，我正在为孩子们创建一个主要包装纸。

孩子的道具是返回任何布局组件封装的东西，其中包括我要应用该布局的任何内容。例如：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

登录后复制

这将返回布局组件中的所有内容及其包装的内容。在上面的示例中，当前将是标题和布局组件包裹的H1。例如，我将返回索引页面（src/pages.index.js），然后添加以下内容：

结果是标题，在布局组件中提供，并包装H1。

索引页面帖子查询

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

登录后复制

>现在是时候获取我在开始时创建的帖子，并在索引页面上显示它们作为可点击链接的列表。

>获取帖子信息，我将重新创建有关使用GraphQl查询本地文件的部分中的查询

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

登录后复制

>我已经添加了节点和slug的ID。这是.mdx文件的文件路径。

>摘录是使用盖茨比函数从帖子主体中获取前250个字符，还可以通过另一个内置的盖茨比函数在日期添加一些格式。

>

然后，作为在日期下订单中订购帖子的一种方式，我添加了一种：allmdx（sort：{fields：[frontMatter__date]，order：desc}）{。这是在帖子前提下的日期进行排序。

>将其添加到Graphiql Explorer中给了我这个结果：>

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

登录后复制

>现在，我可以在src/peg/index.js文件中使用该查询来获取该数据以在索引页面中使用。在IndExpage函数中，我将通过GraphQl查询从提供给组件的Prop的破坏数据：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

登录后复制

这使用了先前详细介绍的组件。请注意，摘录，前磨和sl被data.allmdx.nodes破坏了：

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

登录后复制

>单击链接将带我到gatsby.js开发404页。那是因为我还没有为.mxd文件制作页面。那是下一个。

>我将在继续前进之前做出的事情：

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

登录后复制

使用gatsby文件系统路由API与MDX

>我将使用Gatsby文件系统路由API获取我之前创建的帖子的文件路径。文件系统路由API是从我的GraphQl数据编程创建页面的一种方式。

>此方法具有针对页面的特殊文件符号，当Gatsby在构建时间生成文件系统数据时，将针对目标。该文件指示节点和sl。我将首先创建文件，然后详细说明数据来自何处：

在文件中，我将为要在此模板中包含的数据定义一个GraphQl查询：

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

登录后复制

>现在是很多代码，所以我会将其分解。这主要与GraphQl查询有关：

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

登录后复制

>查询的开始使用post_by_slug（$ slug：string），主节点是mdx，所以我使用mdx.slug，例如filename {mdx.slug}.js.js。"scripts": { "build": "gatsby build", "dev": "gatsby develop", "serve": "gatsby serve", "clean": "gatsby clean" },

如果我将查询粘贴到我的graphiql explorer中，然后按播放按钮，我会得到：

这是因为GraphIQL Explorer中没有为$ slug定义的变量。如果查看查询面板的底部，您会看到一个查询变量部分。单击此会将其扩展。在这里，我需要为slug添加变量。我将用一个文件的路径在卷曲括号中定义它：

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

登录后复制

>再次运行查询，我将获取该文件的所有数据。我已经评论了身体输出的可读性：

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

登录后复制

文件系统路由API正在执行的操作是将单个文件路径传递到src/pages/{mdx.slug} .js中的页面查询中，并将数据从（{data}）中的该查询返回到页面支柱被传递到页面。

<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>

登录后复制

在此文件中，您可能会注意到我已经从返回的数据中破坏了尸体，然后从前桅杆上，在两级破坏中从前桅杆上产生标题：>

的另一种方法是：

<span><span>---
</span></span><span><span><span>title: Hello World - from mdx!
</span></span></span><span><span><span>date: 2021-03-06</span>
</span></span><span><span>---</span>
</span>
My first post!!

<span><span>## h2 Heading</span>
</span>
Some meaningful prose

<span><span>### h3 Heading</span>
</span>
Some other meaningful prose

登录后复制

使用破坏使它的详细信息要少得多。

>要注意的最后一件事是将帖子的主体包裹起来。这是前物质块之后的.mdx文件中包含的所有内容。从GraphIQL查询中进行了评论的MDX，这是在MDXRenderer中包装的内容：

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

登录后复制

我现在将提交更改：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

登录后复制

root包装器概念

现在，单击索引页面上的一个链接将带我到所需的.mdx页面，但看起来与索引页面有些不同，对吗？

那是因为还没有布局包装它。在这里，我可以使用Gatsby浏览器API并使用包装功能来包装所有页面元素。还建议我在Gatsby Ssr中使用相同的功能。

为了避免在两个文件中复制相同的代码，我将创建一个使用我要使用的实际代码并将其导入到提到的两个gatsby-*文件中的第三个文件。

首先，我将创建所需的文件：

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

登录后复制

root包装器文件是我将使用包装函数的地方：

然后，在gatsby-browser.js和gatsby-ssr.js文件中，我将添加此信息：

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

登录后复制

如果包装功能需要任何更改，我可以在一个文件root-wrapper.js。

是时候停止并再次重新启动Dev Server以查看更改生效！

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

登录后复制

>由于在此处使用布局组件来包装网站上的所有页面元素，因此无需将其保存在索引页面上，因此我将从src/peg/pages/index.js中删除该页面：

>我将在继续前进之前进行更改：

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

登录后复制

404页

是时候制作404页！

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

登录后复制

>在src/pages/404.js文件中，我将添加一条消息：>

现在，我可以直接导航到404页进行检查：http：// localhost：8000/404。

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

登录后复制

请注意，在使用Gatsby开发开发时，Gatsby将继续使用覆盖您的自定义404页的默认404页。

提交此事，然后继续进行下一部分：

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

登录后复制

深色主题切换

暗模式是编码博客的重要特征。（我是说一个开玩笑的是，如果您不确定！）我将使用主题UI颜色模式挂钩UseColormode，并在我之前在主题对象中定义的两种模式之间进行简单的切换。以下是将其添加到src/components/header.js的内容：

>但这看起来不太好，所以我将用主题UI flex组件包装容器，然后将按钮向右移动：

<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>

登录后复制

在转到下一节之前，

git提交：

<span><span>---
</span></span><span><span><span>title: Hello World - from mdx!
</span></span></span><span><span><span>date: 2021-03-06</span>
</span></span><span><span>---</span>
</span>
My first post!!

<span><span>## h2 Heading</span>
</span>
Some meaningful prose

<span><span>### h3 Heading</span>
</span>
Some other meaningful prose

登录后复制

代码块

>目前，代码块看起来有点meh，因此我将使用许多方便的dandy主题UI软件包之一添加一些语法突出显示。我为此使用的是棱镜。

<span><span>---
</span></span><span><span><span>title: Second Post!
</span></span></span><span><span><span>date: 2021-03-07</span>
</span></span><span><span>---</span>
</span>
This is my second post!

登录后复制

>我需要安装软件包并在称为组件的盖茨比 - plugin-theme-ui文件夹中创建一个组件。

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

登录后复制

在该文件中，我需要定义我要在哪里应用棱镜样式，这都是PRES和代码标签：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

登录后复制

有了这个定义，我还需要在主题对象中定义我要使用的棱镜主题：

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

登录后复制

需要另一个停靠点，并且需要开发开发服务器才能查看更改生效！

提交更改并移至下一部分：

>将组件添加到MDX

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

登录后复制

>下一个位是可选的。 Markdown JSX允许React（JSX）组件包含在Markdown中。为了证明这一点，我将添加一个RainbowText组件，该组件将在动画周期中为某些颜色而动画。动画需要额外的依赖性： @emotion/react的键框。我现在要安装：

如果它正在运行，这可能会丢弃Dev服务器，因此我现在停止它。> 在src/components/rainbow-text.js文件中，我将添加此组件：

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

登录后复制

这是可选的，我不会详细介绍这里发生的事情。只知道对悬停而产生的CSS效果很不错。

>创建了该组件，我可以将其导入我要使用的任何.mdx文件。在此示例中，我将其添加到Content/2021/03/third-post/index.mdx中。现在，我添加了该组件：

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

登录后复制

再次启动开发服务器后，我可以转到添加该组件的帖子，当我将悬停在 wheeeeeeeeeeeee中包裹的文本上时，我可以看到动画的作用。

>您可能会对该导入进行恶作剧：../../../。不断！但是，有一种方法可以解决这个问题，但是使用我之前详细介绍的根包装器概念，并使用MDXProvider，它将 - 啊！ - 向MDX提供您传递给它的任何组件。

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

登录后复制

回到root包装器（root-wrapper.js），我可以用mdxprovider包装页面元素，然后将彩虹文本组件传递给mdxprovider：

现在，我可以从.mdx文件中删除导入：>

>停止并重新启动开发服务器后，我可以转到这篇文章，仍然看到RainbowText工作。直接将组件直接添加到MDXProvider的额外优势在于，当您要使用时，无需将组件导入.mdx文档。它可通过提供商用于所有MDX文档。

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

登录后复制

我现在就提交这个：

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

登录后复制

降标图像

如果我想将图像添加到我的博客文章中，我可以将它们包含在MDX文件中，类似的内容：

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

登录后复制

./mdx-logo.png是我添加到content/2021/03/06/hello-world文件夹中的文件，我将其称为相对文件。不过，这不是。如果我转到“ Hello World帖子”，则显示的图像被打破了。我需要将gatsby-remark-images作为插件添加到gatsby-plugin-mdx上，以便知道该如何处理图像文件：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

登录后复制

然后，我需要在gatsby-config.js中配置插件：

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

登录后复制

其他盖茨比源文件系统对象正在让盖茨比知道在哪里查找要处理的图像。

立即提交：

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

登录后复制

seo

如果我想通过搜索引擎在互联网上找到我的内容，那么 SEO非常重要，因此我需要在此处的博客中添加相关的元标记。定义所有相关标签的过程可能是一个非常涉及的过程，因此，为了节省时间，我创建了一个react SEO组件，用于盖茨比生成所需的所有元标记。>

>我要YARN添加组件以及其工作所需的依赖项：>

>我需要将gatsby-plugin-react-helmet添加到gatsby-config.js插件阵列：

然后，这是在我需要具有元标签的整个网站中使用SEO组件的一种情况。

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

登录后复制

该组件需要很多道具，其中许多是在整个站点中定义的一次，因此添加这些的最佳位置是在Sitemetadata对象中。然后，我可以用usedemetadata钩子拉出所需的东西。

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

登录后复制

我将在SiteMetAdata对象中添加更多属性：>

如果您继续前进，则可以根据需要进行更改。 siteurl现在可以是虚拟网址。这是为了指向在“开放图”协议中使用所需的任何图像，这是您在Twitter，Facebook，LinkedIn和Reddit上共享帖子时看到的图像。

>现在，这些其他属性就在SiteMetadata对象上了，我需要能够查询它们。当前，使用initemetadata Hook仅具有标题和描述，因此我现在将其余的内容添加：>

>我将SEO组件添加到所有页面。首先，我将在src/pages/{mdx.slug} .js page中完成帖子页面。这是最参与其中之一，因此我将在此处丢弃差异，并详细说明发生了什么：>

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

登录后复制

siteurl，slug和摘录是规范链接（在SEO中非常重要），摘录是用于元描述的。

>我正在使用sitemetadata挂钩来获取组件所需的其余信息。标题和标题板用于弥补您在浏览器选项卡中看到的内容。

文章布尔值适用于组件，因此它可以以JSONLD格式创建BreadCrumb列表。其余的道具旨在帮助识别作者和发布日期。？

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

登录后复制

>很多。我希望它的某些有意义！对于这篇文章的范围，我将其留在那里，但是还有很多关于这个主题的知识，我的意思是！幸运的是，SRC/pages/index.js页面更简单！>

>我有意从两个示例中省略了图像。如果您有兴趣制作自己的开放式图像图像在此组件中使用，请查看帖子“带有盖茨比和Vercel的开放图像”，以了解如何使用无服务器函数进行此操作。？

>现在我可以构建该网站（几乎可以准备生产），一旦建造，我就可以查看元标签的页面源：

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

登录后复制

>构建完成后，我可以使用纱线服务器在Localhost：9000上在本地提供的网站。在浏览器中，我可以使用键盘快捷键

ctrl

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

登录后复制

u 查看页面源。从这里，我可以检查典型的元标记，这将是元数据中使用的虚拟URL。好吧！将此付诸实践并继续前进：

将其推到github

>您可能想知道为什么我在每个部分的末尾都进行了git提交。那是因为我现在要把项目推到github。

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

登录后复制

>我将登录到我的github帐户，然后在右上角选择我的头像映像旁边的加上图标，然后选择新的存储库。

>在存储库名称中，我将添加项目名称my-gatsby-blog，但留下其余的默认设置，然后单击“创建存储库”。

下一个屏幕为我提供了我需要将本地项目推向github的终端命令：

>将所有这些都放入终端并命中

Enter

>后，请刷新GitHub页面以查看新项目！yarn add gatsby react react-dom # -p is to create parent directories too if needed mkdir -p src/pages # create the index (home) page touch src/pages/index.js >部署

是时候把这个婴儿放在网上了！有很多方法可以做到这一点。因为盖茨比（Gatsby）构建到平坦的文件结构，因此您可以在任何文件服务器上托管一个具有访问Internet的文件服务器。

>有许多服务在CDN上提供托管，许多服务免费！ NetLify，Vercel和渲染等服务将使您可以通过CLI，GitHub集成将您的构建站点推向其CDN，或者在Netlify的情况下，直接拖放！

> vercel

要与Vercel部署，您需要一个GitHub，Gitlab或Bitbucket帐户进行身份验证。然后，您将提示您安装Vercel CLI：

我已经安装了它，所以现在是运行CLI命令的情况：>

然后，我提示我设置并部署新项目。我将使用

> Enter

的所有问题回答默认值：

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

登录后复制

就是这样。然后，我给了一个部署URL，可以在其中观看Vercel上的网站的构建。

>在Vercel仪表板上，我可以配置该域，也可以从Vercel购买一个。我个人使用namecheap.com，但这是一种选择。

netlify

通过CLI与Netlify一起部署与Vercel的部署相同，但我要进行拖放创建。

>用于身份验证，我需要GitHub，Gitlab，Bitbucket或电子邮件帐户之一。经过身份验证并登录后，我可以在菜单栏中选择站点，然后有一个下降区域想要部署新站点而不连接到Git？在此处拖放您的站点输出文件夹。我将在我的文件资源管理器中导航到项目的根源，然后将公共文件夹拖放到下降区域。

> NETLIFY将构建文件并将其部署到生成的URL进行检查。与Vercel几乎相同，Netlify将使您在那里购买一个域并部署到它。

渲染

渲染没有CLI或Drop选项，而是使用GitHub集成。为了进行身份验证，我需要一个github，gitlab或Google帐户。经过身份验证并登录后，我将在服务部分。从这里，我可以选择新的静态站点，然后输入我的github url，以便我以前推到GitHub的项目。

>

在下一页上，我将给它以下设置：

>名称：my-gatsby-blog

然后单击“创建静态站点”。

等待渲染做事，然后单击项目名称下方的链接以查看网站Live。

渲染还可以选择为网站设置自己的自定义域！

>可选的盖茨比插件

许多

>另一种选择是合理的，我也听到了关于的好消息。

>要在盖茨比网站上实现fathom Analytics，我需要在我的网站的头部添加附加脚本标签。这意味着什么？好吧，首先，我需要在我的fathom仪表板上创建网站，然后访问https://app.usefathom.com/#/settings/sites/sites，滚动到列表的底部，添加我的新网站（ my-gatsby-blog），然后单击“获取站点代码”。然后，我获得了带网站代码的弹出模式。我需要将其添加到Gatsby Project的负责人的脚本中。这是脚本的样子：

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

登录后复制

这是root-wrapper.js的差异：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

登录后复制

wrap！

就是我的。非常感谢您到最后。？

我希望您能从该广泛的指南中获得有关从头开始建立盖茨比项目的信息！

如果您想伸出手打个招呼，那么最好的地方是Twitter。

关于Gatsby MDX博客的常见问题（常见问题解答）

>如何将图像添加到我的盖茨比MDX博客文章中？

>在盖茨比MDX博客文章中添加图像可以增强视觉吸引力并使您的内容更具吸引力。为此，您需要将图像文件导入到MDX文件中。首先，将图像文件放在盖茨比项目的“ SRC”目录中。然后，在您的MDX文件中，使用'../ path/to/image.jpg'导入ImageName导入图像。导入后，您可以使用“ ImageName”作为组件中使用MDX内容中的图像：。

>如何自定义我的Gatsby MDX博客的布局？ > Gatsby MDX允许您自定义博客文章的布局。您可以在“ SRC”目录中创建一个布局组件。该组件可以包括标头，页脚或侧边栏等元素。创建了布局组件后，您可以将MDX内容包裹起来。为此，请在您的MDX文件中导入布局组件，然后将您的内容包装在此处：您的MDX内容。。