将现有的Gatsby项目转换为TinaCMS
TinaCMS官方不支持Gatsby。我们建议将您的Gatsby站点迁移到一个支持良好的框架，如Next.JS。
介绍
在本教程中，我们将指导您将现有的Gatsby MDX博客转换为TinaCMS。我们提供了一个入门仓库供您跟随，这是官方Gatsby MD博客入门的一个分支。
限制
本指南中概述的方法有一些限制。
- 失去Gatsby的图像优化功能
- Gatsby使用GitHub风格的Markdown，而TinaCMS不完全支持
开始
首先，克隆我们的示例Gatsby项目。然后您需要进入博客的目录。
添加Tina
太好了！您已设置完毕，可以开始添加TinaCMS。您可以使用以下命令初始化它。
运行上述命令后，您将收到一些提示：
- 当提示选择框架时，选择
other - 选择
yarn作为您的包管理器 - 当被问及是否使用Typescript时，选择
yes - 将公共资产位置设置为
public
为Tina设置Gatsby
现在我们已经将Tina添加到项目中，还有一些步骤需要将其与Gatsby集成。首先在tina/config.js的顶部添加以下行：
接下来，我们将使用Express设置可视化编辑器的URL。
为了确保Tina在应用程序处于开发模式时运行，请在package.json中更新启动命令如下：
为了解决与节点模块内的GraphQL版本冲突相关的任何错误，我们还将在package.json中强制Gatsby使用与TinaCMS相同的版本。
添加以下内容：
配置我们的Schema
首先，我们将配置图像的存储位置并更新schema，以便我们准备好处理markdown文件。打开tina/config.ts并进行以下更改。
通过将我们的图像移动到static，我们确保它们将在git中被跟踪并在运行时打包。
接下来，我们将现有的frontmatter字段添加到我们的schema中。我们还将更改path以指向我们现有的博客。
更新您的图像
您需要重新上传您的图像以匹配我们的新媒体目录。
TinaCMS目前不支持相对图像目录（例如原始博客使用的那些）。您可以通过重新上传图像或更改URL以匹配我们的媒体文件夹来移植您的图像。
例如，content/blog/hello-world/index.mdx中的新图像将如下所示。
您还需要将现有图像移动到我们定义的新文件夹中。
重新格式化您的markdown
由于hello world示例使用了TinaCMS不支持的列表类型，我们将手动更新列表以支持的格式。对content/blog/hello-world/index.mdx进行以下更改。
注意：您可能需要更新网站上的其他元素。对于Tina不支持的markdown元素，请参阅我们的指南。
我们现在应该能够在TinaCMS中读取和编辑现有页面。
样式
我们将添加一些CSS来修复文章中的图像，因为它们不再由Gatsby处理。
在src/style.css的顶部添加以下内容。这将调整我们博客中任何图像的大小。
恭喜！您的Gatsby MDX博客现在已设置为使用Tina。运行yarn develop来测试一下。
（推荐）添加可视化编辑
警告 - 如果您决定添加可视化编辑，您将需要替换您正在使用的任何自定义MDX插件
到目前为止，我们只将TinaCMS设置为我们的markdown文件的编辑器。显示逻辑仍由Gatsby的插件处理。
使用Gatsby的MDX插件而不是Tina的有一些优缺点。
优点：
- 您可以使用现有的markdown插件
缺点：
- 您将无法在markdown文件中使用React组件
- 在编辑markdown文件时，您将无法获得上下文编辑
通常，我们建议使用Tina的GraphQL API来加载您的页面，我们现在就来做。
因为我们将使用Tina的graphql客户端进行这种方法，所以我们不再需要跳过它。实际上，我们需要它来检索可视化编辑所需的GraphQL查询。
生成页面
首先，我们将为Tina的GraphQL API的响应定义新的类型，并移除现有的类型。在src/types.ts中修改类型以反映我们将从Tina的API获取的新数据。
使用这些类型，我们将添加一个助手来映射Tina的GraphQL API的响应。这将使页面数据的格式类似于我们正在替换的GraphQL查询的响应。
接下来，我们将更新createPages函数以使用Tina的GraphQL API生成页面，并移除现有的调用。
使用Tina的GraphQL API的响应，我们将更改页面生成的方式
更新博客文章页面
首先，我们将在src/types.ts中定义我们的类型。
接下来，我们将使用静态查询来获取博客文章页面模板的数据。
添加一个静态查询以使用Tina获取页面的数据。
我们还将更新页面查询以排除markdown，因为我们将使用TinaCMS来填充页面。
现在我们已经配置了一个新的数据源，我们可以使用useTina钩子来实现可视化编辑。
首先更新BlogPostTemplate的页面属性。我们将添加我们的服务器获取的数据，并使用useTina钩子引入。
然后我们将用Tina返回的数据替换所有现有数据。注意tinaField属性的添加，它用于为每个字段添加上下文编辑。
不要忘记使用服务器数据更新Head组件。
还有一个步骤我们需要做。不幸的是，我们的日期没有通过graphql查询进行格式化。为了解决这个问题，我们将使用一个库来格式化我们的日期。
然后我们将添加一个useEffect来在日期更改时更新日期。我们在这里使用useEffect是为了在使用可视化编辑器时重新计算日期。使用useState将导致数据源更改时更新日期。
Figure: 文章日期实时更新
更新主页
我们还需要更新主页以反映内容更改，因为它以前是使用gatsby-mdx填充的。对src/pages/index.tsx进行以下更新：
在主页上，我们需要实现一个服务器端获取，以通过TinaCMS检索完整的文章列表。
然后我们将服务器端数据添加到组件中。