Skip to main content
Version: 2.0.0-alpha.70

Créer de pages

Dans cette section, nous allons apprendre à propos de la création de pages sur demande dans Docusaurus en utilisant React. Ceci est plus utile pour la création de pages autonomes uniques tel qu'une page de galerie, une page d'experimentation ou une page de support.

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

Vous pouvez utiliser des composantes 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 la composante Layout de @theme/Layout et envelopper votre contenu dans cette composante si vous voulez que la barre de navigation et/ou le pied de page apparaisse.

tip

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 êtes-vous ?

De la même manière, une page sera créée à http://localhost:3000/helloMarkdown.

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

Voici un exemple de page Markdown.

tip

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/. For example:

  • /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 composantes, il est encouragé à co-localiser votre style, balisage et comportement en composantes. 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éez un répertoire /src/pages/support/ et un fichier /src/pages/support/index.js.

Ce dernier est préféré, car il vous permet de mettre tout les 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 composante (support/index.js). Par défaut, tout fichier Markdown ou Javascript commençant par _ sera ignoré, et aucun chemin ne sera créée 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
.
caution

Tous les fichiers JavaScript/TypeScript dans le répertoire src/pages/ auront les chemins web correspondants générés pour eux. Si vous voulez créer des composantes 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 composante de page devrait exporter une composante React et vous pouvez vous profiter de l'expressivité de React pour construire un contenu riche et interactif.

Chemins en double#

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ées 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 la dernière sera accessible, mais elle remplacera d'autres pages en conflit. Pour résoudre ce problème, vous devriez modifier ou supprimer tout chemin en conflit.