Tina CMS & Astro

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

与 Astro 集成

要开始使用，你需要一个已有的 Astro 项目。

运行以下命令将 Tina 安装到你的 Astro 项目中。
- npm
- pnpm
- Yarn
终端窗口
npx @tinacms/cli@latest init
终端窗口
pnpm dlx @tinacms/cli@latest init
终端窗口
yarn dlx @tinacms/cli@latest init
- 当提示输入 Cloud ID 时，按 Enter 键跳过。如果你想使用 Tina Cloud，稍后可以生成一个。
- 当提示“你正在使用什么框架”时，选择其他。
- 当被问及公共资源存储在哪里时，按 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\""
    }
}

现在 TinaCMS 已在本地模式下设置完成。通过运行 dev 脚本来测试，然后访问 /admin/index.html#/collections/post。

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

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

例如，你可以为我们的文章添加一个必需的“发布日期” frontmatter 属性

import { defineConfig } from "tinacms";

// Your hosting provider likely exposes this as an environment variable
const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main";

export default defineConfig({
  branch,
  clientId: null, // Get this from tina.io
  token: null, // Get this from 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,
          },
        ],
      },
    ],
  },
});