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.

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 (
    <div className="docMainWrapper wrapper">
      <Container className="mainContainer documentContainer postContainer">
        <h1>Hello World!</h1>
        <p>C'est ma première page !</p>
      </Container>
    </div>
  );
}

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.

Création d'une page de documentation

1. Créer un nouveau fichier dans le dossier docs appelé doc9.md. The docs folder is in the root of your Docusaurus project, same level as the website folder.
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](https://github.github.com/gfm/).

## Syntaxe de Markdown

**Gras** _italique_ `code` [Liens](#url)

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