Tina CMS 与 Astro

Tina CMS 是一个基于 Git 的无头（headless）内容管理系统（CMS）。

与 Astro 的集成

在开始前，你需要有一个 Astro 项目。然后：

运行以下命令将 Tina 安装到你的 Astro 项目中。
- npm
- pnpm
- Yarn
Terminal window
npx @tinacms/cli@latest init
Terminal window
pnpm dlx @tinacms/cli@latest init
Terminal window
yarn dlx @tinacms/cli@latest init
- 当被要求提供 Cloud ID 时，按下 Enter 键跳过。如果你想使用 Tina Cloud，稍后可以生成一个 Cloud ID；
- 当被询问「你使用的是哪个框架」时，选择 Other；
- 当被问到公共资产存储在哪里时，按下 Enter 键。
等待完成后，你现在应该在项目的根目录下有一个名为 .tina 的文件夹和在 content/posts 中生成的 hello-world.md 文件。

修改 package.json 中的 dev 脚本：

{
    "scripts": {
        "dev": "astro dev",
        "dev": "tinacms dev -c \"astro dev\""
    }
}

{
    "scripts": {
        "dev": "astro dev",
        "dev": "tinacms dev -c \"astro dev\""
    }
}

{
    "scripts": {
        "dev": "astro dev",
        "dev": "tinacms dev -c \"astro dev\""
    }
}

Tina CMS 现在以本地模式设置完成。你可以通过运行 dev 脚本，然后导航到 /admin/index.html#/collections/post 来进行测试。

编辑《Hello, World!》文章将会更新项目目录中的 content/posts/hello-world.md 文件。

通过编辑 .tina/config.ts 中的 schema.collections 属性来设置你的 Tina 集合。

例如，你可以向我们的文章添加一个必需的 frontmatter 属性「date posted」：

import { defineConfig } from "tinacms";

// 你的托管提供商需要作为环境变量暴露出来
const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main";

export default defineConfig({
  branch,
  clientId: null, // 从 tina.io 获取这个值
  token: null, // 从 tina.io 获取这个值
  build: {
    outputFolder: "admin",
    publicFolder: "public",
  },
  media: {
    tina: {
      mediaRoot: "images",
      publicFolder: "public",
    },
  },
  schema: {
    collections: [
      {
        name: "posts",
        label: "Posts",
        path: "src/content/posts",
        format: 'mdx',
        fields: [
          {
            type: "string",
            name: "title",
            label: "Title",
            isTitle: true,
            required: true,
          },
          {
            type: "datetime",
            name: "posted",
            label: "Date Posted",
            required: true,
          },
          {
            type: "rich-text",
            name: "body",
            label: "Body",
            isBody: true,
          },
        ],
      },
    ],
  },
});