Version : 3.6.0

Blog

La fonction blog vous permet de déployer un blog complet en un rien de temps.

info

Consultez la documentation de référence de l'API du plugin du Blog pour une liste exhaustive des options.

Configuration initiale

Pour configurer le blog de votre site, commencez par créer un répertoire blog.

Ensuite, ajoutez un lien vers le blog dans docusaurus.config.js :

docusaurus.config.js
export default {
  themeConfig: {
    // ...
    navbar: {
      items: [
        // ...
        {to: 'blog', label: 'Blog', position: 'left'}, // ou position: 'right'
      ],
    },
  },
};

Ajouter des articles

Pour publier dans le blog, créez un fichier Markdown dans le répertoire blog.

Par exemple, créez un fichier à website/blog/2019-09-05-hello-docusaurus.md :

website/blog/2019-09-05-hello-docusaurus.md
---
title: Welcome Docusaurus
description: This is my first post on Docusaurus.
slug: welcome-docusaurus-v2
authors:
  - name: Joel Marcey
    title: Co-creator of Docusaurus 1
    url: https://github.com/JoelMarcey
    image_url: https://github.com/JoelMarcey.png
    socials:
      x: joelmarcey
      github: JoelMarcey
  - name: Sébastien Lorber
    title: Docusaurus maintainer
    url: https://sebastienlorber.com
    image_url: https://github.com/slorber.png
    socials:
      x: sebastienlorber
      github: slorber
tags: [hello, docusaurus-v2]
image: https://i.imgur.com/mErPwqL.png
hide_table_of_contents: false
---

Welcome to this blog. This blog is created with [**Docusaurus 2**](https://docusaurus.io/).

<!-- truncate -->

This is my first post on Docusaurus 2.

A whole bunch of exploration to follow.

Le front matter est utile pour ajouter des métadonnées supplémentaires à votre article de blog, par exemple des informations sur l'auteur, mais Docusaurus sera capable de déduire toutes les métadonnées nécessaires sans le frontmatter. Pour connaître tous les champs possibles, consultez la documentation de l'API.

Liste du blog

La page d'index du blog (par défaut, elle se trouve dans /blog) est la page de présentation du blog, où tous les articles du blog sont affichés collectivement.

Utilisez le marqueur  dans votre article du blog pour représenter ce qui sera affiché comme résumé lors de l'affichage de tous les articles du blog publiés. Tout ce qui est au-dessus de  fera partie du résumé. Notez que la partie située au-dessus du marqueur truncate doit être un texte Markdown autonome pouvant être rendu. Par exemple :

website/blog/my-post.md
---
title: Exemple Markdown de troncature du blog
---

Tous ces éléments feront partie du résumé de l'article du blog.

<!-- truncate -->

Mais tout ce qui se fait à partir d'ici ne le sera plus.

Pour les fichiers utilisant l'extension .mdx, utilisez un commentaire MDX {/* truncate */} à la place :

website/blog/my-post.mdx
---
title: Exemple MDX de troncature du blog
---

Tous ces éléments feront partie du résumé de l'article du blog.

{/* truncate */}

Mais tout ce qui se fait à partir d'ici ne le sera plus.

Par défaut, 10 articles sont affichés sur chaque page de la liste du blog, mais vous pouvez contrôler la pagination avec l'option postsPerPage dans la configuration du plugin. Si vous définissez postsPerPage: 'ALL', la pagination sera désactivée et tous les articles s'afficheront en première page. Vous pouvez également ajouter une méta description à la page de la liste de blog pour un meilleur référencement :

docusaurus.config.js
export default {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          blogTitle: 'Blog de Docusaurus !',
          blogDescription: 'Un blog propulsé par Docusaurus !',
          postsPerPage: 'ALL',
        },
      },
    ],
  ],
};

