Translate

Custom Pages

Vous pouvez ajouter à votre site des pages qui ne font ni partie des documents standard ni des fichiers markdown du blog. Vous pouvez le faire en ajoutant des fichiers .js au répertoire website/pages. Ces fichiers sont des composants React et le render() est appelé pour les créer, avec le renfort des classes CSS, etc.

Personnalisation de votre page d'accueil

La façon la plus simple de commencer à personnaliser votre page d'accueil est d'utiliser le site d'exemple qui a été créé lorsque vous avez exécuté le script d'initialisation Docusaurus.

Vous pouvez démarrer votre serveur local et aller à l'adresse http://localhost:3000 pour voir à quoi ressemble la page d'accueil d'exemple. À partir de là, éditez le fichier website/pages/fr/index.js et ses divers composants pour utiliser les images et le texte que vous voulez pour votre projet.

Ajouter d'autres pages personnalisées

Docusaurus fournit quelques exemples de pages utiles dans le répertoire website/pages/en, y compris index.js, users.js et help.js. Ce sont de bons exemples pour montrer comment créer une page personnalisée pour Docusaurus.

root-directory
├── docs
└── website
    ├── blog
    ├── core
    │   └── Footer.js
    ├── package.json
    ├── pages
    │   ├── index.js
    │   ├── users.js
    │   └── help.js
    ├── sidebars.json
    ├── siteConfig.js
    └── static

Vous êtes également libre d'écrire vos propres pages. Il est fortement conseillé d'avoir au moins une page d'index, mais aucune des pages fournies n'est à inclure obligatoirement dans votre site. Plus d'informations sur la façon d'utiliser les composants fournis ou d'inclure vos propres composants peuvent être trouvées ici. Des informations sur la façon de créer un lien vers vos différentes pages dans la barre de navigation d'entête peuvent être trouvées ici.

Si vous voulez que votre page apparaisse dans votre entête de navigation, vous devrez mettre à jour siteConfig.js pour l'ajouter à l'élément headerLinks. Par exemple, { page: 'about-slash', label: 'About/' },

Ajouter de pages statiques

Les fichiers statiques .html peuvent également être utilisés, mais ils n'incluront pas l'entête de Docusaurus, le pied de page ou les styles par défaut. Celles-ci peuvent être ajoutées au répertoire static de la même manière que les autres ressources statiques. Autrement, elles peuvent être placées dans le répertoire pages et seront traitées en tant que telles au lieu d'être affichées à partir de React.

Si vous souhaitez utiliser la feuille de style de Docusaurus, vous pouvez y accéder depuis ${baseUrl}css/main.css. Si vous souhaitez utiliser des CSS séparés pour ces pages statiques, vous pouvez les empêcher d'être concaténés aux styles de Docusaurus en les ajoutant dans le champ siteConfig.separateCss dans siteConfig.js.

Vous pouvez définir l'option de configuration du site $wrapPagesHTML afin d'encapsuler les fragments HTML bruts avec le style du site Docusaurus, l'entête et le pied de page.

Personnalisation du pied de page de votre site

À partir de l'exemple du fichier core/Footer.js qui a été créé lorsque vous avez exécuté le script d'initialisation Docusaurus, éditez le pied de page pour inclure tous les liens vers des pages de votre site ou d'autres sites que vous souhaitez avoir.

L'exemple fourni a trois colonnes avec une image de pied de page à gauche et le logo open source de Facebook et les droits d'auteur en bas. Si votre projet n'est pas un projet open source Facebook, supprimez le logo et les droits d'auteur. Sinon, n'hésitez pas à faire preuve de créativité avec votre pied de page et à lui donner un aspect que vous aimeriez !

Quelques suggestions pour les liens que vous pouvez fournir : documentation, API, Twitter, Discord, groupes Facebook, Stack Overflow, GitHub, etc.

Votre pied de page sera automatiquement appliqué à toutes les pages de votre site, y compris les docs et les articles du blog. La seule exception à cela, c'est toute page HTML statique que vous incluez.

Si vous ne voulez pas de pied de page pour votre site, changez la fonction render de core/Footer.js pour retourner null. Par exemple :

const React = require('react');

class Footer extends React.Component {
  render() {
    return null;
  }
}

module.exports = Footer;