Comment installer l’extension “Front Matter” dans Visual Studio Code

Installation de l’extension

1. Ouvrez Visual Studio Code.
2. Cliquez sur l’icône des extensions dans la barre latérale gauche ou utilisez le raccourci Ctrl+Shift+X.
3. Dans la barre de recherche des extensions, tapez “Front Matter”.
4. Dans les résultats de la recherche, trouvez l’extension “Front Matter” et cliquez sur le bouton Install.

Initialisation du projet

1. Dans le menu de votre VSCode, ouvrez l’extension “Front Matter”.
2. Cliquez sur le bouton Initialiser le projet. En arrière-plan, cela va créer un fichier frontmatter.json à la racine de votre projet.

Effectuez les étapes suivants pour commencer à utiliser l’extension

Étape 1 : INITIALISER LE PROJET

Initialiser le projet crée les fichiers et dossiers nécéssaire au bon fonctionnement du CMS Front Matter. Commencez par cliquer sur cette action.

1. Cliquez sur INITIALISER LE PROJET

Étape 2 : RÉGLAGES FRAMEWORK

Sélectionnez votre générateur de site ou votre framework pour pré-remplir les paramètres recommandés.

1. Dans le menu, sélectionnez hugo.

Étape 3 : ENREGISTRER LE OU LES DOSSIERS DE CONTENUS ?

1. Dans le menu Dossiers contenant des contenus : sélectionnez content/postspuis faite Entrer

Étape 4 : Cliquez sur OUVRIR LE TABLEAU DE BORD.

Étape 5 : Démarrage du serveur

1. Dans le menu de Front Matter, cliquez sur Démarrer le serveur. Et voilà! Vous avez maintenant installé et configuré l’extension “Front Matter” dans Visual Studio Code pour votre projet Hugo. Vous pouvez commencer à créer et gérer votre contenu plus efficacement.

Étape 6 : Créer un contenu

1. Dans le menu de Front Matter cliquez sur Créer contenu
2. donner un nom à votre contenu et faite enter
3. cliquez sur l’icone front matter dans le menu de gauche de VSCode
4. Remplissez tout les champs Title, Description, Tags, Catégories
5. l’option : Is in draft permet de définir votre contenu comme brouillon ou comme publication

Maintenant vous pouvez ajouter le contenu de votre article, utilisez le raccourci Ctrl+S pour sauvegarder.

Étape 7 : Prévisualisation du site

1. Pour prévisualiser votre site, vous pouvez cliquer sur Ouvrir la prévisulation dans le menu de Front Matter.
2. Alternativement, vous pouvez ouvrir un navigateur web et aller à l’adresse template.

Cela devrait vous montrer une version en direct de votre site. Vous pouvez naviguer sur le site comme si vous étiez en ligne, ce qui est excellent pour vérifier les nouvelles pages ou les modifications avant de les publier.

Il est parfois necessaire, d’arrêter le serveur et le redémarrer pour que les modifications soit pris en compte dans la prévisualisation.