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.
Pages do not have sidebars, only docs do.
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
:
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.
You can also create TypeScript pages with the .tsx
extension (helloReact.tsx
).
Add a Markdown page
Create a file /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.
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.
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
.
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.