📦 plugin-content-pages

Le plugin de pages par défaut pour Docusaurus. Le template classic est livré avec ce plugin avec les configurations par défaut. Ce plugin fournit la fonctionnalité de création de pages.

Installation

npm

npm install --save @docusaurus/plugin-content-pages

Yarn

yarn add @docusaurus/plugin-content-pages

pnpm

pnpm add @docusaurus/plugin-content-pages

astuce

Si vous utilisez le preset @docusaurus/preset-classic, vous n'avez pas besoin d'installer ce plugin en tant que dépendance.

Vous pouvez configurer ce plugin via les options du preset.

Configuration

Champs acceptés :

Nom	Type	Par défaut	Description
path	string	'src/pages'	Chemin vers les données sur le système de fichiers par rapport au répertoire du site. Les composants de ce répertoire seront automatiquement convertis en pages.
editUrl	string | EditUrlFn	undefined	Only for Markdown pages. URL de base pour modifier votre site. L'URL finale est calculée par editUrl + relativePostPath. L'utilisation d'une fonction permet un contrôle plus nuancé pour chaque fichier. Omettre cette variable désactivera entièrement les liens de modification.
editLocalizedFiles	boolean	false	Only for Markdown pages. L'URL de modification ciblera le fichier localisé, au lieu du fichier original non localisé. Ignoré lorsque editUrl est une fonction.
routeBasePath	string	'/'	Route URL pour la section des pages de votre site. NE PAS inclure un slash de fin.
include	string[]	['**/*.{js,jsx,ts,tsx,md,mdx}']	Les fichiers correspondants seront inclus et traités.
exclude	string[]	Voir l'exemple de configuration	Aucune route ne sera créée pour les fichiers correspondants.
mdxPageComponent	string	'@theme/MDXPage'	Composant utilisé par chaque page MDX.
remarkPlugins	[]	any[]	Plugins Remark passés à MDX.
rehypePlugins	[]	any[]	Plugins Rehype passés à MDX.
beforeDefaultRemarkPlugins	any[]	[]	Les plugins Remark personnalisés sont transmis à MDX avant les plugins Remark par défaut de Docusaurus.
beforeDefaultRehypePlugins	any[]	[]	Les plugins Rehype personnalisés sont transmis à MDX avant les plugins Rehype par défaut de Docusaurus.
showLastUpdateAuthor	boolean	false	Only for Markdown pages. Whether to display the author who last updated the page.
showLastUpdateTime	boolean	false	Only for Markdown pages. Whether to display the last date the page post was updated. Cela nécessite l'accès à l'historique git pendant la construction, et ne fonctionnera donc pas correctement avec des clones superficiels (un défaut courant pour les systèmes de CI). Avec GitHub actions/checkout, utilisez fetch-depth: 0.

Types

EditUrlFn

type EditUrlFunction = (params: {
  blogDirPath: string;
  blogPath: string;
  permalink: string;
  locale: string;
}) => string | undefined;

Exemple de configuration

Vous pouvez configurer ce plugin via les options du preset ou du plugin.

astuce

La plupart des utilisateurs de Docusaurus configurent ce plugin via les options du preset.

Options du preset

Si vous utilisez un preset, configurez ce plugin via le options du preset :

docusaurus.config.js

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        pages: {
          path: 'src/pages',
          routeBasePath: '',
          include: ['**/*.{js,jsx,ts,tsx,md,mdx}'],
          exclude: [
            '**/_*.{js,jsx,ts,tsx,md,mdx}',
            '**/_*/**',
            '**/*.test.{js,jsx,ts,tsx}',
            '**/__tests__/**',
          ],
          mdxPageComponent: '@theme/MDXPage',
          remarkPlugins: [require('./my-remark-plugin')],
          rehypePlugins: [],
          beforeDefaultRemarkPlugins: [],
          beforeDefaultRehypePlugins: [],
        },
      },
    ],
  ],
};

Options du plugin

Si vous utilisez un plugin autonome, fournissez des options directement au plugin :

docusaurus.config.js

module.exports = {
  plugins: [
    [
      '@docusaurus/plugin-content-pages',
      {
        path: 'src/pages',
        routeBasePath: '',
        include: ['**/*.{js,jsx,ts,tsx,md,mdx}'],
        exclude: [
          '**/_*.{js,jsx,ts,tsx,md,mdx}',
          '**/_*/**',
          '**/*.test.{js,jsx,ts,tsx}',
          '**/__tests__/**',
        ],
        mdxPageComponent: '@theme/MDXPage',
        remarkPlugins: [require('./my-remark-plugin')],
        rehypePlugins: [],
        beforeDefaultRemarkPlugins: [],
        beforeDefaultRehypePlugins: [],
      },
    ],
  ],
};

Markdown frontmatter

Les pages Markdown peuvent utiliser les champs de métadonnées Markdown du front matter suivants, entourés d'une ligne --- de part et d'autre.

Champs acceptés :

Nom	Type	Par défaut	Description
title	string	Titre du Markdown	Le titre de l'article du blog.
description	string	La première ligne du contenu Markdown	La description de votre page, qui deviendra la <meta name="description" content="..."/> et <meta property="og:description" content="..."/> dans <head>, utilisé par les moteurs de recherche.
keywords	string[]	undefined	Balise meta des mots clés, qui deviendra le <meta name="keywords" content="keyword1,keyword2,..."/> dans <head>, utilisé par les moteurs de recherche.
image	string	undefined	Image de couverture ou vignette qui sera utilisée comme <meta property="og:image" content="..."/> dans le <head>, améliorant les aperçus de liens sur les médias sociaux et les plateformes de messagerie.
wrapperClassName	string		Nom de la classe à ajouter à l'élément wrapper pour permettre le ciblage du contenu spécifique de la page.
hide_table_of_contents	boolean	false	S'il faut cacher la table des matières à droite.
draft	boolean	false	Les brouillons de page seront disponibles uniquement lors du développement.
unlisted	boolean	false	Les pages non listées seront disponibles à la fois en développement et en production. Ils seront « cachés » en production, non indexés, exclus des sitemaps, et ne peuvent être consultés que par les utilisateurs ayant un lien direct.

Exemple :

---
title: Page Markdown
description: Markdown page SEO description
wrapperClassName: markdown-page
hide_table_of_contents: false
draft: true
---

Contenu de la page Markdown

i18n

Lisez l’introduction i18n en premier.

Emplacement des fichiers de traduction

• Chemin de base : website/i18n/[locale]/docusaurus-plugin-content-pages
• Chemin d'accès multi-instance : website/i18n/[locale]/docusaurus-plugin-content-pages-[pluginId]
• Fichiers JSON : extrait avec docusaurus write-translations
• Fichiers Markdown : website/i18n/[locale]/docusaurus-plugin-content-pages

Exemple de structure du système de fichiers

website/i18n/[locale]/docusaurus-plugin-content-pages
│
│ # traductions pour website/src/pages
├── first-markdown-page.md
└── second-markdown-page.md