Question

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

与 Astro 的集成

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

1. 运行以下命令将 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，稍后可以生成一个 Cloud ID；
   • 当被询问「你使用的是哪个框架」时，选择 Other；
   • 当被问到公共资产存储在哪里时，按下 Enter 键。

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

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

   • npm
   • pnpm
   • Yarn
   package.json

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

   package.json

   {
       "scripts": {        "dev": "astro dev",        "dev": "tinacms dev -c \"astro 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 的信息。

官方资源

• Tina CMS Astro 集成指南。

社区资源

• 由 Jeff See 和 Dylan Awalt-Conley 创建的 Astro Tina Starter with visual editing
• 由 Tom Bennet 创建的 Astro Tina Starter with basic editing
• 在 Tina 中使用 Astro 图像优化

Themes

• Resume01

更多 CMS 指南

• 

  Storyblok

• 

  Contentful

• 

  ButterCMS

• 

  Builder.io

• 

  Cosmic

• 

  DatoCMS

• 

  Front Matter CMS

• 

  Ghost

• 

  Hashnode

• 

  Hygraph

• 

  Keystatic

• 

  Kontent.ai

• 

  Statamic

• 

  Strapi

• 

  Tina CMS

• 

  Umbraco

• 

  WordPress

• 

  Apostrophe

• 

  Caisy

• 

  CloudCannon

• 

  Crystallize

• 

  Decap CMS

• 

  Directus

• 

  KeystoneJS

• 

  microCMS

• 

  Payload CMS

• 

  Prepr CMS

• 

  Prismic

• 

  Sanity

• 

  Sitecore XM

• 

  Spinal

Recipes