Translate

Pages and Styles

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="My Custom Description"/><meta name="description" content="My Custom Description"/>

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	Array of 'all', 'bottom', 'left', 'right', 'top'	[]	Positions of the padding.
arrière-plan	One of 'dark', 'highlight', 'light'	null	Style d'arrière-plan de l'élément.
className	String	-	Custom class to add to the element.

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	One of 'left', 'center', 'right'	'left'	Alignement du texte du contenu.
layout	One of 'twoColumn', 'threeColumn', 'fourColumn'	'twoColumn'	Number of column sections in the GridBlock.
className	String	-	Custom class to add to the element.
contents	Array of content objects	[]	Contenu de chaque section du bloc GridBlock. Reportez-vous à la table suivante pour les champs disponibles sur un objet de contenu.

Content Object

Key	Type	Défault	Description
titre	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	One of 'top', 'left', 'bottom', 'right'	'left'	Image alignment relative to the text
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. e.g.,

<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.

There are several ways to access the default styles provided for your site. If you have started developing your website and executed the docusaurus-init or yarn install command, your default styles can be found at website/node_modules/docusaurus/lib/static/css/main.css. Alternatively, the main.css file may be inspected directly at the Docusarus 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.

An easy 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.