La barre latérale du blog affiche les articles récents du blog. Le nombre d'éléments affichés par défaut est de 5, mais vous pouvez personnaliser avec l'option blogSidebarCount dans la configuration du plugin. En définissant blogSidebarCount: 0, la barre latérale sera complètement désactivée, le conteneur étant également supprimé. Cela augmentera la largeur du conteneur principal. En particulier, si vous avez défini blogSidebarCount: 'ALL', tous les articles seront affichés.

Vous pouvez également modifier le texte d'entête de la barre latérale avec l'option blogSidebarTitle. Par exemple, si vous avez défini blogSidebarCount : 'ALL', au lieu de l'affichage par défaut « Articles récents », vous pourriez préférer afficher « Tous les articles » :

docusaurus.config.js
export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          blogSidebarTitle: 'Tous les articles',
          blogSidebarCount: 'ALL',
        },
      },
    ],
  ],
};

Date de l'article du blog

Docusaurus extraira une date AAAA-MM-JJ à partir de nombreux patterns tels que AAAA-MM-JJ-mon-titre-article-du-blog.md ou AAAA/MM/JJ/mon-titre-article-du-blog.md. Cela vous permet de regrouper facilement les articles de blog par année, par mois, ou d'utiliser une structure plate.

Patterns d'extraction de date pris en charge

Modèle	Exemple
Fichier simple	`2021-05-28-my-blog-post-title.md`
Fichier MDX	`2021-05-28-my-blog-post-title.mdx`
Dossier simple + `index.md`	`2021-05-28-my-blog-post-title/index.md`
Dossier nommé par date	`2021-05-28/my-blog-post-title.md`
Dossiers imbriqués par date	`2021/05/28/my-blog-post-title.md`
Dossiers partiellement imbriqués par date	`2021/05-28-my-blog-post-title.md`
Dossiers imbriqués + `index.md`	`2021/05/28/my-blog-post-title/index.md`
Date au milieu du chemin	`category/2021/05-28-my-blog-post-title.md`

Docusaurus peut extraire la date des publications en utilisant n'importe quel modèle de nommage ci-dessus. Il est conseillé de choisir un modèle et de l'appliquer à tous les articles pour éviter toute confusion.

astuce

Utiliser un dossier peut s'avérer pratique pour placer les images de l'article de blog au même endroit que le fichier Markdown.

Cette convention de nommage est facultative, et vous pouvez fournir la date dans le front matter. Puisque le front matter suit la syntaxe YAML où la notation de la date est prise en charge, vous pouvez utiliser le front matter si vous avez besoin de dates de publication plus précises. Par exemple, si vous avez plusieurs articles publiés le même jour, vous pouvez les trier selon l'heure de la journée :

earlier-post.md
---
date: 2021-09-13T10:00
---

later-post.md
---
date: 2021-09-13T18:00
---

Auteurs d'articles du blog

Utilisez le champ authors du front matter pour déclarer les auteurs des articles du blog. Un auteur doit avoir au moins name ou image_url. Docusaurus utilise des informations comme url, email et title, mais toute autre information est autorisée.

Auteurs en ligne

Les auteurs d'articles peuvent être déclarés directement à l'intérieur du front matter :

Auteur unique
Plusieurs auteurs

my-blog-post.md
---
authors:
  name: Joel Marcey
  title: Co-creator of Docusaurus 1
  url: https://github.com/JoelMarcey
  image_url: https://github.com/JoelMarcey.png
  email: [email protected]
  socials:
    x: joelmarcey
    github: JoelMarcey
---

my-blog-post.md
---
authors:
  - name: Joel Marcey
    title: Co-creator of Docusaurus 1
    url: https://github.com/JoelMarcey
    image_url: https://github.com/JoelMarcey.png
    email: [email protected]
    socials:
      x: joelmarcey
      github: JoelMarcey
  - name: Sébastien Lorber
    title: Docusaurus maintainer
    url: https://sebastienlorber.com
    image_url: https://github.com/slorber.png
    socials:
      x: sebastienlorber
      github: slorber
---

