Decap CMS 与 Astro
Decap CMS（前身为 Netlify CMS）是一个基于 Git 的开源内容管理系统。
Decap 允许你充分利用 Astro 的所有功能，包括图像优化和内容集合。
Decap 会在你的项目中添加一个路由（通常是 /admin），这个路由会加载一个 React 应用，允许授权用户直接从部署的网站管理内容。Decap 会将更改直接提交到你的 Astro 项目的源代码仓库中。
安装 DecapCMS
Section titled “安装 DecapCMS”有两种方法将 Decap 集成到 Astro 中：
-
通过包管理器安装 Decap 使用以下命令：
终端窗口 npm install decap-cms-app终端窗口 pnpm add decap-cms-app终端窗口 yarn add decap-cms-app -
将包导入到页面
<body>中的<script>标签里/admin <body><!-- 引入构建页面并支持 Decap CMS 的脚本 --><script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script></body>
-
在
public/admin/创建一个静态的 admin 文件夹 -
向
public/admin/添加config.yml文件：文件夹public
文件夹admin
- config.yml
-
为了添加对内容集合的支持，请在
config.yml中配置每个模式。以下示例配置了一个blog集合，为每个条目的 frontmatter 属性定义了一个label：/public/admin/config.yml collections:- name: "blog" # 用于路由，例如，/admin/collections/bloglabel: "Blog" # 在 UI 中使用folder: "src/content/blog" # 存储文档的文件夹路径create: true # 允许用户在此集合中创建新文档fields: # 每个文档的字段，通常在 front matter 中- { label: "布局", name: "layout", widget: "hidden", default: "blog" }- { label: "标题", name: "title", widget: "string" }- { label: "发布日期", name: "date", widget: "datetime" }- { label: "缩略图", name: "thumbnail", widget: "image" }- { label: "评分（1-5 的范围）", name: "rating", widget: "number" }- { label: "正文", name: "body", widget: "markdown" } -
在
src/pages/admin.html中为你的 React 应用添加admin路由。文件夹public
文件夹admin
- config.yml
- index.html
文件夹src
文件夹pages
- admin.html
/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>内容管理器</title></head><body><script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script></body></html>内容管理器