Création des pages

Dans cette section, nous allons apprendre à créer des pages dans Docusaurus.

The @docusaurus/plugin-content-pages plugin empowers you to create one-off standalone pages like a showcase page, playground page, or support page. Vous pouvez utiliser des composants React ou Markdown.

remarque

Pages do not have sidebars, only docs do.

info

Check the Pages Plugin API Reference documentation for an exhaustive list of options.

Add a React page

React est utilisé comme la bibliothèque d'interface utilisateur pour créer des pages. Chaque composant de page devrait exporter une composant React et vous pouvez vous profiter de l'expressivité de React pour construire un contenu riche et interactif.

Create a file /src/pages/helloReact.js:

/src/pages/helloReact.js

import React from 'react';
import Layout from '@theme/Layout';

export default function Hello() {
  return (
    <Layout title="Hello" description="Hello React Page">
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '50vh',
          fontSize: '20px',
        }}>
        <p>
          Edit <code>pages/helloReact.js</code> and save to reload.
        </p>
      </div>
    </Layout>
  );
}

Une fois le fichier enregistré, le serveur de développement rechargera automatiquement les modifications. Now open http://localhost:3000/helloReact and you will see the new page you just created.

Chaque page ne possède aucun style. You will need to import the Layout component from @theme/Layout and wrap your contents within that component if you want the navbar and/or footer to appear.

astuce

You can also create TypeScript pages with the .tsx extension (helloReact.tsx).

Add a Markdown page

Create a file /src/pages/helloMarkdown.md:

/src/pages/helloMarkdown.md

---
title: mon titre de page bonjour
description: ma description de page bonjour
hide_table_of_contents: true
---

# Bonjour

Comment allez-vous ?

In the same way, a page will be created at http://localhost:3000/helloMarkdown.

Les pages Markdown sont moins flexibles que les pages React car elles utilisent toujours la mise en page du thème.

Here's an example Markdown page.

astuce

You can use the full power of React in Markdown pages too, refer to the MDX documentation.

Routing

Si vous êtes familier avec d'autres générateurs de sites statiques tels que Jekyll et Next, cette approche de routage vous sera familière. Any JavaScript file you create under /src/pages/ directory will be automatically converted to a website page, following the /src/pages/ directory hierarchy. Par exemple :

• /src/pages/index.js → [baseUrl]
• /src/pages/foo.js → [baseUrl]/foo
• /src/pages/foo/test.js → [baseUrl]/foo/test
• /src/pages/foo/index.js → [baseUrl]/foo/

Dans cette ère de développement basé sur des composants, il est encouragé à colocaliser votre style, balisage et comportement en composants. Chaque page est une composante et si vous avez besoin de personnaliser le design de votre page avec vos propres styles, nous vous recommandons de colocaliser vos styles avec la composante de page dans son propre répertoire. Par exemple, pour créer une page « Support », vous pouvez faire l'une des tâches suivantes :

• Add a /src/pages/support.js file
• Create a /src/pages/support/ directory and a /src/pages/support/index.js file.

Ce dernier est préféré car il a les avantages de vous permettre de mettre des fichiers liés à la page dans ce répertoire. For example, a CSS module file (styles.module.css) with styles meant to only be used on the "Support" page.

remarque

This is merely a recommended directory structure, and you will still need to manually import the CSS module file within your component module (support/index.js).

By default, any Markdown or JavaScript file starting with _ will be ignored and no routes will be created for that file (see the exclude option).

my-website
├── src
│   └── pages
│       ├── styles.module.css
│       ├── index.js
│       ├── _ignored.js
│       ├── _ignored-folder
│       │   ├── Component1.js
│       │   └── Component2.js
│       └── support
│           ├── index.js
│           └── styles.module.css
.

attention

All JavaScript/TypeScript files within the src/pages/ directory will have corresponding website paths generated for them. If you want to create reusable components into that directory, use the exclude option (by default, files prefixed with _, test files(.test.js), and files in __tests__ directory are not turned into pages).

Duplicate Routes

Vous pouvez accidentellement créer plusieurs pages qui sont censées être accédées sur le même chemin. When this happens, Docusaurus will warn you about duplicate routes when you run yarn start or yarn build, but the site will still be built successfully. La page qui a été créée en dernier sera accessible, mais elle remplacera les autres pages en conflit. Pour résoudre ce problème, vous devez modifier ou supprimer tout chemin en conflit.