Pages and Styles · Docusaurus

Docusaurus fournit un support de création de pages en tant que composants React dans le dossier website/pages qui partagent les mêmes en-tête, pied de page et styles que le reste du site.

Provided Props

Docusaurus provides your siteConfig.js as a config props. Hence, you can access baseUrl or title through this props.

Exemple

const React = require('react');

class MyPage extends React.Component {
  render() {
    const siteConfig = this.props.config;
    return <div>{siteConfig.title}</div>;
  }
}

module.exports = MyPage;

URL des pages

Tout fichier .js dans le dossier website/pages sera converti en HTML statique à l'aide du chemin de fichier après pages. Les fichiers dans website/pages/en seront également copiés dans pages et écraseront tous les fichiers du même nom dans pages. Par exemple, la page pour le fichier website/pages/en/help.js peut-être trouvée à l'URL ${baseUrl}/en/help.js ou à l'URL ${baseUrl}help.js où ${baseUrl} est le champ baseURL configuré dans votre fichier siteConfig.js.

Titre des pages

Par défaut,le titre de votre page est is <title> • <tagline> où les champs title et tagline sont configurés dans siteConfig.js. Vous pouvez exclure le slogan du titre en paramétrant disableTitleTagline à true. Si vous voulez configurer un titre spécifique dans vos pages personnalisées, ajoutez une propriété de classe title dans votre composant React exporté.

Exemple :

const React = require('react');

class MyPage extends React.Component {
  render() {
    // ... votre code de rendu
  }
}

MyPage.title = 'Mon titre personnalisé';

module.exports = MyPage;

Description des pages

Par défaut, la description de votre page est tagline définie dans siteConfig.js. Si vous voulez configurer une description spécifique dans vos pages customisées, ajouter une propriété de classe title dans votre composant React exporté.

Exemple :

const React = require('react');

class MyPage extends React.Component {
  render() {
    // ... code de rendu
  }
}

MyPage.description = 'Ma description customisée;

module.exports = MyPage;

Cela va être traduit par une méta-balise de description dans le code HTML généré.

<meta property="og:description" content="Ma description personnalisée"/>
<meta name="description" content="Ma description personnalisée"/>

Page Require Paths

Docusaurus provides a few useful React components for users to write their own pages, found in the CompLibrary module. Ce module est fourni dans le cadre de Docusaurus en node_modules/docusaurus, donc pour y accéder, les pages dans le répertoire de pages sont temporairement copiés dans node_modules/docusaurus lors du rendu au format HTML statique. As seen in the example files, this means that a user page at pages/en/index.js uses a require path to '../../core/CompLibrary.js' to import the provided components.

What this means to the user is that if you wish to use the CompLibrary module, make sure the require path is set correctly. For example, a page at page/mypage.js would use a path '../core/CompLibrary.js'.

Si vous souhaitez utiliser vos propres composants dans le répertoire du site, utilisez process.cwd() qui se référera au répertoire site pour construire des chemins. For example, if you add a component to website/core/mycomponent.js, you can use the require path, 'process.cwd() + /core/mycomponent.js'.

Provided Components

Docusaurus provides the following components in CompLibrary:

`CompLibrary.MarkdownBlock`

A React component that parses markdown and renders to HTML.

Exemple :

const MarkdownBlock = CompLibrary.MarkdownBlock;

