Passer au contenu principal
Le panneau de gauche propose deux vues : Navigation et Files. Navigation affiche la structure de votre barre latérale telle que les visiteurs la voient. Cliquez sur une page pour l’ouvrir. Files affiche l’arborescence complète des fichiers de votre référentiel, y compris les fichiers qui ne figurent pas dans votre navigation. Cliquez sur n’importe quel fichier pour l’ouvrir. Pour basculer entre les vues, cliquez sur l’icône de dossier ou appuyez sur Cmd + Shift + F (macOS) ou Ctrl + Shift + F (Windows). Cliquez sur l’icône de recherche ou appuyez sur Cmd + K (macOS) ou Ctrl + K (Windows) pour rechercher par nom de fichier ou contenu de page.

​
Gérer les fichiers et les dossiers

Utilisez la vue Files pour organiser votre contenu :
  • Créer un dossier : Cliquez sur le bouton de nouveau dossier en haut de l’arborescence des fichiers, ou faites un clic droit sur un dossier existant et sélectionnez New folder.
  • Renommer un fichier ou un dossier : Faites un clic droit sur l’élément et sélectionnez Rename.
  • Ouvrir des fichiers non listés : Cliquez sur n’importe quel fichier dans l’arborescence pour l’ouvrir, même s’il n’est pas inclus dans votre navigation.
Les fichiers qui ne figurent pas dans votre navigation sont non listés. Ils existent dans votre référentiel mais n’apparaîtront pas dans la barre latérale publiée.

​
Créer de nouvelles pages

​
Ajouter une page à la navigation

  1. Cliquez sur le bouton plus dans l’élément de navigation où vous souhaitez ajouter une page.
  2. Cliquez sur Add a page.
  3. Saisissez un nom de fichier. L’éditeur ajoute automatiquement l’extension .mdx.

​
Créer une page non listée

Les pages non listées existent dans votre référentiel mais n’apparaissent pas dans la navigation. Elles sont utiles pour du contenu en brouillon, des snippets réutilisables ou des pages que vous prévoyez d’ajouter ultérieurement à la navigation. Faites un clic droit sur un dossier dans la vue Files et sélectionnez New file. Saisissez un nom de fichier ; l’éditeur crée la page sans l’ajouter à la navigation. Vous pourrez l’ajouter ultérieurement à la navigation depuis l’onglet Navigation.

​
Modifier le contenu

Basculez entre le mode visuel et le mode source à l’aide du bouton de bascule de mode dans la barre d’outils sous la barre supérieure. Cliquez sur l’icône en forme d’œil ou appuyez sur Cmd + Shift + M (macOS) ou Ctrl + Shift + M (Windows) pour passer en mode visuel. Cliquez sur l’icône de code ou appuyez sur Cmd + Shift + M (macOS) ou Ctrl + Shift + M (Windows) pour passer en mode source. Le mode visuel affiche un aperçu en temps réel pendant que vous tapez. Appuyez sur / pour ouvrir le menu des composants et insérer des composants, des images, des vidéos et d’autres contenus. Vous pouvez également faire glisser-déposer des fichiers multimédias directement sur la page depuis votre ordinateur ou depuis l’arborescence de navigation. Autres raccourcis :
  • Insérer un lien : Sélectionnez du texte et appuyez sur Cmd + K (macOS) ou Ctrl + K (Windows), ou faites glisser une page depuis l’arborescence de navigation dans l’éditeur pour créer un lien avec le titre de la page.
  • Lier vers une autre page : Faites un clic droit sur une page dans l’arborescence de navigation, cliquez sur Copy link, puis collez le lien dans votre contenu. L’éditeur reconnaît les liens internes vers d’autres pages et les convertit.
  • Insérer un média de votre projet : Faites glisser une image ou une vidéo depuis l’arborescence de navigation dans la page pour l’intégrer inline. Les formats pris en charge incluent PNG, JPG, JPEG, GIF, WebP, SVG, MP4 et WebM.
  • Insérer un emoji : Tapez : suivi d’un mot-clé pour ouvrir le sélecteur d’emojis.
  • Modifier un tableau : Lorsque votre curseur se trouve à l’intérieur d’un tableau, utilisez la barre d’outils flottante pour ajouter ou supprimer des lignes et des colonnes, ou fusionner des cellules.
Le mode source vous donne un accès direct au code source MDX. Utilisez-le pour un contrôle précis des propriétés des composants et du frontmatter. Pour la liste complète des composants, consultez Composants. Pour la syntaxe MDX, consultez Mettre en forme le texte et Mettre en forme le code.

​
Vue diff

Pour comparer votre page actuelle à la dernière version publiée, cliquez sur le bouton View diff dans la barre d’outils, ou appuyez sur Cmd + Shift + D (macOS) ou Ctrl + Shift + D (Windows). En mode visuel, cela affiche un diff visuel. En mode source, cela affiche un diff textuel. Cliquez sur Exit diff ou appuyez à nouveau sur le raccourci pour revenir à l’édition. Vous pouvez également ouvrir un diff depuis le menu de publication. Cliquez sur Publish puis sur n’importe quel fichier modifié dans la liste.

