Front Matter CMS & Astro

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

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

• 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.

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

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.

• Il vous sera demandé de saisir le nom du dossier. Par défaut, il prend le nom du dossier.

• Cliquez sur Afficher le tableau de bord pour ouvrir le tableau de bord du contenu.

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

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
      }
    ]
  }
]

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.

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.

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
      }
    ]
  }
]

• Front Matter CMS
• Front Matter CMS - Documentation
• Démarrer avec Astro et Front Matter CMS

Plus de guides sur les CMS