Translate

Create Pages

Dans cette section, nous apprendrons comment créer deux types de pages dans Docusaurus : une page normale et une page de documentation.

{.docImage}

Création d'une page ordinaire

1. Dans le répertoire site/pages/fr de votre dépôt, enregistrez un fichier texte appelé hello-world.js avec le contenu suivant :

   const React = require('react');

   const CompLibrary = require('../../core/CompLibrary.js');

   const Container = CompLibrary.Container; const GridBlock = CompLibrary.GridBlock;

   function HelloWorld(props) { return (

   Hello World!

   C'est ma première page !

   ); }

   module.exports = HelloWorld;

Utilisez n'importe quel éditeur de texte pour créer le fichier, tel que Microsoft Visual Studio Code ou Komodo Edit.

2. Allez à l'adresse http://localhost:3000/hello-world et vous devriez pouvoir voir la nouvelle page.
3. Changez le texte dans le <p>...</p> en "Je peux écrire du JSX ici !" et enregistrer le fichier à nouveau. Le navigateur devrait se rafraîchir automatiquement pour faire apparaître le changement.

- <p>C'est ma première page !</p>
+ <p>Je peux écrire du JSX ici !</p>

React est utilisé comme moteur de template pour le rendu du balisage statique. Vous pouvez tirer parti de la puissance d'expression de React pour créer du contenu web riche. Apprenez en plus sur la création de pages ici.

{.docImage}

Création d'une page de documentation

1. Créer un nouveau fichier dans le dossier docs appelé doc9.md. Le dossier docs est à la racine de votre projet Docusaurus, un niveau au-dessus de website.

2. Collez le contenu suivant :

   ---

   id: doc9 title: Il s'agit du Doc 9

   ---

   Je peux écrire du contenu en utilisant la syntaxe de Markdown flavored GitHub.

   Syntaxe de Markdown

   Gras italique code Liens

   Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

   • Salut
   • Ho
   • Allons-y

3. Le sidebars.json est l'endroit où vous spécifiez l'ordre de vos pages de documentation, alors ouvrez website/sidebars.json et ajoutez "doc9" après "doc1". Cet ID doit être le même que dans les métadonnées du fichier Markdown ci-dessus, donc si vous avez donné un ID différent à l'étape 2, assurez-vous d'utiliser le même ID dans le fichier de la barre latérale.

{
  "docs": {
    "Docusaurus": [
      "doc1",
+     "doc9"
    ],
    "First Category": ["doc2"],
    "Second Category": ["doc3"]
  },
  "docs-other": {
    "First Category": ["doc4", "doc5"]
  }
}

4. Un redémarrage du serveur est nécessaire pour récupérer les modifications de la barre latérale, alors allez dans votre terminal, tuer votre serveur de développement (Cmd + C ou Ctrl + C), et exécuter npm start ou yarn start.
5. Naviguez vers l'adresse http://localhost:3000/docs/doc9 pour voir la nouvelle page de documentation.

Vous avez créé votre première page de documentation sur Docusaurus !

Apprenez en plus sur la création de page de documentation ici.