Decap CMS и Astro

Decap CMS (ранее известная как Netlify CMS) — это система управления контентом с открытым исходным кодом, основанная на Git.

Decap позволяет в полной мере использовать все возможности Astro, включая оптимизацию изображений и коллекции контента.

Decap добавляет в ваш проект маршрут (обычно /admin), который загружает приложение React, позволяющее авторизованным пользователям управлять контентом прямо с развернутого сайта. Decap будет фиксировать изменения непосредственно в исходном репозитории вашего проекта Astro.

Установка DecapCMS

Существует два варианта добавления Decap в Astro:

Установить Decap через менеджер пакетов с помощью следующей команды:

npm install decap-cms-app

pnpm add decap-cms-app

yarn add decap-cms-app

Импортировать пакет в тег <script> на вашей странице <body>

  <body>
    <!-- Включите скрипт, который создает страницу и обеспечивает работу Decap CMS -->
    <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
  </body>

Конфигурация

Создайте статическую папку admin по адресу public/admin/.
Добавьте config.yml в public/admin/:
- Директорияpublic
  - Директорияadmin
    config.yml

Чтобы добавить поддержку коллекций контента, настройте каждую схему в config.yml. Следующий пример настраивает коллекцию blog, определяя label для свойства frontmatter каждой записи:

collections:
  - name: "blog" # Используется в маршрутах, например, /admin/collections/blog
    label: "Blog" # Используется в  UI
    folder: "src/content/blog" # Путь к папке, в которой хранятся документы
    create: true # Разрешить пользователям создавать новые документы в этой коллекции
    fields: # Поля для каждого документа, обычно в 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" }

Добавьте маршрут admin для вашего приложения React. Этот файл может находиться либо в public/admin/index.html вместе с вашим config.yml, либо, если вы предпочитаете использовать маршрут Astro, в src/pages/admin.astro.

Директорияpublic
- Директорияadmin
  - 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>

Чтобы разрешить загрузку медиафайлов в определенную папку через редактор Decap, добавьте соответствующий путь:

media_folder: "src/assets/images" # Место, где файлы будут храниться в репозитории
public_folder: "src/assets/images" # Атрибут src для загружаемых медиафайлов

Полные инструкции и опции см. в документации по конфигурации Decap CMS.

Использование

Перейдите по адресу yoursite.com/admin/ для использования редактора Decap CMS.

Аутентификация

Decap CMS с Netlify Identity

Decap CMS был изначально разработан компанией Netlify и имеет первоклассную поддержку Netlify Identity.

При развертывании на Netlify настройте Identity для вашего проекта через панель управления Netlify и включите Netlify Identity Widget в маршрут admin вашего проекта. Опционально включите виджет Identity на домашней странице вашего сайта, если вы планируете приглашать новых пользователей по электронной почте.