Decap CMS 和 Astro

开盖 CMS（以前称为 Netlify CMS）是一个基于 Git 的开源内容管理系统。

¥Decap CMS (formerly Netlify CMS) is an open-source, Git-based content management system.

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

¥Decap allows you to take full advantage of all of Astro’s features, including image optimization and content collections.

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

¥Decap adds a route (typically /admin) to your project that will load a React app to allow authorized users to manage content directly from the deployed website. Decap will commit changes directly to your Astro project’s source repository.

安装 DecapCMS

¥Installing DecapCMS

将 Decap 添加到 Astro 有两种选择：

¥There are two options for adding Decap to Astro:

通过包管理器安装 Decap 使用以下命令：
- npm
- pnpm
- Yarn
Terminal window
npm install decap-cms-app
Terminal window
pnpm add decap-cms-app
Terminal window
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>

配置

¥Configuration

Create a static admin folder at public/admin/
Add config.yml to public/admin/:
- Directorypublic
  - Directoryadmin
    config.yml

To add support for content collections, configure each schema in config.yml. The following example configures a blog collection, defining a label for each entry’s frontmatter property:

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" }

Add the admin route for your React app. This file can be either public/admin/index.html alongside your config.yml or, if you prefer to use an Astro route, src/pages/admin.astro.

Directorypublic
- Directoryadmin
  - config.yml
  - index.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>

To enable media uploads to a specific folder via the Decap editor, add an appropriate path:

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

请参阅 Decap CMS 配置文档以了解完整的说明和选项。

¥See the the Decap CMS configuration documentation for full instructions and options.

用法

¥Usage

导航到 yoursite.com/admin/ 以使用 Decap CMS 编辑器。

¥Navigate to yoursite.com/admin/ to use the Decap CMS editor.

验证

¥Authentication

使用 Netlify Identity 的 Decap CMS

¥Decap CMS with Netlify Identity

Decap CMS 最初由 Netlify 开发，对 Netlify Identity 提供一流的支持。

¥Decap CMS was originally developed by Netlify and has first class support for Netlify Identity.

当部署到 netlify 时，通过 Netlify 仪表板为你的项目配置身份，并在项目的 admin 路由中包含 Netlify Identity 小部件。如果你计划通过电子邮件邀请新用户，可以选择在你网站的主页上包含身份小部件。

¥When deploying to netlify, configure Identity for your project via the Netlify dashboard and include the Netlify Identity Widget on the admin route of your project. Optionally include the Identity Widget on the homepage of your site if you plan to invite new users via email.