​
Actions sur les blocs

En mode visuel, survolez n’importe quel bloc pour faire apparaître une poignée de glissement à gauche. Cliquez sur la poignée pour ouvrir un menu contextuel avec les actions disponibles pour ce bloc :
  • Turn into : Convertit le bloc en un autre type : texte, titres, bloc de citation ou liste.
  • Duplicate : Insère une copie du bloc immédiatement à sa suite.
  • Delete : Supprime le bloc.
Le menu d'actions sur les blocs en mode visuel.

​
Table des matières

En mode visuel, l’éditeur affiche une minimap sur le côté droit de la page qui reflète la structure des titres de votre document. Survolez la minimap pour la développer en une table des matières complète. Cliquez sur n’importe quel titre pour faire défiler jusqu’à cette section.

​
Options des blocs de code

Lors de l’édition d’un bloc de code en mode visuel, vous pouvez :
  • Surligner ou mettre en focus des lignes : Sélectionnez du texte dans le bloc de code, puis utilisez la barre d’outils qui apparaît pour marquer les lignes comme surlignées ou en focus. Le surlignage met visuellement en valeur les lignes. La mise en focus atténue tout le reste.
  • Marquer des lignes de diff : Sélectionnez des lignes et utilisez la barre d’outils pour les marquer comme ajouts (+) ou suppressions (-).
  • Wrap : Activez le retour à la ligne dans les paramètres du bloc de code.
  • Expandable : Rendez le bloc de code repliable pour que les lecteurs puissent le développer à la demande.

​
Examiner les modifications avant la publication

Ouvrez le menu de publication et cliquez sur n’importe quel fichier modifié pour passer en vue diff. L’éditeur met en évidence les différences entre votre brouillon et la dernière version publiée. En mode visuel, vous voyez un diff visuel ; en mode source, vous voyez un diff textuel. Cliquez sur Exit diff ou appuyez sur Cmd + Shift + D (macOS) ou Ctrl + Shift + D (Windows) pour revenir à l’édition.

​
Gérer les pages

  • Déplacer : Faites glisser-déposer les pages pour les réorganiser dans la navigation.
  • Renommer : Faites un clic droit sur une page et sélectionnez Rename.
  • Dupliquer : Faites un clic droit sur une page et sélectionnez Duplicate.
  • Supprimer : Faites un clic droit sur une page et sélectionnez Delete. L’éditeur retire automatiquement la page de la navigation.

​
Pages supprimées via Git

Si un coéquipier supprime une page via Git pendant que vous l’avez ouverte, l’éditeur passe en mode lecture seule et affiche une bannière. L’éditeur conserve votre contenu afin que vous puissiez le copier avant de quitter.

​
Configurer les pages

Survolez une page et cliquez sur l’icône d’engrenage, ou faites un clic droit et sélectionnez Settings, pour configurer :
  • Title, Slug et Sidebar title : Contrôlez la façon dont la page apparaît dans la navigation et son URL.
  • Description et Keywords : Améliorent la recherche et le SEO.
  • Layout : Choisissez entre standard, wide, centered ou custom.
Pour plus de détails sur chaque paramètre, consultez Pages.

​
Ajouter des médias

​
Images et vidéos

Tapez /image pour téléverser une nouvelle image ou en sélectionner une existante depuis votre référentiel. Tapez /video pour téléverser ou sélectionner une vidéo. Vous pouvez également faire glisser-déposer des fichiers de votre ordinateur directement sur une page. En mode visuel, le fichier s’insère inline. En mode source, l’éditeur insère le chemin du fichier à l’emplacement du curseur. Les images sont enregistrées dans votre dossier images/ et les vidéos dans videos/. Pour réutiliser un média déjà présent dans votre projet, faites glisser un fichier image ou vidéo depuis l’arborescence de navigation sur la page. L’éditeur intègre l’élément inline.

​
Variantes d’images claires et sombres

Après avoir inséré une image en mode visuel, survolez-la pour faire apparaître la barre d’outils de l’image. Utilisez Light/dark variants pour téléverser des images distinctes pour les modes clair et sombre.

​
Intégrer des médias externes

Tapez /embed et collez une URL YouTube, Loom ou Vimeo. L’éditeur détecte le fournisseur et génère l’iframe. La recherche dans le menu slash de youtube, yt, loom ou vimeo fait également apparaître la commande Embed. Pour les autres intégrations, tapez /embed et activez Manual embed pour écrire du HTML personnalisé. Pour en savoir plus sur la mise en forme des images et l’utilisation du composant Frame, consultez Images et intégrations.

Sujets connexes

Demander à l'agentAjouter des médiasCréer manuellement des pages d'API