更新: Tina API正在不断发展，本文中的内容已过时。要获取Tina的入门帮助，我们建议查看我们的入门文档。

Tina采用以开发者为中心的方法来构建内容，这意味着你可以在你喜欢的编辑器中本地建模你的内容。得益于存储在你仓库中的文件之上的GraphQL层，Tina使得在所有文件中查询内容变得更加简单。让我们看看这是什么感觉。

当我们提到基于Git时，这意味着你的内容存储在Markdown和JSON文件中，并用前置元数据建模；在此基础上，TinaCloud旨在让你利用GraphQL的强大功能。

我们开源了tina-graphql-gateway包，以便你可以了解其工作原理。它包含了开发者使用Tina和GraphQL的不同工具：

• 一个GraphQL模式编译器，
• 一个GraphQL服务器，
• 一个GraphQL客户端（Altair），
• 一个用于编译模式和启动本地服务器的命令行接口，
• Next.js的Tina助手，
• 以及更多……

在处理结构化内容时，典型的开发者工作流程是运行Tina本地GraphQL服务器，编辑你的模式，创建和测试查询以在你的Next.js页面中使用。

GraphQL模式是唯一的真实来源

GraphQL模式允许你描述你的内容类型或我们称之为的集合。在模式的根部，你可以列出所有的集合。

一个集合指向你仓库中的一个文件夹，在那里你存储一种内容类型，比如博客文章、食谱、书籍、产品等。

每个集合需要：

• 一个将在生成的TinaCMS表单中显示的label，
• 一个将在GraphQL API中使用的name。
• 一个可选的description，用于在TinaCMS中显示在表单字段上方的帮助文本
• 一个可选的format（json用于JSON文件，md用于Markdown文件）。

让我们来看一个非常基本的例子，我们声明一个指向content/posts的博客文章集合，并简单地将我们的集合命名为posts。

为了描述这种内容类型的形状，我们需要提供一个模板。对于我们的基本博客文章，我们将首先说明一个_文章_具有以下前置元数据字段：

• title（文本），
• author（对作者集合的引用）。

我们还需要为作者定义一个集合，以及一个具有以下内容的基本作者模板：

• 一个name（文本），
• 一个avatar（URL即文本）。

💡 要在编辑模式时获得类型自动补全，请安装VSCode GraphQL扩展。

存储在.tina/schema.ts中的相应模式如下所示：

import { defineSchema } from 'tina-graphql-gateway-cli';

export default defineSchema({
  collections: [
    {
      label: 'Blog Posts',
      name: 'post',
      path: 'content/posts',
      templates: [
        {
          label: 'Article',
          name: 'article',
          fields: [
            {
              type: 'text',
              label: 'Title',
              name: 'title',
            },
            {
              type: 'reference',
              label: 'Author',
              name: 'author',
              collection: 'author',
            },
          ],
        },
      ],
    },
    {
      label: 'Authors',
      name: 'author',
      path: 'content/authors',
      templates: [
        {
          label: 'Author',
          name: 'author',
          fields: [
            {
              type: 'text',
              label: 'Name',
              name: 'name',
            },
            {
              type: 'text',
              label: 'Avatar',
              name: 'avatar',
            },
          ],
        },
      ],
    },
  ],
});

使用GraphQL查询你的内容

Tina CLI提供了一个命令来运行本地GraphQL服务器，以监视我们模式中的更改并在编辑时编译它；它在开发模式下与Next.js一起运行。我们将其设为package.json中的默认dev npm脚本，这样当我们运行yarn dev时，我们可以访问一个GraphQL playground：

yarn dev yarn tina-gql server:start -c "next dev"

在端口4001上启动文件系统GraphQL服务器 访问playground：http://localhost:4001/altair/ …

打开http://localhost:4001/altair时，Altair GraphQL客户端让你可以构建查询并浏览API文档。

我们可以通过将其相对路径传递给在content/posts中定义的集合来查询博客文章，并从我们的字段中获取数据，如下所示：

query BlogPost {
  post(relativePath: "myBlogPost.md") {
    __typename
    ... on PostArticle {
      title
      author {
        ... on Author {
          name
          avatar
        }
      }
      _body
    }
  }
}

现在我们知道如何从我们的文件中查询数据，我们仍然需要在我们的Next.js应用程序中使用该查询，从客户端请求它，并要求Tina生成相应的表单，以便我们的贡献者能够直观地编辑它。我们将在后续文章中详细介绍剩余的步骤，敬请期待！

加入我们的Discord，如果你对如何使用Tina和Next.js有任何疑问。