Post

Rédiger un nouvel article

Posted
By Cotes Chung
12 min read
Rédiger un nouvel article

Ce tutoriel vous expliquera comment rédiger un article dans le modèle Chirpy, et il vaut la peine d’être lu même si vous avez déjà utilisé Jekyll, car de nombreuses fonctionnalités nécessitent la définition de variables spécifiques.

Nom et chemin

Créez un nouveau fichier nommé YYYY-MM-DD-TITLE.EXTENSION et placez-le dans le dossier _posts à la racine du projet. Notez que EXTENSION doit être md ou markdown. Pour gagner du temps, vous pouvez utiliser le plugin Jekyll-Compose.

Front Matter

En gros, vous devez remplir le Front Matter comme ci-dessous en haut du message :

1
2
3
4
5
6

---
title: TITLE
date: YYYY-MM-DD HH:MM:SS +/-TTTT
categories: [TOP_CATEGORY, SUB_CATEGORY]
tags: [TAG]     # TAG names should always be lowercase
---

Le layout des articles a été défini sur post par défaut, il n’est donc pas nécessaire d’ajouter la variable layout dans le bloc Front Matter.

Fuseau horaire de la date

Pour enregistrer avec précision la date de sortie d’une publication, vous devez non seulement configurer le timezone de _config.yml mais également fournir le fuseau horaire de la publication dans la variable date de son bloc Front Matter. Format : +/-TTTT, par ex. +0800.

Catégories et balises

Les categories de chaque message sont conçus pour contenir jusqu’à deux éléments, et le nombre d’éléments dans tags peut être compris entre zéro et l’infini. Par exemple:

1
2
3
4

---
categories: [Animal, Insect]
tags: [bee]
---

Informations sur l’auteur

Les informations sur l’auteur du message n’ont généralement pas besoin d’être renseignées dans le Front Matter , elles seront obtenues à partir des variables social.name et de la première entrée de social.links du fichier de configuration par défaut. Mais vous pouvez également le remplacer comme suit :

Ajout des informations sur l’auteur en _data/authors.yml (Si votre site internet ne possède pas ce fichier, n’hésitez pas à en créer un).

1
2
3
4

<author_id>:
  name: <full name>
  twitter: <twitter_of_author>
  url: <homepage_of_author>

Et puis utilisez author pour spécifier une seule entrée ou authors pour spécifier plusieurs entrées :

1
2
3
4
5

---
author: <author_id>                     # for single entry
# or
authors: [<author1_id>, <author2_id>]   # for multiple entries
---

Cela dit, la clé author peut également identifier plusieurs entrées.

L’avantage de lire les informations sur l’auteur du fichier _data/authors.yml est que la page aura la balise méta twitter:creator, qui enrichit le Twitter Cards et est bonne pour le référencement.

Description du poste

Par défaut, les premiers mots du post sont utilisés sur la page d’accueil, dans la section Further Reading et dans le flux RSS. Si vous ne souhaitez pas utiliser cette description générée automatiquement, définissez description dans le Front Matter :

1
2
3

---
description: Short summary of the post.
---

De plus, le texte description sera également affiché sous le titre du message sur la page du message.

Table des matières

Par défaut, la table des matières (TOC) est affichée dans le panneau droit du post. Pour la désactiver globalement, définissez toc: false dans _config.yml. Pour la désactiver uniquement pour un post, ajoutez ceci dans son Front Matter :

1
2
3

---
toc: false
---

Commentaires

Le paramètre global des commentaires est défini par l’option comments.provider dans le fichier _config.yml. Une fois qu’un système de commentaires est sélectionné pour cette variable, les commentaires seront activés pour toutes les publications.

Si vous souhaitez fermer le commentaire d’une publication spécifique, ajoutez ce qui suit au Front Matter de la publication :

1
2
3

---
comments: false
---

Médias

Nous faisons référence aux images, à l’audio et à la vidéo comme ressources multimédias dans Chirpy.

Préfixe d’URL

