TinaCMS - 开始使用

ByJames PerkinsMarch 4, 2022

到目前为止，作为 TinaCMS 的用户，当您与内容互动时，您享受到了可视化编辑。我们知道，虽然这种体验对您的内容团队来说是首屈一指的，但将 TinaCMS 与可视化编辑集成到您的应用程序中所需的时间比您在测试新 CMS 时可能愿意投入的时间要长。

以传统方式作为 CMS 的 TinaCMS

为了给所有用户提供最佳体验，TinaCMS 现在提供了两种编辑内容的方式：可视化编辑和更传统的 CMS。除了我们的传统 CMS，我们仍然由 Markdown、JSON 或 MDX 提供支持，并由 Git 支持。以下是它在已部署网站上实现时的快速 GIF：

如何实现 TinaCMS？

当我们在 alpha 版本中推出 TinaCMS + Cloud 时，您需要执行以下操作来集成 TinaCMS，并且我们仅支持可视化编辑：

使用 npx @tinacms/cli init 添加 TinaCMS
为您的 Markdown 创建架构
实现您的查询，用于 getStaticPaths 和 getStaticProps
处理道具以使您的内容可编辑。

这些步骤现在减少了一半。当您仅将 TinaCMS 用作没有可视化编辑的 CMS 时，您只需：

使用 npx @tinacms/cli init 添加 TinaCMS
为您的 Markdown 创建架构

话虽如此，让我们使用 Next.js 启动器仅使用 CMS 创建一个可编辑的博客。

第一步是创建博客启动器并初始化 TinaCMS

# 创建您的博客
npx create-next-app --example blog-starter tina-cms-blog

# 进入您的新博客
cd tina-cms-blog

# 初始化 TinaCMS
npx @tinacms/cli@latest init

那么 TinaCMS CLI 做了什么？它在您的 Next.js 应用程序中做了很多事情：

安装 TinaCMS 所需的所有依赖项。
在 .tina 目录中定义基本内容架构。
在演示目录中创建示例内容。
编辑 package.json 以添加启动 tina 的脚本（tina-dev、tina-build、tina-start）。

测试时间

现在您已经设置了 TinaCMS，您可以使用以下命令启动您的应用程序：

yarn tina-dev

现在，如果您导航到 http://localhost:3000/admin，您将看到一个新页面。继续并点击“使用 TinaCMS 编辑”按钮。

您将进入一个看起来像这样的页面：

编辑内容

如果您在屏幕左侧选择“博客文章”，它将显示所有可供编辑的文章，您可能会注意到 TinaCMS 为您放置了一篇名为“Hello World”的博客文章。继续并点击它，您将看到一个可编辑的表单。随意更改标题或正文并点击保存按钮。

使用 TinaCMS 编辑的示例

到底发生了什么？

当您点击保存时，TinaCMS 的 GraphQL 层会将这些更改直接保存在位于 content/posts 目录中的 Markdown 文件“HelloWorld.md”中。继续，打开它，查看您的新更改。

当您在生产环境中执行此操作时，TinaCMS 将直接为您提交到 GitHub！

使启动博客可编辑

现在您已经看到了 TinaCMS 编辑的实际操作，让我们使 Next.js 启动器内容可编辑。第一步是定义我们内容的形状。您将看到一个名为 .tina 的文件夹，其中包含一个 schema.ts 文件。此文件允许您指示 TinaCMS 的内容 API 查找哪种内容类型、如何标记它等等！

集合

架构中的顶级键是一个集合数组，collection 告知 API 在哪里保存内容。在我们的指南中将有一个 posts 集合，但您也可以有 author 和 pages 集合，例如。

字段

“字段”属性指示内容 API 预期的内容类型。例如，text，以及可查询的名称和要显示给您的内容团队的名称。字段是集合的子对象数组。我们使用它来从 Markdown 或 JSON 文件中检索内容。这些字段应映射到您的frontmatter，我们还使用它来创建用于编辑的 UI 元素。

fields: [
    {
      type: "string",
      label: "Title",
      name: "title"
    },
    {
      type: "string",
      label: "Blog Post Body",
      name: "body",
      isBody: true,
    },
    ...
]

引用

我们还有 reference 字段。这是一个重要的概念，当您引用另一个集合时，您实际上是在说：“这个文档属于那个文档”。使用引用的一个很好的例子是作者，因为每篇文章都会有一个作者，您可能会有多个作者，但您需要将特定的作者引用到文章中。

{
  "label": "Author",
  "name": "author",
  "type": "reference",
  "collections": ["author"]
}

在继续之前，您可以在我们的文档中阅读更多关于内容建模的信息。

创建我们的内容架构

Next.js 博客启动器附带三个示例博客文章，您可以使用它们来塑造我们架构中的内容。您可以在 _posts 目录中的任何博客文章中找到。让我们看看 preview.md 的前言。

--
title: 静态生成的预览模式
excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.'
coverImage: '/assets/blog/preview/cover.jpg'
date: '2020-03-16T05:35:07.322Z'
author: name: Joe Haddad picture: '/assets/blog/authors/joe.jpeg'
ogImage: **url: '/assets/blog/preview/cover.jpg'
---**
Lorem ipsum dolor sit amet, ...

如您所见，您有相当多的字段，您希望您的内容团队能够编辑博客文章的正文。

对架构进行更改

打开位于 /.tina/schema.ts 的 TinaCMS schema.ts 文件。首先在提供的对象下方，您需要用您想要的内容替换当前集合：

{
  label: "Blog Posts",
  name: "post",
-  path: "content/posts"
+  path: '_posts',
  fields: [
    {
      type: "string",
      label: "Title",
      name: "title"
    },
    {
      type: "string",
      label: "Blog Post Body",
      name: "body",
      isBody: true,
    },
  ]
}

到目前为止，您只替换了一行，即将 path 更新为启动博客内容的正确位置。

现在您需要处理我们文章前言的每个字段，下面是完成的文件：

// 上面的导入

export default defineSchema({
  collections: [
    {
      label: 'Blog Posts',
      name: 'post',
      path: '_posts',
      fields: [
        {
          type: 'string',
          label: 'Title',
          name: 'title',
        },
        {
          type: 'string',
          label: 'Excerpt',
          name: 'excerpt',
        },
        {
          type: 'string',
          label: 'Cover Image',
          name: 'coverImage',
        },
        {
          type: 'string',
          label: 'Date',
          name: 'date',
        },
        {
          type: 'object',
          label: 'Author',
          name: 'author',
          fields: [
            {
              type: 'string',
              label: 'Name',
              name: 'name',
            },
            {
              type: 'string',
              label: 'Picture',
              name: 'picture',
            },
          ],
        },
        {
          type: 'object',
          label: 'OG Image',
          name: 'ogImage',
          fields: [
            {
              type: 'string',
              label: 'Url',
              name: 'url',
            },
          ],
        },
        {
          type: 'string',
          label: 'Body',
          name: 'body',
	        ui: {
	            component: "textarea"
	            }
          isBody: true,
        },
      ],
    },
  ],
});

// 下面的配置代码