astuce

Cette option convient particulièrement pour commencer ou pour des auteurs occasionnels ou irréguliers.

info

Préférez l'utilisation de authors du front matter, mais l'ancien author_* du front matter reste pris en charge :

my-blog-post.md
---
author: Joel Marcey
author_title: Co-créateur de Docusaurus 1
author_url: https://github.com/JoelMarcey
author_image_url: https://github.com/JoelMarcey.png
---

Auteurs globaux

Pour les auteurs réguliers, il peut être fastidieux de maintenir leurs informations dans chaque article du blog.

Il est possible de déclarer ces auteurs globalement dans un fichier de configuration :

website/blog/authors.yml
jmarcey:
  name: Joel Marcey
  title: Co-creator of Docusaurus 1
  url: https://github.com/JoelMarcey
  image_url: https://github.com/JoelMarcey.png
  email: [email protected]
  socials:
    x: joelmarcey
    github: JoelMarcey

slorber:
  name: Sébastien Lorber
  title: Docusaurus maintainer
  url: https://sebastienlorber.com
  image_url: https://github.com/slorber.png
  socials:
    x: sebastienlorber
    github: slorber

astuce

Utilisez l'option du plugin authorsMapPath pour configurer le chemin. Le format JSON est également pris en charge.

Dans le front matter des articles du blog, vous pouvez référencer les auteurs déclarés dans le fichier de configuration globale :

Auteur unique
Plusieurs auteurs

my-blog-post.md
---
authors: jmarcey
---

my-blog-post.md
---
authors: [jmarcey, slorber]
---

info

Le système authors est très flexible et peut convenir à un cas d'utilisation plus avancé :

Mélanger les auteurs en ligne et les auteurs globaux

Vous pouvez utiliser les auteurs globaux la plupart du temps, et toujours utiliser les auteurs en ligne :

my-blog-post.md
---
authors:
  - jmarcey
  - slorber
  - name: Nom de l'auteur en ligne
    title: Titre de l'auteur en ligne
    url: https://github.com/inlineAuthor
    image_url: https://github.com/inlineAuthor
---

Remplacer localement les auteurs globaux

Vous pouvez personnaliser les données globales de l'auteur sur la base de chaque article du blog:

my-blog-post.md
---
authors:
  - key: jmarcey
    title: Le nouveau titre de Joel Marcey
  - key: slorber
    name: Le nouveau nom de Sébastien Lorber
---

Localiser le fichier de configuration de l'auteur

Le fichier de configuration peut être traduit, il suffit d'en créer une copie traduite à cet endroit :

website/i18n/[locale]/docusaurus-plugin-content-blog/authors.yml

Un auteur, qu'il soit déclaré par le front matter ou par la carte des auteurs, doit avoir un nom ou un avatar, ou les deux. Si tous les auteurs d'un message n'ont pas de noms, Docusaurus affichera leurs avatars de manière compacte. Consultez cet article de test pour en connaître l'effet.

Génération de flux

Les flux RSS nécessitent que l'email de l'auteur soit défini pour que l'auteur apparaisse dans le flux.

Authors pages

The authors pages feature is optional, and mainly useful for multi-author blogs.

You can activate it independently for each author by adding a page: true attribute to the global author configuration:

website/blog/authors.yml
slorber:
  name: Sébastien Lorber
  page: true # Turns the feature on - route will be /authors/slorber

jmarcey:
  name: Joel Marcey
  page:
    # Turns the feature on - route will be /authors/custom-author-url
    permalink: '/custom-author-url'

The blog plugin will now generate:

a dedicated author page for each author (example) listing all the blog posts they contributed to
an authors index page (example) listing all these authors, in the order they appear in authors.yml

About inline authors

Only global authors can activate this feature. Inline authors are not supported.

Blog post tags

Tags are declared in the front matter and introduce another dimension of categorization.

It is possible to define tags inline, or to reference predefined tags declared in a tags file (optional, usually blog/tags.yml).

