Перейти к содержимому

Decap CMS и Astro

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

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

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

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

  1. Установить Decap через менеджер пакетов с помощью следующей команды:
Окно терминала
npm install decap-cms-app
  1. Импортировать пакет в тег <script> на вашей странице <body>
/admin
<body>
<!-- Включите скрипт, который создает страницу и обеспечивает работу Decap CMS -->
<script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
</body>
  1. Создайте статическую папку admin по адресу public/admin/.

  2. Добавьте config.yml в public/admin/:

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

    /public/admin/config.yml
    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" }
  4. Добавьте маршрут admin для вашего приложения React. Этот файл может находиться либо в public/admin/index.html вместе с вашим config.yml, либо, если вы предпочитаете использовать маршрут Astro, в src/pages/admin.astro.

    • Директорияpublic
      • Директорияadmin
        • config.yml
        • index.html
    /public/admin/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>
  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 Identity.

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

При развертывании на хостинг-провайдерах, отличных от Netlify, вам необходимо создать собственные маршруты OAuth.

В Astro это можно сделать с помощью динамически создаваемых маршрутов в вашем проекте, настроенных с включенным server или hybrid выводом.

Посмотрите Документацию Decap по OAuth для списка совместимых OAuth-клиентов, поддерживаемых сообществом.

Следующие сайты используют Astro + Decap CMS в производстве:

Дополнительные руководства по CMS