Gatsby 是一个现代化的静态站点生成器，它使用 React 构建，支持各种数据源，并且可以生成非常快速的静态网站。而 gatsby-transformer-remark 则是 Gatsby 中处理 Markdown 文件的一个转换器，它可以将 Markdown 文件转换为 HTML，并将其添加为 Gatsby 数据图中的节点，使得在生成的网站中可以轻松地访问它们。
在本篇教程中，我们将介绍如何使用 gatsby-transformer-remark，并且将 Markdown 文件转换为博客文章的例子。
安装 gatsby-transformer-remark
首先，我们需要在 Gatsby 项目中安装 gatsby-transformer-remark。可以通过以下命令来完成安装：
npm install gatsby-transformer-remark
添加 gatsby-transformer-remark 到 Gatsby 配置文件中
接下来，我们需要将 gatsby-transformer-remark 添加到 Gatsby 的配置文件中。在项目根目录下的 gatsby-config.js 文件中添加以下内容：
-- -------------------- ---- -------
-------------- - -
------------- -
------ --- ------ ------
--
-------- -
-----------------------------
-
-------- ---------------------------
-------- -
----- --------
----- --------------------------
--
--
-
-------- ----------------------------
-------- ---
--
--
-在以上代码中，我们将 gatsby-transformer-remark 添加到了 Gatsby 的插件列表中，并使用了默认的选项。
创建 Markdown 文件
我们现在可以创建一个 Markdown 文件，并将其添加到 src/pages 目录中。在本示例中，我们将创建一个名为 my-blog-post.md 的文件，并在其中添加以下内容：
--- title: "My Blog Post" date: "2020-06-01" --- # Welcome to my blog! This is my first blog post. I hope you enjoy it!
在以上代码中，我们添加了一些元数据（位于 --- 标签之间），包括标题和日期。这些元数据将被 gatsby-transformer-remark 解析，并添加到网站的 GraphQL 数据图中。
查询 Markdown 文件
在我们添加了 Markdown 文件后，我们可以在 Gatsby 项目中查询该文件内容，并使用它们创建网站页面。在 src/pages/index.js 文件中添加以下代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
------ ------- -- ---- -- -- -
-----
------------------------------------------------
---------------------------------------------
---- -------------------------- ------- ------------------------ -- --
------
-
------ ----- ----- - --------
----- -
--------------------------- - ------ - --- --- ---- ----- - -- -
----
----------- -
-----
----
-
-
-
-在以上代码中，我们使用 graphql 函数查询 Markdown 文件的内容，并将其渲染为网站页面。我们在查询中指定了标题为 "My Blog Post" 的文件，并且将它的标题、日期和 HTML 内容添加到了页面中。
运行项目
我们现在可以启动 Gatsby 项目，并访问我们的新网站。在命令行中输入以下命令可以启动项目：
gatsby develop
在浏览器中打开 http://localhost:8000/，我们应该可以看到我们的新博客文章被渲染出来了。
总结
在本篇教程中，我们学习了如何使用 gatsby-transformer-remark，将 Markdown 文件添加到 Gatsby 数据图中，并将其渲染为网站页面。我们还了解了如何使用 graphql 函数查询数据，并将其渲染为 React 组件。通过使用这些技术，我们可以为 Gatsby 项目中的博客文章添加 Markdown 支持，使得它们更加易于创建和管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/80039