Aller au contenu principal
Version: 2.0.0-beta.9 🚧

Blog

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

info

Consultez la documentation de référence de l'API du plugin Blog pour une liste exhaustive d'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
module.exports = {
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-v2.md :

website/blog/2019-09-05-hello-docusaurus-v2.md
---
title: Bienvenue Docusaurus v2
description: Ceci est mon premier article sur Docusaurus 2.
slug: welcome-docusaurus-v2
authors:
- name: Joel Marcey
title: Co-créateur de Docusaurus 1
url: https://github.com/JoelMarcey
image_url: https://github.com/JoelMarcey.png
- name: Sébastien Lorber
title: Mainteneur de Docusaurus
url: https://sebastienlorber.com
image_url: https://github.com/slorber.png
tags: [hello, docusaurus-v2]
image: https://i.imgur.com/mErPwqL.png
hide_table_of_contents: false
---
Bienvenue sur ce blog. Ce blog est créé avec [**Docusaurus 2**](https://docusaurus.io/).

<!--truncate-->

C'est mon premier post sur Docusaurus 2.

Un tas d'exploration à suivre.
remarque

Docusaurus va extraire une date AAAA-MM-JJ à partir d'un nom de fichier/dossier tel que AAAA-MM-JJ-blog-post-title.md.

Cette convention de nommage est facultative, et vous pouvez fournir la date dans le FrontMatter.

Exemple de modèles pris en charge
  • 2021-05-28-my-blog-post-title.md
  • 2021-05-28-my-blog-post-title.mdx
  • 2021-05-28-my-blog-post-title/index.md
  • 2021-05-28/my-blog-post-title.md
  • 2021/05/28/my-blog-post-title.md
  • 2021/05-28-my-blog-post-title.md
  • 2021/05/28/my-blog-post-title/index.md
  • ...
astuce

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

Le seul champ obligatoire dans le frontmatter est le title ; cependant, nous proposons des options pour ajouter plus de métadonnées à votre article de blog, par exemple, des informations sur l'auteur. Pour tous les champs possibles, consultez la documentation 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 <!--truncate--> 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 <!--truncate--> fera partie du résumé. Par exemple :

---
title: Exemple de résumé
---
Tout ceci fera partie du résumé de l'article du blog.

Même cela.

<!--truncate-->

Mais ce qui est ici ne le sera pas.

Pas ça.

Ni ceci.

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 seront affichés sur la 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
module.exports = {
// ...
presets: [
[
'@docusaurus/preset-classic',
{
blog: {
blogTitle: 'Blog de Docusaurus !',
blogDescription: 'Un blog alimenté par Docusaurus !',
postsPerPage: 'ALL',
},
},
],
],
};

Barre latérale du blog

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 "Recent posts", vous préféreriez peut-être qu'il indique "All posts" :

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

Auteurs d'articles du blog

Utilisez le champ authors du FrontMatter pour déclarer les auteurs des articles du blog.

Auteurs en ligne

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

my-blog-post.md
---
authors:
name: Joel Marcey
title: Co-créateur de Docusaurus 1
url: https://github.com/JoelMarcey
image_url: https://github.com/JoelMarcey.png
---
astuce

Cette option est la plus efficace pour débuter, ou pour les auteurs occasionnels et irréguliers.

info

Préférez l'utilisation de authors du FrontMatter, mais l'ancien author_* du FrontMatter 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 du blog, il peut être fastidieux de maintenir les informations des auteurs 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-créateur de Docusaurus 1
url: https://github.com/JoelMarcey
image_url: https://github.com/JoelMarcey.png

slorber:
name: Sébastien Lorber
title: Mainteneur de Docusaurus
url: https://sebastienlorber.com
image_url: https://github.com/slorber.png
astuce

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

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

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

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

Mélangez 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
---
Remplacement local des 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
---
Traduisez 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

Reading time

Docusaurus generates a reading time estimation for each blog post based on word count. We provide an option to customize this.

docusaurus.config.js
module.exports = {
presets: [
[
'@docusaurus/preset-classic',
{
blog: {
showReadingTime: true, // When set to false, the "x min read" won't be shown
readingTime: ({content, frontMatter, defaultReadingTime}) =>
defaultReadingTime({content, options: {wordsPerMinute: 300}}),
},
},
],
],
};

The readingTime callback receives three parameters: the blog content text as a string, front matter as a record of string keys and their values, and the default reading time function. It returns a number (reading time in minutes) or undefined (disable reading time for this page).

The default reading time is able to accept additional options: wordsPerMinute as a number (default: 300), and wordBound as a function from string to boolean. If the string passed to wordBound should be a word bound (spaces, tabs, and line breaks by default), the function should return true.

astuce

Use the callback for all your customization needs:

Disable reading time on one page:

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

Usage:

---
hide_reading_time: true
---

This page will no longer display the reading time stats!

Flux

Vous pouvez générer des flux RSS/Atom en passant les options de 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 BlogOptions = {
feedOptions?: {
type?: 'rss' | 'atom' | 'all' | null;
title?: string;
description?: string;
copyright: string;
language?: string; // valeurs posssibles : http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes
};
};

Exemple d'utilisation:

docusaurus.config.js
module.exports = {
// ...
presets: [
[
'@docusaurus/preset-classic',
{
blog: {
feedOptions: {
type: 'all',
copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`,
},
},
},
],
],
};

Accès au flux :

Le flux RSS peut être trouvé sur :

https://{your-domain}/blog/rss.xml

et pour Atom :

https://{your-domain}/blog/atom.xml

Fonctionnalités avancées

Mode blog-uniquement

Vous pouvez faire fonctionner votre site Docusaurus 2 sans page d'accueil et utiliser la liste des articles de votre blog comme page d'index. Définissez routeBasePath à '/' pour indiquer que c'est le chemin racine.

docusaurus.config.js
module.exports = {
// ...
presets: [
[
'@docusaurus/preset-classic',
{
docs: false,
blog: {
path: './blog',
routeBasePath: '/', // Définit cette valeur à '/'.
},
},
],
],
};
caution

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

Plusieurs blogs

Par défaut, le thème classic n'assume 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 aussi possible ! Vous pouvez ajouter un autre blog en spécifiant un autre plugin de blog dans l'option plugins dans docusaurus.config.js.

Définissez routeBasePath avec l'URL sur laquelle vous voulez 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 ! Aussi, définissez path avec le chemin du répertoire contenant les entrées de votre second blog.

Comme décrits dans les plugins multi-instance, vous devez assigner un id unique aux plugins.

docusaurus.config.js
module.exports = {
// ...
plugins: [
[
'@docusaurus/plugin-content-blog',
{
/**
* Requis pour tout plugin multi-instance
*/
id : 'second-blog',
/**
* URL pour la section blog de votre site.
* * * NE PAS inclure de slash.
*/
routeBasePath: 'my-second-blog',
/**
* Chemin vers les données sur le système de fichiers relatif au répertoire du site.
*/
path: './my-second-blog',
},
],
],
};

À titre d'exemple, un second blog est hébergé ici.