Decap CMS 和 Astro

Decap CMS（前身为 Netlify CMS）是一个开源的、基于 Git 的内容管理系统。

Decap 允许你充分利用 Astro 的所有功能，包括图像优化和内容集合。

Decap 会在你的项目中添加一个路由（通常是 /admin），该路由会加载一个 React 应用，允许授权用户直接从已部署的网站管理内容。Decap 会将更改直接提交到你的 Astro 项目的源仓库。

安装 DecapCMS

有两种方法可以将 Decap 添加到 Astro

使用以下命令通过包管理器安装 Decap
- npm
- pnpm
- Yarn
终端窗口
npm install decap-cms-app
终端窗口
pnpm add decap-cms-app
终端窗口
yarn add decap-cms-app

将包导入到页面 <body> 中的 <script> 标签中

<body>
  <!-- Include the script that builds the page and powers Decap CMS -->
  <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
</body>

配置

在 public/admin/ 创建一个静态的 admin 文件夹
将 config.yml 添加到 public/admin/
- 目录public
  - 目录admin
    config.yml

要添加对内容集合的支持，请在 config.yml 中配置每个 schema。以下示例配置了一个 blog 集合，为每个条目的 frontmatter 属性定义了一个 label

collections:
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "src/content/blog" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    fields: # The fields for each document, usually in frontmatter
      - { label: "Layout", name: "layout", widget: "hidden", default: "blog" }
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Featured Image", name: "thumbnail", widget: "image" }
      - { label: "Rating (scale of 1-5)", name: "rating", widget: "number" }
      - { label: "Body", name: "body", widget: "markdown" }

在 src/pages/admin.html 中为你的 React 应用添加 admin 路由。

目录public
- 目录admin
  - config.yml
目录src
- 目录pages
  - admin.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex" />
    <link href="/admin/config.yml" type="text/yaml" rel="cms-config-url" />
    <title>Content Manager</title>
  </head>
  <body>
    <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
  </body>
</html>

要通过 Decap 编辑器启用媒体上传到特定文件夹，请添加适当的路径

media_folder: "src/assets/images" # Location where files will be stored in the repo
public_folder: "src/assets/images" # The src attribute for uploaded media