In the following example:

docusaurus references a predefined tag key declared in blog/tags.yml
Releases is an inline tag, because it does not exist in blog/tags.yml

blog/my-post.md
---
title: 'My blog post'
tags:
  - Releases
  - docusaurus
---

Content

blog/tags.yml
docusaurus:
  label: 'Docusaurus'
  permalink: '/docusaurus'
  description: 'Blog posts related to the Docusaurus framework'

Temps de lecture

Pour chaque article du blog, Docusaurus génère une estimation du temps de lecture, basé sur le nombre de mots. Une option permet de personnaliser cette fonctionnalité.

docusaurus.config.js
export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          showReadingTime: true, // S'il est défini à false, le "x min read" ne sera pas affiché
          readingTime: ({content, frontMatter, defaultReadingTime}) =>
            defaultReadingTime({content, options: {wordsPerMinute: 300}}),
        },
      },
    ],
  ],
};

Le callback readingTime reçoit trois paramètres : le texte du contenu du blog sous forme de chaîne de caractères, le front matter sous forme d'un enregistrement de clés de chaîne de caractères et de leurs valeurs, et la fonction de temps de lecture par défaut. Il renvoie un nombre (temps de lecture en minutes) ou undefined (pour désactiver le temps de lecture pour cette page).

Le temps de lecture par défaut est capable d'accepter des options supplémentaires : wordsPerMinute comme un nombre (par défaut : 300) et wordBound comme une fonction qui transforme une chaîne de caractères en booléen. Si la chaîne passée à wordBound doit être un mot lié (espaces, tabulations et sauts de ligne par défaut), la fonction doit retourner true.

astuce

Utilisez le callback pour tous vos besoins de personnalisation :

Désactivation par article
Options de transmission
Utilisation d'algorithmes personnalisés

Désactiver le temps de lecture sur une page :

docusaurus.config.js
export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          showReadingTime: true,
          readingTime: ({content, frontMatter, defaultReadingTime}) =>
            frontMatter.hide_reading_time
              ? undefined
              : defaultReadingTime({content}),
        },
      },
    ],
  ],
};

Utilisation :

---
hide_reading_time: true
---

Cette page n'affichera plus les stats de temps de lecture !

Passer les options à la fonction de temps de lecture par défaut :

docusaurus.config.js
export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          readingTime: ({content, defaultReadingTime}) =>
            defaultReadingTime({content, options: {wordsPerMinute: 100}}),
        },
      },
    ],
  ],
};

Utiliser une implémentation personnalisée du temps de lecture :

docusaurus.config.js
import myReadingTime from './myReadingTime';

export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          readingTime: ({content}) => myReadingTime(content),
        },
      },
    ],
  ],
};

Flux

Vous pouvez générer des flux RSS / Atom / JSON en passant feedOptions. Par défaut, les flux RSS et Atom sont générés. Pour désactiver la génération de flux, définissez feedOptions.type à null.

type FeedType = 'rss' | 'atom' | 'json';

type BlogOptions = {
  feedOptions?: {
    type?: FeedType | 'all' | FeedType[] | null;
    title?: string;
    description?: string;
    copyright: string;

    language?: string; // possible values: http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes
    limit?: number | false | null; // defaults to 20
    // XSLT permits browsers to style and render nicely the feed XML files
    xslt?:
      | boolean
      | {
          //
          rss?: string | boolean;
          atom?: string | boolean;
        };
    // Allow control over the construction of BlogFeedItems
    createFeedItems?: (params: {
      blogPosts: BlogPost[];
      siteConfig: DocusaurusConfig;
      outDir: string;
      defaultCreateFeedItems: (params: {
        blogPosts: BlogPost[];
        siteConfig: DocusaurusConfig;
        outDir: string;
      }) => Promise<BlogFeedItem[]>;
    }) => Promise<BlogFeedItem[]>;
  };
};

Exemple d'utilisation :

