Front Matter CMS & Astro

Front Matter CMS apporte le CMS à votre éditeur, il fonctionne dans Visual Studio Code, GitPod, et bien d’autres.

Intégration avec Astro

Dans cette section, nous allons voir comment ajouter Front Matter CMS à votre projet Astro.

Prérequis

Visual Studio Code
Utilisez le template Astro Blog pour fournir la configuration de base et un exemple de contenu pour commencer avec Front Matter CMS.

Installer l’extension Front Matter CMS

Vous pouvez obtenir l’extension sur le Marketplace de Visual Studio Code - Front Matter ou en cliquant sur le lien suivant : ouvrir l’extension Front Matter CMS dans VS Code

Initialisation du projet

Une fois que Front Matter CMS est installé, vous obtiendrez une nouvelle icône dans la barre d’activité. Elle ouvrira le panneau Front Matter CMS dans la barre latérale principale lorsque vous cliquerez dessus. Suivez les étapes suivantes pour initialiser votre projet :

Cliquez sur le bouton Initialiser le projet (Initialize project) dans le panneau Front Matter
L’écran de bienvenue s’ouvre et vous pouvez commencer à initialiser le projet.
Cliquez sur la première étape pour Initialiser le projet.
Comme Astro est l’un des frameworks supportés, vous pouvez le sélectionner dans la liste.
Enregistrez vos dossiers de contenu, dans ce cas, le dossier src/content/blog.

L’enregistrement des dossiers est nécessaire pour permettre à Front Matter CMS de savoir où il peut trouver et créer votre contenu. Vous pouvez avoir plusieurs types de dossiers tels que pages, blog, docs, et bien d’autres.
Il vous sera demandé de saisir le nom du dossier. Par défaut, il prend le nom du dossier.

Le nom est utilisé lors du processus de création d’un nouveau contenu. Par exemple, le fait d’avoir plusieurs enregistrements de dossiers vous permet de choisir le type de contenu que vous souhaitez créer.
Cliquez sur Afficher le tableau de bord pour ouvrir le tableau de bord du contenu.
Astuce
Une fois que Front Matter CMS est initialisé, vous pouvez ouvrir le tableau de bord comme suit :
- Utilisation de la combinaison clavier : alt + d (Windows & Linux) ou options + d (macOS)
- Ouvrez la palette de commandes et recherchez Front Matter : Ouvrir le tableau de bord (Front Matter: Open dashboard)
- Cliquez sur l’icône Front Matter dans la barre de titre du tableau de bord ou sur les fichiers.

Configuration du projet

Une fois le projet initialisé, vous obtiendrez un fichier de configuration frontmatter.json et un dossier .frontmatter à la racine de votre projet.

Répertoire.frontmatter/
- Répertoiredatabase/
  - mediaDb.json
Répertoiresrc/
- …
astro.config.mjs
frontmatter.json
package.json

Configuration du type de contenu

Les types de contenu sont la façon dont Front Matter CMS gère votre contenu. Chaque type de contenu contient un ensemble de champs, qui peuvent être définis pour chaque type de contenu que vous souhaitez utiliser pour votre site web.

Les champs correspondent au Front Matter du contenu de votre page.

Vous pouvez configurer les types de contenu dans le fichier frontmatter.json.

Ouvrez le fichier frontmatter.json.
Remplacez le tableau frontMatter.taxonomy.contentTypes par la configuration suivante des types de contenu :

"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fields": [
      {
        "title": "Titre",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Date de publication",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Image d'apercu",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]

Prévisualiser vos articles dans l’éditeur

Dans le panneau Front Matter CMS, cliquez sur le bouton Démarrer le serveur. Cette action démarre le serveur de développement local Astro. Une fois lancé, vous pouvez ouvrir le tableau de bord du contenu, sélectionner un des articles et cliquer sur le bouton Ouvrir l’aperçu pour ouvrir l’article dans l’éditeur.

Créer de nouveaux articles

Ouvrez le tableau de bord de Front Matter CMS ; vous pouvez le faire comme suit :

Ouvrez le tableau de bord du contenu de Front Matter CMS
Cliquez sur le bouton Créer un contenu.
Front Matter vous demandera le titre de l’article. Remplissez-le et appuyez sur Entrée
Votre nouvel article sera créé et ouvert dans l’éditeur. Vous pouvez commencer à rédiger votre article.

Utilisation de Markdoc avec Front Matter CMS

Pour utiliser Markdoc avec Front Matter CMS, vous devez le configurer dans le paramètre frontMatter.content.supportedFileTypes. Ce paramètre permet au CMS de savoir quels types de fichiers il peut faire progresser.

Vous pouvez configurer ce paramètre comme suit :

"frontMatter.content.supportedFileTypes": [ "md", "markdown", "mdx", "mdoc" ]

Pour permettre à votre contenu d’être créé en tant que Markdoc, spécifiez la propriété fileType sur le type de contenu.

"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fileType": "mdoc",
    "fields": [
      {
        "title": "Titre",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Date de Publication",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Image d'apercu",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]