<MarkdownBlock>
  [Markdown syntax for a link](http://www.example.com)
</MarkdownBlock>;

`CompLibrary.Container`

A React container component using Docusaurus styles. Has optional padding and background color props that you can configure.

Props

Prop	Type	Défault	Description
`padding`	Tableau contenant les valeurs `'all'`, `'bottom'`, `'left'`, `'right'`, `'top'`	`[]`	Positions du padding.
`arrière-plan`	Une des valeurs `'dark'`, `'highlight'`, `'light'`	`null`	Style d'arrière-plan de l'élément.
`className`	String	-	Classe personnalisée pour ajout à l'élément.

Exemple

<Container
  padding={['bottom', 'top']}
  background="light"
  className="myCustomClass">
  ...
</Container>

`CompLibrary.GridBlock`

A React component to organize text and images.

Props

Prop	Type	Défault	Description
`align`	Une des valeurs `'left'`, `'center'`, `'right'`	`'left'`	Alignement du texte du contenu.
`layout`	Une des valeurs `'twoColumn'`, `'threeColumn'`, `'fourColumn'`	`'twoColumn'`	Nombre de sections de colonnes dans `GridBlock`.
`className`	String	-	Classe personnalisée pour ajout à l'élément.
`contents`	Tableau d'objets de contenu	`[]`	Contenu de chaque section du bloc GridBlock. Reportez-vous à la table suivante pour les champs disponibles sur un objet de contenu.

Content Object

Clé	Type	Défault	Description
`title`	String	-	Le titre d'affichage de cette section, qui est analysé en utilisant Markdown
`content`	String	-	Le texte de cette section, qui est analysé en utilisant Markdown
`image`	String	-	Le chemin d’accès de l’image
`imageAlt`	String	-	Le texte qui sera affiché dans le cas où l'image n'est pas disponible
`imageAlign`	Une des valeurs `'top'`, `'left'`, `'bottom'`, `'right'`	`'left'`	Alignement de l'image par rapport au texte
`imageLink`	String	-	Lien de la destination en cliquant sur le lien d'image

Exemple

<GridBlock
  align="center"
  layout="threeColumn"
  className="myCustomClass"
  contents={[
    {
      title: `[Learn](${siteConfig.baseUrl}${siteConfig.docsUrl}/tutorial.html)`,
      content: 'Learn how to use this project',
      image: siteConfig.baseUrl + 'img/learn.png',
      imageAlt: 'Learn how to use this project',
      imageLink: siteConfig.baseUrl + 'docs/tutorial.html',
    },
    {
      title: 'Frequently Asked Questions',
      content: 'Questions gathered from the community',
      image: siteConfig.baseUrl + 'img/faq.png',
      imageAlign: 'top',
    },
    {
      title: 'More',
      content: 'Lots of documentation is on this site',
    },
  ]}
/>

More examples of how these components are used can be found in the generated example files as well as in Docusaurus' own repository for its website set-up.

Translating Strings

When translations are enabled, any pages inside website/pages/en will be translated for all enabled languages. Les URLs pour les pages non-anglophones utiliseront leurs tags de langue comme indiqué dans le fichier languages.js . Par exemple, l'URL d'une page française de website/pages/en/help.js se trouve à ${baseUrl}fr/help.html.

When writing pages that you wish to translate, wrap any strings to be translated inside a <translate> tag. Par exemple :

<p>
  <translate>I like translations</translate>
</p>

You can also provide an optional description attribute to provide context for translators. e.g,

<a href="/community">
  <translate desc="Footer link to page referring to community GitHub and Slack">
    Community
  </translate>
</a>

Add the following require statement as well:

const translate = require('../../server/translate.js').translate;

Note that this path is valid for files inside pages/en and should be adjusted accordingly if files are in different locations, as discussed above.

Using Static Assets

Static assets should be placed into the website/static directory. They can be accessed by their paths, excluding static. For example, if the site's baseUrl is /docusaurus/, an image in website/static/img/logo.png is available at /docusaurus/img/logo.png.

Styles

You should configure your site's primary, secondary, and code block colors using the colors field in siteConfig as specified here. You can also configure other colors in the same way as described in the siteConfig doc.

Il existe plusieurs façons d'accéder aux styles par défaut fournis pour votre site. Si vous avez commencé à développer votre site web et exécuter la commande docusaurus-init ou yarn install vous pouvez trouver vos styles par défaut dans site/node_modules/docusaurus/lib/static/css/main.css. Alternatively, the main.css file may be inspected directly at the Docusaurus GitHub repository.

Vous pouvez fournir vos propres styles personnalisés en les ajoutant n'importe où dans le répertoire website/static . Any .css files you provide in the static directory will get concatenated to the end of Docusaurus' provided styles, allowing you to add to or override Docusaurus default styles as you wish.

One way to figure out what classes you wish to override or add to is to start your server locally and use your browser's inspect element tool.