Decap CMS & Astro

Decap CMS (anciennement Netlify CMS) est un système de gestion de contenu open-source basé sur Git.

Decap vous permet de profiter pleinement de toutes les fonctionnalités d’Astro, y compris l’optimisation des images et les collections de contenu.

Decap ajoute une route (typiquement /admin) à votre projet qui chargera une application React pour permettre aux utilisateurs autorisés de gérer le contenu directement depuis le site web déployé. Decap validera les changements directement dans le dépôt source de votre projet Astro.

Installation de DecapCMS

Il existe deux options pour ajouter Decap à Astro :

Installer Decap via un gestionnaire de paquets avec la commande suivante :
- npm
- pnpm
- Yarn
Fenêtre du terminal
npm install decap-cms-app
Fenêtre du terminal
pnpm add decap-cms-app
Fenêtre du terminal
yarn add decap-cms-app

Importez le paquet dans une balise <script> placé dans le <body> de votre page.

 <body>
   <!-- Inclure le script qui génère la page et alimente Decap CMS -->
   <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
 </body>

Configuration

Créez un dossier d’administration statique dans public/admin/
Ajoutez config.yml à public/admin/ :
- Répertoirepublic
  - Répertoireadmin
    config.yml

Pour ajouter la prise en charge des collections de contenu, configurez chaque schéma dans config.yml. L’exemple suivant configure une collection blog, en définissant un label pour la propriété frontmatter de chaque entrée :

collections:
  - name: "blog" # Utilisé dans les routes, par exemple, /admin/collections/blog
    label: "Blog" # Utilisé dans l'UI
    folder: "src/content/blog" # Chemin d'accès au dossier dans lequel les documents sont conservés
    create: true # Permettre aux utilisateurs de créer de nouveaux documents dans cette collection
    fields: # Les champs de chaque document, généralement en tête de page
      - { label: "Mise en page", name: "layout", widget: "hidden", default: "blog" }
      - { label: "Titre", name: "title", widget: "string" }
      - { label: "Date de publication", name: "date", widget: "datetime" }
      - { label: "Image mise en avant", name: "thumbnail", widget: "image" }
      - { label: "Note (sur une échelle de 1 à 5)", name: "rating", widget: "number" }
      - { label: "Corps", name: "body", widget: "markdown" }

Ajoutez la route admin pour votre application React dans src/pages/admin.html.

Répertoirepublic
- Répertoireadmin
  - config.yml
Répertoiresrc
- Répertoirepages
  - admin.html

<!doctype html>
<html lang="fr">
  <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>Gestionnaire de contenu</title>
  </head>
  <body>
    <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
  </body>
</html>

Pour permettre le téléchargement de médias dans un dossier spécifique via l’éditeur Decap, ajoutez un chemin d’accès approprié :

 media_folder: "src/assets/images" # Emplacement où les fichiers seront stockés dans le dépôt
 public_folder: "src/assets/images" # L'attribut src pour les médias téléchargés

Consultez la documentation de configuration du CMS Decap pour des instructions et des options complètes.

Utilisation

Naviguez vers votresite.com/admin/ pour utiliser l’éditeur de Decap CMS.

Authentification

Decap CMS avec Netlify Identity

Decap CMS a été développé à l’origine par Netlify et dispose d’une prise en charge de première classe pour Netlify Identity.

Lors du déploiement sur Netlify, configurez l’identité de votre projet via le tableau de bord de Netlify et incluez le widget Identity de Netlify sur la route admin de votre projet. Incluez éventuellement le widget Identity sur la page d’accueil de votre site si vous prévoyez d’inviter de nouveaux utilisateurs par e-mail.