跳转到内容

Tina CMS 与 Astro

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

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

  1. 运行以下命令将 Tina 安装到你的 Astro 项目中。

    Terminal window
    npx @tinacms/cli@latest init
    • 当被要求提供 Cloud ID 时,按下 Enter 键跳过。如果你想使用 Tina Cloud,稍后可以生成一个 Cloud ID;
    • 当被询问「你使用的是哪个框架」时,选择 Other
    • 当被问到公共资产存储在哪里时,按下 Enter 键。

    等待完成后,你现在应该在项目的根目录下有一个名为 .tina 的文件夹和在 content/posts 中生成的 hello-world.md 文件。

  2. 修改 package.json 中的 dev 脚本:

    package.json
    {
    "scripts": {
    "dev": "astro dev",
    "dev": "tinacms dev -c \"astro dev\""
    }
    }
  3. Tina CMS 现在以本地模式设置完成。你可以通过运行 dev 脚本,然后导航到 /admin/index.html#/collections/post 来进行测试。

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

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

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

    .tina/config.ts
    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,
    },
    ],
    },
    ],
    },
    });

    Tina 文档 中了解更多关于 Tina 集合的信息。

  5. 在生产环境中,Tina CMS 可以直接将更改提交到你的 GitHub 存储库中。要为生产环境设置 Tina CMS,你可以选择使用 Tina Cloud 或自托管的 Tina Data Layer。你可以在 Tina 文档中 了解更多关于注册 Tina Cloud 的信息。

更多 CMS 指南

贡献

你有什么想法?

社区