跳转到内容

Decap CMS 与 Astro

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

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

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

有两种方法将 Decap 集成到 Astro 中:

  1. 通过包管理器安装 Decap 使用以下命令:

    终端窗口
    npm install decap-cms-app
  2. 将包导入到页面 <body> 中的 <script> 标签里

    /admin
    <body>
    <!-- 引入构建页面并支持 Decap CMS 的脚本 -->
    <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
    </body>
  1. public/admin/ 创建一个静态的 admin 文件夹

  2. public/admin/ 添加 config.yml 文件:

    • 文件夹public
      • 文件夹admin
        • config.yml
  3. 为了添加对内容集合的支持,请在 config.yml 中配置每个模式。以下示例配置了一个 blog 集合,为每个条目的 frontmatter 属性定义了一个 label

    /public/admin/config.yml
    collections:
    - name: "blog" # 用于路由,例如,/admin/collections/blog
    label: "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" }
  4. 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>
  5. 为了通过 Decap 编辑器启用媒体文件上传到特定文件夹,请添加一个合适的路径:

    /public/admin/config.yml
    media_folder: "src/assets/images" # 文件将被存储在仓库中的位置
    public_folder: "src/assets/images" # 上传媒体文件的 src 属性

查看 Decap CMS 配置文档 以获取完整的指导和选项。

访问 yoursite.com/admin/ 来使用 Decap CMS 编辑器。

Decap CMS 最初是由 Netlify 开发的,并且对 Netlify 身份验证 提供了一流的支持。

当你部署到 netlify 时,通过 Netlify 控制面板为你的项目配置 Identity,并在你项目的 admin 路由上包含 Netlify Identity Widget。如果你计划通过电子邮件邀请新用户,可以选择性地在你网站的首页上也包含 Identity Widget。

当部署到 Netlify 以外的托管服务提供商时,你必须创建自己的 OAuth 路由。

在 Astro 中,这可以通过在你的项目中配置了 适配器 的按需渲染路由来完成。

查看 Decap 的 OAuth 文档,了解兼容的社区维护的 OAuth 客户端列表。

以下网站在生产中使用 Astro + Decap CMS:

更多 CMS 指南

贡献 社区 赞助