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. Allez dans le répertoire pages/en et créez un fichier 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;

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 !". Le navigateur devrait se rafraîchir automatiquement pour faire apparaître les changements.

- <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é doc4.md. Le dossier docs est à la racine de votre projet Docusaurus, un niveau au-dessus de website.

2. Collez le contenu suivant :

   ---

   id: doc4 title: Il s'agit du Doc 4

   ---

   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 "doc4" 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",
+     "doc4"
    ],
    "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 tuez votre serveur de développement (Cmd + C ou Ctrl + C) et redémarrez-le avec npm run start.
5. Naviguez vers l'adresse http://localhost:3000/docs/doc4.

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

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