DevNow：支持集成 Tina CMS 詳情 - astro,blog,markdown LaughingZhu 博客

前言

想了很久是否要集成一個類似 CMS 的管理平台來管理這些文章的內容，終於在這周開始落地了。簡單説一下我為什麼有這個想法的：由於 DevNow 的定位📌是一個開源的博客項目，所以我在努力的跳出我自己的想法，避免因為一些自己想要的一些功能來讓 DevNow 看起來更加的臃腫。集成 Headless CMS 的主要目的是優化現在的工作流，由於我們是基於 Astro 來構建的一個博客項目，所以我們正常的工作流一般是：

在本地新建一個 .mdx 文件
完成文章內容的編輯
push 到線上環境，重新 build 生成新的文章內容從而完成網站內容的更新。

這個 workflow 比較噁心的是我們必須要在本地去編輯文檔，為了預覽可能還需要再一個支持 markdown 或者 .mdx 預覽的編輯器中來編輯，整體來説感覺這個過程會比較複雜。所以希望通過一些平台來優化這個 workflow 。然後就有了集成 CMS 想法，過程中也調研了一些常用的 CMS 平台，最終選擇了 Tian CMS。

一些 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

tina cli steps

到這裏就已經在本地集成好了，需要注意的是圖中標記的這個路徑，需要根據自己項目中文檔存儲的路徑來更換，這裏是 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
          }
        ]
      }
    ]
  }

\:::tip[注意]
這裏需要主要的是在首次運行的時候，會根據 tina/config.ts 生成一個 tina/tina-lock.json 的文件，每次修改完都 config.ts 的時候，都需要在本地運行一下來更新 tina-lock.json 的內容，否則無法成功 build 。
\:::

運行項目：