Aller au contenu principal
Version: 2.0.0-alpha.72

Création des pages

Dans cette section, nous allons apprendre à créer des pages ponctuelles dans Docusaurus en utilisant React. Ceci est plus utile pour la création de pages autonomes uniques tel qu'une page vitrine, une page d’expérimentation ou une page de support.

La fonctionnalité des pages est propulsée par @docusaurus/plugin-content-pages.

Vous pouvez utiliser des composants React ou Markdown.

Ajouter une page React#

Créer un fichier /src/pages/helloReact.js :

/src/pages/helloReact.js
import React from 'react';
import Layout from '@theme/Layout';
function Hello() {
return (
<Layout title="Bonjour">
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '50vh',
fontSize: '20px',
}}>
<p>
Editez <code>pages/hello.js</code> et sauvegardez pour recharger.
</p>
</div>
</Layout>
);
}
export default Hello;

Une fois le fichier enregistré, le serveur de développement rechargera automatiquement les modifications. Maintenant, ouvrez http://localhost:3000/helloReact, vous verrez la nouvelle page que vous venez de créer.

Chaque page ne possède aucun style. Vous devrez importer le composant Layout de @theme/Layout et envelopper votre contenu dans ce composant si vous voulez que la barre de navigation et/ou le pied de page apparaisse.

astuce

Vous pouvez également créer des pages TypeScript avec l'extension .tsx (helloReact.tsx).

Ajouter une page Markdown#

Créer un fichier /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 ?

De la même manière, une page sera créée à l'adresse 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.

Voici un exemple de page Markdown.

astuce

Vous pouvez également utiliser la pleine puissance de React dans les pages Markdown, reportez-vous à la documentation de MDX.

Routage#

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. Tout fichier JavaScript que vous créez dans le répertoire /src/pages/ sera automatiquement converti en page du site, en suivant la hiérarchie du répertoire /src/pages/. 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 :

  • Ajouter un fichier /src/pages/support.js
  • Créer un répertoire /src/pages/support/ et un fichier /src/pages/support/index.js.

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. Par exemple, un fichier de module CSS (styles.module.css) avec des styles destinés uniquement à être utilisés sur la page "Support". Remarque : il s'agit simplement d'une structure de répertoire recommandée et vous devrez toujours importer manuellement le fichier de module CSS dans votre module de composant (support/index.js). Par défaut, tout fichier Markdown ou Javascript commençant par _ sera ignoré, et aucun chemin ne sera créé pour ce fichier (voir l'option exclude).

mon-site-web
├── src
│ └── pages
│ ├── styles.module.css
│ ├── index.js
| ├──_ignored.js
│ └── support
│ ├── index.js
│ └── styles.module.css
.
attention

Tous les fichiers JavaScript/TypeScript situés dans le répertoire src/pages/ auront des chemins d'accès correspondants au site web générés pour eux. Si vous voulez créer des composants réutilisables dans ce répertoire, utilisez l'option exclude (par défaut, les fichiers préfixés avec _, fichiers de test (.test.js) et les fichiers dans le répertoire __tests__ ne sont pas transformés en pages).

Utiliser React#

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.

Chemins dupliqués#

Vous pouvez accidentellement créer plusieurs pages qui sont censées être accédées sur le même chemin. Quand cela se produit, Docusaurus vous avertira des chemins dupliqués lorsque vous exécutez yarn start ou yarn build, mais le site sera toujours construit avec succès. 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.