De temps en temps, nous devons définir des préfixes d’URL en double pour plusieurs ressources dans une publication, ce qui est une tâche ennuyeuse que vous pouvez éviter en définissant deux paramètres.

  • Si vous utilisez un CDN pour héberger des fichiers multimédias, vous pouvez spécifier le cdn dans _config.yml. Les URL des ressources multimédias pour l’avatar du site et les publications sont ensuite préfixées par le nom de domaine CDN.

    1

    cdn: https://cdn.com

  • Pour spécifier le préfixe du chemin de ressource pour la plage de publications/pages actuelle, définissez media_subpath dans le Front Matter de la publication :

    1
2
3

    ---
media_subpath: /path/to/media/
---

Les options site.cdn et page.media_subpath peuvent être utilisées individuellement ou en combinaison pour composer de manière flexible l’URL finale de la ressource : [site.cdn/][page.media_subpath/]file.ext

Images

Légende

Ajoutez de l’italique à la ligne suivante d’une image, elle deviendra alors la légende et apparaîtra en bas de l’image :

1
2

![img-description](/path/to/image)
_Image Caption_

Taille

Pour éviter que la présentation du contenu de la page ne change lorsque l’image est chargée, nous devons définir la largeur et la hauteur de chaque image.

1

![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" }

Pour un SVG, vous devez au moins spécifier sa width, sinon il ne sera pas rendu.

À partir de Chirpy v5.0.0, height et width prennent en charge les abréviations (height → h, width → w). L’exemple suivant a le même effet que celui ci-dessus :

1

![Desktop View](/assets/img/sample/mockup.png){: w="700" h="400" }

Position

Par défaut, l’image est centrée, mais vous pouvez spécifier la position en utilisant l’une des classes normal, left et right.

Une fois la position spécifiée, la légende de l’image ne doit pas être ajoutée.

  • Position normale

    L’image sera alignée à gauche dans l’exemple ci-dessous :

    1

    ![Desktop View](/assets/img/sample/mockup.png){: .normal }

  • Flottez vers la gauche

    1

    ![Desktop View](/assets/img/sample/mockup.png){: .left }

  • Flottez vers la droite

    1

    ![Desktop View](/assets/img/sample/mockup.png){: .right }

Mode sombre/clair

Vous pouvez faire en sorte que les images suivent les préférences de thème en mode sombre/clair. Cela nécessite de préparer deux images, une pour le mode sombre et une pour le mode clair, puis de leur attribuer une classe spécifique (dark ou light) :

1
2

![Light mode only](/path/to/light-mode.png){: .light }
![Dark mode only](/path/to/dark-mode.png){: .dark }

Ombre

Les captures d’écran de la fenêtre du programme peuvent être considérées comme montrant l’effet d’ombre :

1

![Desktop View](/assets/img/sample/mockup.png){: .shadow }

Image d’aperçu

Si vous souhaitez ajouter une image en haut de la publication, veuillez fournir une image avec une résolution de 1200 x 630. Veuillez noter que si le rapport hauteur/largeur de l’image n’atteint pas 1.91 : 1, l’image sera redimensionnée et recadrée.

Connaissant ces prérequis, vous pouvez commencer à définir l’attribut de l’image :

1
2
3
4
5

---
image:
  path: /path/to/image
  alt: image alternative text
---

Notez que le media_subpath peut également être transmis à l’image d’aperçu, c’est-à-dire que lorsqu’il a été défini, l’attribut path n’a besoin que du nom du fichier image.

Pour une utilisation simple, vous pouvez également simplement utiliser image pour définir le chemin.

1
2
3

---
image: /path/to/image
---

LQIP

Pour les images d’aperçu :

1
2
3
4

---
image:
  lqip: /path/to/lqip-file # or base64 URI
---

Vous pouvez observer LQIP dans l’image d’aperçu du message "Text and Typography".

Pour les images normales :

1

![Image description](/path/to/image){: lqip="/path/to/lqip-file" }

Plateformes de médias sociaux

Vous pouvez intégrer de la vidéo/audio à partir de plateformes de réseaux sociaux avec la syntaxe suivante :

1

{% include embed/{Platform}.html id='{ID}' %}

Où Platform est la minuscule du nom de la plateforme et ID est l’identifiant de la vidéo.

Le tableau suivant montre comment obtenir les deux paramètres dont nous avons besoin dans une URL vidéo/audio donnée, et vous pouvez également connaître les plates-formes vidéo actuellement prises en charge.

URL de la vidéoPlate-formeIDENTIFIANT
https://www.youtube.com/watch?v=H-B46URT4mgyoutubeH-B46URT4mg
https://www.twitch.tv/videos/1634779211twitch1634779211
https://www.bilibili.com/video/BV1Q44y1B7WfbilibiliBV1Q44y1B7Wf
https://www.open.spotify.com/track/3OuMIIFP5TxM8tLXMWYPGVspotify3OuMIIFP5TxM8tLXMWYPGV

Spotify prend en charge certains paramètres supplémentaires :

  • compact - pour afficher le lecteur compact à la place (ex. {% include embed/spotify.html id='3OuMIIFP5TxM8tLXMWYPGV' compact=1 %}) ;
  • dark - pour forcer le thème sombre (ex. {% include embed/spotify.html id='3OuMIIFP5TxM8tLXMWYPGV' dark=1 %}).

Fichiers vidéo

Si vous souhaitez intégrer directement un fichier vidéo, utilisez la syntaxe suivante :

1

{% include embed/video.html src='{URL}' %}

Où URL est une URL vers un fichier vidéo, par ex. /path/to/sample/video.mp4.

Vous pouvez également spécifier des attributs supplémentaires pour le fichier vidéo intégré. Voici une liste complète des attributs autorisés.

  • poster='/path/to/poster.png' — image d’affiche pour une vidéo qui s’affiche pendant le téléchargement de la vidéo
  • title='Text' — titre d’une vidéo qui apparaît sous la vidéo et ressemble à celui des images
  • autoplay=true — la lecture de la vidéo commence automatiquement dès que possible
  • loop=true — revient automatiquement au début une fois la fin de la vidéo atteinte
  • muted=true — le son sera initialement réduit au silence
  • types — spécifiez les extensions de formats vidéo supplémentaires séparées par |. Assurez-vous que ces fichiers existent dans le même répertoire que votre fichier vidéo principal.

Prenons un exemple utilisant tout ce qui précède :

1
2
3
4
5
6
7
8
9
10

{%
  include embed/video.html
  src='/path/to/video.mp4'
  types='ogg|mov'
  poster='poster.png'
  title='Demo video'
  autoplay=true
  loop=true
  muted=true
%}

Fichiers audio

Si vous souhaitez intégrer directement un fichier audio, utilisez la syntaxe suivante :

1

{% include embed/audio.html src='{URL}' %}

Où URL est une URL vers un fichier audio, par ex. /path/to/audio.mp3.

Vous pouvez également spécifier des attributs supplémentaires pour le fichier audio intégré. Voici une liste complète des attributs autorisés.

  • title='Text' — titre d’un audio qui apparaît sous l’audio et ressemble à celui des images
  • types — spécifiez les extensions de formats audio supplémentaires séparées par |. Assurez-vous que ces fichiers existent dans le même répertoire que votre fichier audio principal.

Prenons un exemple utilisant tout ce qui précède :

1
2
3
4
5
6

{%
  include embed/audio.html
  src='/path/to/audio.mp3'
  types='ogg|wav|aac'
  title='Demo audio'
%}

Messages épinglés

Vous pouvez épingler une ou plusieurs publications en haut de la page d’accueil, et les publications corrigées sont triées dans l’ordre inverse en fonction de leur date de publication. Activer par :

1
2
3

---
pin: true
---

Invites

Il existe plusieurs types d’invites : tip, info, warning et danger. Ils peuvent être générés en ajoutant la classe prompt-{type} au blockquote. Par exemple, définissez une invite de type info comme suit :

1
2

> Example line for prompt.
{: .prompt-info }

Syntaxe

Code en ligne

1

`inline code part`

Point culminant du chemin de fichier

1

`/path/to/a/file.extend`{: .filepath}

Bloc de code

Les symboles Markdown ``` peuvent facilement créer un bloc de code comme suit :

1
2
3

```
Il s'agit d'un extrait de code en texte brut.
```

Spécification de la langue

En utilisant ```{language}, vous obtiendrez un bloc de code avec une coloration syntaxique :

1
2
3

```yaml
clé : valeur
```

Le tag Jekyll {% highlight %} n’est pas compatible avec ce thème.

Numéro de ligne

Par défaut, toutes les langues sauf plaintext, console et terminal afficheront les numéros de ligne. Lorsque vous souhaitez masquer le numéro de ligne d’un bloc de code, ajoutez-y la classe nolineno :

1
2
3
4

```shell
echo 'Plus de numéros de ligne !'
```
{: .nolineno }

Spécification du nom de fichier

Vous avez peut-être remarqué que le langage du code sera affiché en haut du bloc de code. Si vous souhaitez le remplacer par le nom du fichier, vous pouvez ajouter l’attribut file pour obtenir cela :

1
2
3
4

```shell
# contenu
```
{: file="path/to/file" }

Codes liquides

Si vous souhaitez afficher l’extrait Liquide, entourez le code liquide entre {% raw %} et {% endraw %} :

1
2
3
4
5
6
7

{% raw %}
```liquid
{% if product.title contains 'Pack' %}
  Le titre de ce produit contient le mot Pack.
{% endif %}
```
{% endraw %}

Ou en ajoutant render_with_liquid: false (nécessite Jekyll 4.0 ou supérieur) au bloc YAML de la publication.

Mathématiques

Nous utilisons [MathJax][mathjax] pour générer des mathématiques. Pour des raisons de performances du site Web, la fonctionnalité mathématique ne sera pas chargée par défaut. Mais il peut être activé par :

[mathjax] : https://www.mathjax.org/

1
2
3

---
math: true
---

Après avoir activé la fonctionnalité mathématique, vous pouvez ajouter des équations mathématiques avec la syntaxe suivante :

  • Le bloc mathématique doit être ajouté avec $$ math $$ avec des lignes vides obligatoires avant et après $$
    • Insérer la numérotation de l’équation doit être ajouté avec $$\begin{equation} math \end{equation}$$
    • La numérotation des équations de référence doit être effectuée avec \label{eq:label_name} dans le bloc d’équation et \eqref{eq:label_name} en ligne avec le texte (voir exemple ci-dessous)
  • Les calculs en ligne (en lignes) doivent être ajoutés avec $$ math $$ sans aucune ligne vide avant ou après $$
  • Les mathématiques en ligne (dans les listes) doivent être ajoutées avec \$$ math $$
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!-- Block math, keep all blank lines -->

$$
LaTeX_math_expression
$$

<!-- Equation numbering, keep all blank lines  -->

$$
\begin{equation}
  LaTeX_math_expression
  \label{eq:label_name}
\end{equation}
$$

Can be referenced as \eqref{eq:label_name}.

<!-- Inline math in lines, NO blank lines -->

"Lorem ipsum dolor sit amet, $$ LaTeX_math_expression $$ consectetur adipiscing elit."

<!-- Inline math in lists, escape the first `$` -->

1. \$$ LaTeX_math_expression $$
2. \$$ LaTeX_math_expression $$
3. \$$ LaTeX_math_expression $$

À partir de v7.0.0, les options de configuration pour MathJax ont été déplacées vers le fichier assets/js/data/mathjax.js, et vous pouvez modifier les options selon vos besoins, par exemple en ajoutant des extensions. Si vous créez le site via chirpy-starter, copiez ce fichier depuis le répertoire d’installation de la gem (vérifiez avec bundle info --path jekyll-theme-chirpy) dans le même répertoire de votre dépôt.

Sirène

Mermaid est un excellent outil de génération de diagrammes. Pour l’activer sur votre publication, ajoutez ce qui suit au bloc YAML :

1
2
3

---
mermaid: true
---

Ensuite, vous pouvez l’utiliser comme d’autres langages de démarque : entourez le code graphique avec ```mermaid and ```.

Apprendre encore plus

Pour plus d’informations sur les publications Jekyll, visitez le Jekyll Docs: Posts.

Blogging, Tutorial
writing
This post is licensed under CC BY 4.0 by the author.