docusaurus.config.js
export default {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          feedOptions: {
            type: 'all',
            copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`,
            createFeedItems: async (params) => {
              const {blogPosts, defaultCreateFeedItems, ...rest} = params;
              return defaultCreateFeedItems({
                // ne conserve que les 10 articles de blog les plus récents dans le flux
                blogPosts: blogPosts.filter((item, index) => index < 10),
                ...rest,
              });
            },
          },
        },
      },
    ],
  ],
};

Les flux peuvent être trouvés sur :

RSS
Atom
JSON

https://example.com/blog/rss.xml

https://example.com/blog/atom.xml

https://example.com/blog/feed.json

Fonctionnalités avancées

Mode Blog uniquement

Vous pouvez exécuter votre site Docusaurus sans page d'accueil dédiée, et utiliser la liste des articles de votre blog comme page d'index. Définissez routeBasePath comme étant '/' pour servir le blog via la route racine example.com/ au lieu de la sous-route example.com/blog/.

docusaurus.config.js
export default {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: false, // Facultatif : désactive le plugin docs
        blog: {
          routeBasePath: '/', // Sert le blog à la racine du site
          /* autres options du blog */
        },
      },
    ],
  ],
};

attention

N'oubliez pas de supprimer la page d'accueil existante à ./src/pages/index.js sinon il y aura deux fichiers correspondant à la même route !

attention

Si vous désactivez le plugin docs, n'oubliez pas de supprimer les références au plugin docs partout dans votre fichier de configuration. Veillez notamment à supprimer les éléments de la barre de navigation liés aux docs.

astuce

Il y a aussi un « mode Docs-uniquement » pour ceux qui ne veulent utiliser que les Docs. Lisez le Mode Docs uniquement pour des instructions détaillées ou une explication plus élaborée de routeBasePath.

Blogs multiples

Par défaut, le thème classique ne supporte qu'un seul blog par site et n'inclut donc qu'une seule instance du plugin blog. Si vous souhaitez avoir plusieurs blogs sur un seul site web, c'est cependant possible ! Vous pouvez ajouter un blog supplémentaire en spécifiant un autre plugin de blog via l'option plugins dans docusaurus.config.js.

Définissez routeBasePath avec l'URL à laquelle vous souhaitez que votre deuxième blog soit accessible. Notez que routeBasePath doit être différent du premier blog sinon il pourrait y avoir une collision de chemins d'accès ! Définissez aussi path avec le chemin du répertoire contenant les entrées de votre second blog.

Comme décrit pour les plugins multi-instance, vous devez assigner un ID unique à chaque plugin.

docusaurus.config.js
export default {
  // ...
  plugins: [
    [
      '@docusaurus/plugin-content-blog',
      {
        /**
         * Nécessaire pour tout plugin multi-instance
         */
        id: 'second-blog',
        /**
         * Route URL pour la section blog de votre site.
         * *NE PAS* inclure de slash à la fin.
         */
        routeBasePath: 'my-second-blog',
        /**
         * Chemin d'accès aux données sur le système de fichiers par rapport au répertoire du site.
         */
        path: './my-second-blog',
      },
    ],
  ],
};

À titre d'exemple, nous hébergeons un deuxième blog ici.

Configuration initiale​

Ajouter des articles​

Liste du blog​

Barre latérale du blog​

Date de l'article du blog​

Auteurs d'articles du blog​

Auteurs en ligne​

Auteurs globaux​

Authors pages​

Blog post tags​

Temps de lecture​

Flux​

Fonctionnalités avancées​

Mode Blog uniquement​

Blogs multiples​

Configuration initiale

Ajouter des articles

Liste du blog

Barre latérale du blog

Date de l'article du blog

Auteurs d'articles du blog

Auteurs en ligne

Auteurs globaux

Authors pages

Blog post tags

Temps de lecture

Flux

Fonctionnalités avancées

Mode Blog uniquement

Blogs multiples