DevNow：支持集成 Tina CMS

#astro #opensource #markdown #webdev

前言

想了很久是否要集成一个类似 CMS 的管理平台来管理这些文章的内容，终于在这周开始落地了。简单说一下我为什么有这个想法的：由于 DevNow 的定位📌是一个开源的博客项目，所以我在努力的跳出我自己的想法，避免因为一些自己想要的一些功能来让 DevNow 看起来更加的臃肿。集成 Headless CMS 的主要目的是优化现在的工作流，由于我们是基于 Astro 来构建的一个博客项目，所以我们正常的工作流一般是：

在本地新建一个 .mdx 文件
完成文章内容的编辑
push 到线上环境，重新 build 生成新的文章内容从而完成网站内容的更新

这个 workflow 比较恶心的是我们必须要在本地去编辑文档，为了预览可能还需要再一个支持 markdown 或者 .mdx 预览的编辑器中来编辑，整体来说感觉这个过程会比较复杂。所以希望通过一些平台来优化这个 workflow 。然后就有了集成 CMS 想法，过程中也调研了一些常用的 CMS 平台，最终选择了 Tian CMS。

一些 CMS 平台的对比：

Tina 的优势

基于 Git 的内容管理

Tina 使用 Git 为内容和代码提供单一真实来源，增强开发人员和内容编辑者之间的协作。
内容更改直接提交到您的存储库，确保版本控制和内容历史记录。

实时视觉编辑

使用 Tina 的实时可视化编辑器直接在您的网站或应用程序环境中创建和编辑内容。
可定制的内容块允许内容编辑者组装页面并直观地管理内容，类似于使用网站构建器。
编辑所做的修改可以在发布前实时预览，确保内容的质量。

内容控制

Tina 的开源模型让您对您的内容拥有完全的控制权和所有权。
Tina（可选）的自托管后端让您免受供应商锁定的困扰。

可扩展性

大规模性能： Tina 专为大型项目而设计。无论您的网站有数百或数万个页面，Tina 都能确保最佳性能。
强大的查询功能：借助 Tina 独特的数据层，您的 Markdown 内容变得像在数据库中一样灵活且可查询。

总结一下：

数据存储：Tina 是一款开源的、由 Git 支持的无头内容管理系统 (CMS)，这个正好符合我们的项目结构，文件都是基于 Git 来管理的。其他平台多为在自己的 cloud 端存储，避免后期如果有数据迁移带来的数据问题。
文件格式：同时支持 Markdown、MDX 和 JSON 等多种内容类型。
支持实时可视化的编辑器
支持根据分支来管理版本内容
Tina 提供了一些自己的数据层，可以灵活的查询

具体的集成步骤如下

1. 在项目中集成 Tina

// 通过 tina cli 集成，按提示进行配置就好
pnpm dlx @tinacms/cli@latest init

到这里就已经在本地集成好了，需要注意的是图中标记的这个路径，需要根据自己项目中文档存储的路径来更换，这里是 DevNow 中的目录。这里如果配置错了也不用急，后边也可以在 tina/config.ts 中进行修改。

接下来替换项目运行的命令:

// 在 package.json 中修改 scripts 的 dev 和 build 即可
"scripts": {
  "dev": "tinacms dev -c \"astro dev\"",
  "build": "tinacms build && astro check && astro build",
}

根据项目替换 schema ，集体可参考 schema 配置

schema: {
  collections: [
    {
      name: 'doc',
      label: 'Posts',
      path: 'src/content/doc',
      format: 'mdx',
      fields: [
        {
          type: 'string',
          name: 'desc',
          label: 'Desc',
          required: true,
          description: 'The image used for the cover of the post'
        },
        {
          type: 'boolean',
          name: 'draft',
          label: 'Draft',
          description: 'If this is checked the post will not be published'
        },

        {
          type: 'string',
          required: true,
          name: 'category',
          label: 'Category',
          description: 'Select an category for this post',
          options: [
            ...categories.map((item) => {
              return {
                label: item.title,
                value: item.slug
              };
            })
          ]
        },
        // 作者
        {
          type: 'string',
          name: 'author',
          label: 'Author',
          required: true
        },
        // 标签
        {
          type: 'string',
          name: 'tags',
          label: 'Tags',
          required: true,
          list: true,
          ui: {
            component: 'tags'
          }
        },
        {
          type: 'string',
          name: 'image',
          label: 'Image',
          required: true
        },
        // 封面图
        // 发布时间
        {
          type: 'string',
          name: 'publishDate',
          label: 'PublishDate',
          required: true
        },
        // 是否置顶
        {
          type: 'boolean',
          name: 'pin',
          label: 'Pin',
          required: true
        },
        {
          type: 'string',
          name: 'title',
          label: 'Title',
          isTitle: true,
          required: true
        },
        {
          type: 'rich-text',
          name: 'body',
          label: 'Body',
          isBody: true
        }
      ]
    }
  ];
}