Firefly

Guide d'utilisation de Firefly

Sat, 09 May 2026 00:00:00 GMT

Ce modèle de blog est construit avec Astro. Pour tout ce qui n’est pas mentionné dans ce guide, vous pouvez trouver des réponses dans la documentation Astro.

Front-matter d’un article

1
---
2
title: Mon premier article de blog
3
published: 2023-09-09
4
description: Ceci est mon premier article sur mon nouveau blog Astro.
5
image: ./cover.jpg
6
tags: [Frontend, Développement]
7
category: Développement Frontend
8
draft: false
9
---

Propriété	Description
`title`	Titre de l’article.
`published`	Date de publication de l’article.
`updated`	Date de mise à jour de l’article. Si non définie, la date de publication sera utilisée par défaut.
`pinned`	Permet d’épingler l’article en haut de la liste des articles.
`description`	Courte description de l’article. Affichée sur la page d’accueil.
`image`	Chemin de l’image de couverture de l’article. 1. Commençant par `http://` ou `https://` : image en ligne 2. Commençant par `/` : image dans le répertoire `public` 3. Sans préfixe : chemin relatif au fichier markdown
`tags`	Tags de l’article.
`category`	Catégorie de l’article.
`lang`	Code de langue de l’article (ex. `fr`). À définir uniquement si la langue de l’article diffère de la langue par défaut du site.
`licenseName`	Nom de la licence du contenu de l’article.
`licenseUrl`	Lien vers la licence du contenu de l’article.
`author`	Auteur de l’article.
`sourceLink`	Lien source ou référence du contenu de l’article.
`draft`	Si cet article est encore un brouillon, il ne sera pas affiché.
`comment`	Activer ou non les commentaires pour cet article. `true` par défaut.
`slug`	Chemin URL personnalisé de l’article. Si non défini, le nom de fichier sera utilisé comme URL.
`password`	Mot de passe de l’article. Une fois défini, le contenu sera chiffré avec AES-256-GCM ; les visiteurs devront entrer le mot de passe pour le consulter.
`passwordHint`	Indice du mot de passe. Affiché au-dessus du champ de saisie pour aider les visiteurs à se souvenir du mot de passe. Facultatif.

Emplacement des fichiers d’articles

Vos fichiers d’articles doivent être placés dans le répertoire src/content/posts/. Vous pouvez également créer des sous-répertoires pour mieux organiser vos articles et ressources.

1
src/content/posts/
2
├── article-1.md
3
└── article-2/
4
    ├── cover.png
5
    └── index.md

Personnaliser l’URL d’un article (Slug)

Qu’est-ce qu’un Slug ?

Le slug est la partie personnalisée du chemin URL d’un article. Si vous ne définissez pas de slug, le système utilisera le nom de fichier comme URL.

Exemples d’utilisation du Slug

Exemple 1 : utiliser le nom de fichier comme URL

1
---
2
title: Mon premier article de blog
3
published: 2023-09-09
4
---

Fichier : src/content/posts/my-first-blog-post.md

URL : /posts/my-first-blog-post

Exemple 2 : Slug personnalisé

1
---
2
title: Mon premier article de blog
3
published: 2023-09-09
4
slug: hello-world
5
---

Fichier : src/content/posts/my-first-blog-post.md

URL : /posts/hello-world

Exemple 3 : Slug pour un fichier avec un nom en langue étrangère

1
---
2
title: Comment utiliser le thème de blog Firefly
3
published: 2023-09-09
4
slug: how-to-use-firefly-blog-theme
5
---

Fichier : src/content/posts/comment-utiliser-firefly.md

URL : /posts/how-to-use-firefly-blog-theme

Recommandations pour le Slug

Utiliser l’anglais et des tirets : mon-super-article plutôt que mon super article
Rester concis : éviter les slugs trop longs
Être descriptif : l’URL doit refléter le contenu de l’article
Éviter les caractères spéciaux : utiliser uniquement des lettres, chiffres et tirets
Rester cohérent : utiliser des modèles de nommage similaires dans tout le blog

Points d’attention

Une fois le slug défini et publié, il est déconseillé de le modifier pour ne pas affecter le SEO et les liens existants
Si plusieurs articles utilisent le même slug, le dernier remplacera le précédent
Le slug est automatiquement converti en minuscules

Tutoriel Markdown

Sat, 09 May 2026 00:00:00 GMT

Ceci est un exemple illustrant comment écrire un fichier Markdown. Ce document rassemble la syntaxe de base et les extensions courantes (GFM).

Éléments de bloc
Éléments en ligne
- Liens
- Emphase
- Code en ligne
- Images
- Texte barré
Divers
- Lien automatique
- Échappement par antislash
HTML en ligne

Éléments de bloc

Paragraphes et sauts de ligne

Paragraphe

Balise HTML : <p>

Séparez les paragraphes par une ou plusieurs lignes vides. (Une ligne ne contenant que des espaces ou des tabulations est également considérée comme vide.)

Code :

1
This will be
2
inline.
3

4
This is second paragraph.

Aperçu :

This will be inline.

This is second paragraph.

Saut de ligne

Balise HTML : <br />

Ajoutez deux espaces ou plus en fin de ligne pour produire un saut de ligne.

Code :

1
This will be not
2
inline.

Aperçu :

This will be not
inline.

Titres

Markdown supporte deux styles de titres : Setext et atx.

Setext

Balises HTML : <h1>, <h2>

Utilisez des signes égal (=) pour <h1> et des tirets (-) pour <h2>, en nombre quelconque, en guise de « soulignement ».

Code :

1
This is an H1
2
=============
3
This is an H2
4
-------------

Aperçu :

This is an H1

This is an H2

atx

Balises HTML : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Placez 1 à 6 dièses (#) en début de ligne pour correspondre respectivement à <h1> jusqu’à <h6>.

Code :

1
# This is an H1
2
## This is an H2
3
###### This is an H6

Aperçu :

This is an H1

This is an H2

This is an H6

Optionnel : vous pouvez « fermer » un titre atx en fin de ligne. Le nombre de dièses de fermeture n’a pas besoin de correspondre à celui d’ouverture.

Code :

1
# This is an H1 #
2
## This is an H2 ##
3
### This is an H3 ######

Aperçu :

This is an H1

This is an H2

This is an H3

Citations

Balise HTML : <blockquote>

Markdown utilise le caractère > à la manière des citations de courrier électronique. Pour un rendu optimal, ajoutez manuellement un retour à la ligne et faites précéder chaque ligne d’un >.

Code :

1
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
2
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
3
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
4
>
5
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
6
> id sem consectetuer libero luctus adipiscing.

Aperçu :

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Markdown autorise la version « paresseuse » : dans un paragraphe avec retours à la ligne manuels, seule la première ligne doit être précédée d’un >.

Code :

1
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
2
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
3
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
4

5
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
6
id sem consectetuer libero luctus adipiscing.

Aperçu :

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Les citations peuvent être imbriquées (citation dans une citation) en augmentant le niveau de >.

Code :

1
> This is the first level of quoting.
2
>
3
> > This is nested blockquote.
4
>
5
> Back to the first level.

Aperçu :

This is the first level of quoting.
This is nested blockquote.
Back to the first level.

Une citation peut contenir d’autres éléments Markdown, notamment des titres, des listes et des blocs de code.

Code :

1
> ## This is a header.
2
>
3
> 1.   This is the first list item.
4
> 2.   This is the second list item.
5
>
6
> Here's some example code:
7
>
8
>     return shell_exec("echo $input | $markdown_script");

Aperçu :

This is a header.

This is the first list item.

This is the second list item.

Here’s some example code:
1
return shell_exec("echo $input | $markdown_script");

Listes

Markdown supporte les listes ordonnées (numérotées) et non ordonnées (à puces).

Liste non ordonnée

Balise HTML : <ul>

Les listes non ordonnées utilisent l’astérisque (*), le signe plus (+) ou le tiret (-).

Code :

1
*   Red
2
*   Green
3
*   Blue

Aperçu :

Red
Green
Blue

Équivalent à :

Code :

1
+   Red
2
+   Green
3
+   Blue

Ou :

Code :

1
-   Red
2
-   Green
3
-   Blue

Liste ordonnée

Balise HTML : <ol>

Les listes ordonnées utilisent des chiffres suivis d’un point :

Code :

1
1.  Bird
2
2.  McHale
3
3.  Parish

Aperçu :

Bird
McHale
Parish

Remarque : l’écriture suivante peut « déclencher accidentellement » une liste ordonnée :

Code :

1
1986. What a great season.

Aperçu :

What a great season.

Vous pouvez échapper le point avec un antislash (\) :

Code :

1
1986\. What a great season.

Aperçu :

1986. What a great season.

Contenu indenté dans les listes

Citations dans un élément de liste

Pour placer une citation dans un élément de liste, le symbole > doit être indenté :

Code :

1
*   A list item with a blockquote:
2

3
    > This is a blockquote
4
    > inside a list item.

Aperçu :

A list item with a blockquote:

This is a blockquote inside a list item.

Blocs de code dans un élément de liste

Pour placer un bloc de code dans un élément de liste, il faut une double indentation — 8 espaces ou deux tabulations :

Code :

1
*   A list item with a code block:
2

3
        <code goes here>

Aperçu :

A list item with a code block:
```
1
<code goes here>
```

Listes imbriquées

Code :

1
* A
2
  * A1
3
  * A2
4
* B
5
* C

Aperçu :

A
- A1
- A2
B
C

Blocs de code

Balise HTML : <pre>

Indentez chaque ligne du bloc de code d’au moins 4 espaces ou 1 tabulation.

Code :

1
This is a normal paragraph:
2

3
    This is a code block.

Aperçu :

This is a normal paragraph:

1
This is a code block.

Un bloc de code continue jusqu’à la première ligne non indentée (ou la fin du document).

À l’intérieur d’un bloc de code, l’esperluette (&) et les chevrons (< >) sont automatiquement convertis en entités HTML.

Code :

1
    <div class="footer">
2
        &copy; 2004 Foo Corporation
3
    </div>

Aperçu :

1
<div class="footer">
2
    &copy; 2004 Foo Corporation
3
</div>

Les « Blocs de code clôturés » et la « Coloration syntaxique » présentés ci-dessous sont des syntaxes étendues que vous pouvez également utiliser pour écrire des blocs de code.

Blocs de code clôturés

Entourez le code de backticks appairés (comme indiqué ci-dessous) : l’indentation de quatre espaces n’est alors plus nécessaire.

Code :

1
Here's an example:
2

3
```
4
function test() {
5
  console.log("notice the blank line before this function?");
6
}
7
```

Aperçu :

Here’s an example:

1
function test() {
2
  console.log("notice the blank line before this function?");
3
}

Coloration syntaxique

Ajoutez un identifiant de langage optionnel après les backticks d’ouverture pour activer la coloration syntaxique (voir la liste des langages supportés).

Code :

1
```ruby
2
require 'redcarpet'
3
markdown = Redcarpet.new("Hello World!")
4
puts markdown.to_html
5
```

Aperçu :

1
require 'redcarpet'
2
markdown = Redcarpet.new("Hello World!")
3
puts markdown.to_html

Ligne horizontale

Balise HTML : <hr /> Placez trois tirets (-), astérisques (*) ou underscores (_) ou plus sur une même ligne. Des espaces entre les symboles sont autorisés.

Code :

1
* * *
2
***
3
*****
4
- - -
5
---------------------------------------
6
___

Aperçu :

Tableaux

Balise HTML : <table>

Il s’agit d’une syntaxe étendue.

Séparez les colonnes avec des barres verticales (|) et l’en-tête avec des tirets (-). Utilisez les deux-points (:) pour spécifier l’alignement.

Les barres verticales (|) encadrantes et l’alignement sont optionnels. Pour la séparation d’en-tête, chaque colonne nécessite au moins 3 tirets.

Code :

1
| Left | Center | Right |
2
|:-----|:------:|------:|
3
|aaa   |bbb     |ccc    |
4
|ddd   |eee     |fff    |
5

6
 A | B
7
---|---
8
123|456
9

10

11
A |B
12
--|--
13
12|45

Aperçu :

Left	Center	Right
aaa	bbb	ccc
ddd	eee	fff

A	B
123	456

A	B
12	45

Éléments en ligne

Liens

Balise HTML : <a>

Markdown supporte deux styles de liens : le lien en ligne et le lien de référence.

Lien en ligne

Format du lien en ligne : [texte](URL "titre")

Le titre est optionnel.

Code :

1
This is [an example](http://example.com/ "Title") inline link.
2

3
[This link](http://example.net/) has no title attribute.

Aperçu :

This is an example inline link.

This link has no title attribute.

Pour référencer une ressource locale sur le même site, vous pouvez utiliser un chemin relatif :

Code :

1
See my [About](/about/) page for details.

Aperçu :

See my About page for details.

Lien de référence

Vous pouvez prédéfinir des références de liens. Format de définition : [id]: URL "titre"

Le titre est également optionnel. Pour utiliser la référence : [texte][id]

Code :

1
[id]: http://example.com/  "Optional Title Here"
2
This is [an example][id] reference-style link.

Aperçu :

This is an example reference-style link.

Remarques :

Les crochets contiennent l’identifiant du lien (insensible à la casse, avec une indentation possible de trois espaces maximum) ;
suivi de deux-points ;
puis d’un ou plusieurs espaces (ou tabulations) ;
puis de l’URL du lien ;
l’URL peut optionnellement être entourée de chevrons ;
suivi optionnellement d’un attribut titre, entouré de guillemets ou de parenthèses.

Les trois définitions suivantes sont équivalentes :

Code :

1
[foo]: http://example.com/  "Optional Title Here"
2
[foo]: http://example.com/  'Optional Title Here'
3
[foo]: http://example.com/  (Optional Title Here)
4
[foo]: <http://example.com/>  "Optional Title Here"

Si vous utilisez des crochets vides, le texte du lien lui-même sera utilisé comme nom.

Code :

1
[Google]: http://google.com/
2
[Google][]

Aperçu :

Google

Emphase

Balises HTML : <em>, <strong>

Markdown utilise l’astérisque (*) ou l’underscore (_) pour l’emphase. Un délimiteur correspond à <em> ; deux délimiteurs correspondent à <strong>.

Code :

1
*single asterisks*
2

3
_single underscores_
4

5
**double asterisks**
6

7
__double underscores__

Aperçu :

single asterisks

single underscores

double asterisks

double underscores

Cependant, si les délimiteurs sont entourés d’espaces, ils sont traités comme des caractères ordinaires et non comme de la syntaxe d’emphase.

Vous pouvez utiliser l’antislash pour les échapper :

Code :

1
\*this text is surrounded by literal asterisks\*

Aperçu :

*this text is surrounded by literal asterisks*

Code en ligne

Balise HTML : <code>

Entourez le code de backticks (`).

Code :

1
Use the `printf()` function.

Aperçu :

Use the printf() function.

Si le code en ligne doit contenir un backtick, utilisez des backticks multiples comme délimiteurs :

Code :

1
``There is a literal backtick (`) here.``

Aperçu :

There is a literal backtick (`) here.

Les délimiteurs d’un code en ligne peuvent inclure des espaces de chaque côté (un en début, un en fin), ce qui facilite l’insertion d’un backtick en début ou en fin de code :

Code :

1
A single backtick in a code span: `` ` ``
2

3
A backtick-delimited string in a code span: `` `foo` ``

Aperçu :

A single backtick in a code span: `

A backtick-delimited string in a code span: `foo`

Images

Balise HTML : <img />

La syntaxe des images en Markdown est similaire à celle des liens, et supporte les formes en ligne et de référence.

Image en ligne

Syntaxe de l’image en ligne : ![texte alternatif](URL "titre")

Le titre est optionnel.

Code :

1
![Alt text](/path/to/img.jpg)
2

3
![Alt text](/path/to/img.jpg "Optional title")

Aperçu :

Alt text

Remarques :

Un point d’exclamation ! ;
suivi de crochets contenant le texte alternatif de l’image ;
suivi de parenthèses contenant l’URL ou le chemin de l’image, ainsi qu’un titre optionnel (entre guillemets).

Image de référence

Syntaxe de l’image de référence : ![texte alternatif][id]

Code :

1
[img id]: https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp  "Optional title attribute"
2
![Alt text][img id]

Aperçu :

Alt text

Texte barré

Balise HTML : <del>

Il s’agit d’une syntaxe étendue.

GFM ajoute la syntaxe du texte barré.

Code :

1
~~Mistaken text.~~

Aperçu :

Mistaken text.

Divers

Lien automatique

Markdown supporte une syntaxe raccourcie pour créer des « liens automatiques » (URL et adresses e-mail) : il suffit de les entourer de chevrons.

Code :

1
<http://example.com/>
2

3
<address@example.com>

Aperçu :

http://example.com/

address@example.com

GFM reconnaît automatiquement les URL standard et les convertit en liens.

Code :

1
https://github.com/emn178/markdown

Aperçu :

https://github.com/emn178/markdown

Échappement par antislash

Markdown vous permet d’utiliser l’antislash pour échapper les caractères spéciaux utilisés dans la syntaxe Markdown, afin qu’ils s’affichent littéralement.

Code :

1
\*literal asterisks\*

Aperçu :

*literal asterisks*

Les caractères suivants peuvent être échappés par un antislash pour être affichés littéralement :

Code:

1
\   backslash
2
`   backtick
3
*   asterisk
4
_   underscore
5
{}  curly braces
6
[]  square brackets
7
()  parentheses
8
#   hash mark
9
+   plus sign
10
-   minus sign (hyphen)
11
.   dot
12
!   exclamation mark

HTML en ligne

Pour les balises non couvertes par la syntaxe Markdown, utilisez directement le HTML natif. Aucune déclaration de transition de Markdown vers HTML n’est nécessaire : écrivez simplement les balises.

Code :

1
This is a regular paragraph.
2

3
<table>
4
    <tr>
5
        <td>Foo</td>
6
    </tr>
7
</table>
8

9
This is another regular paragraph.

Aperçu :

This is a regular paragraph.

Foo

This is another regular paragraph.

Remarque : la syntaxe Markdown n’est pas traitée à l’intérieur des balises HTML de bloc.

Contrairement aux balises de bloc, la syntaxe Markdown est traitée à l’intérieur des balises de niveau en ligne.

Code :

1
<span>**Work**</span>
2

3
<div>
4
    **No Work**
5
</div>

Aperçu :

Work

**No Work**

Firefly - Un thème de blog Astro élégant et moderne

Tue, 07 May 2024 00:00:00 GMT

🌟 Présentation du projet

Firefly est un thème de blog personnel élégant, moderne et basé sur le framework Astro et le template Fuwari, conçu spécialement pour les passionnés de technologie et les créateurs de contenu. Ce thème intègre une stack Web moderne, offre de nombreux modules fonctionnels et une interface hautement personnalisable, vous permettant de créer facilement un blog personnel professionnel et attrayant.

🖥️ Aperçu en ligne : Firefly - Demo site

🏠 Mon blog : https://blog.cuteleaf.cn

📝 Documentation Firefly : https://docs-firefly.cuteleaf.cn

⭐ Code source Firefly : https://github.com/CuteLeaf/Firefly

⭐ Code source Fuwari : https://github.com/saicaca/fuwari

CuteLeaf

Firefly

Waiting for api.github.com...

Waiting for api.github.com...

00K

Waiting...

Firefly

🚀 Architecture technique

Génération de site statique : basé sur Astro, offrant une vitesse de chargement extrêmement rapide et une excellente optimisation SEO
Support TypeScript : typage complet pour une meilleure expérience de développement et une meilleure qualité de code
Design responsive : construit avec Tailwind CSS, parfaitement adapté aux postes de travail et aux appareils mobiles
Développement par composants : compatible avec les composants Astro et Svelte, flexible et extensible

📖 Guide de configuration

📚 Documentation de configuration détaillée : consultez la documentation Firefly pour obtenir le guide de configuration complet

MDX 格式文章示例

Thu, 14 May 2026 00:00:00 GMT

Tip

Firefly 支持 MDX 和 Markdown 两种类型的文章，你可以在文章中混合使用两种格式，如果没有特别复杂内容和需求，推荐使用 Markdown 格式就够了。

Markdown 和 MDX 的区别

Markdown (MD) 是一种轻量级标记语言，允许用户使用纯文本格式编写文档，然后将其转换为格式化的HTML。它因其简洁易用的语法而广受欢迎，特别适合编写文档和博客文章。
MDX 是一种扩展了 Markdown 语法的格式，允许在 Markdown 文档中无缝地插入 JSX 代码。通过 MDX，用户可以在文档中嵌入 React 组件，从而实现更丰富的交互性和动态性。

特性	Markdown	MDX
基础语法	支持 (CommonMark)	支持 (CommonMark)
HTML 标签	支持	支持 (作为 JSX)
组件导入	不支持	支持 (import)
动态数据	不支持	支持 (JS 表达式)
样式定制	有限 (class/style)	灵活 (className/CSS-in-JS)

使用组件

这是一个图标组件：

1
import { Icon } from 'astro-icon/components'
2

3
<div class="flex items-center gap-2 my-4">
4
  <Icon name="fa7-solid:rocket" class="text-4xl text-red-500" />
5
  <span>火箭发射！</span>
6
</div>

火箭发射！

使用 JSX

你也可以直接写 HTML/JSX：

1
<div className="p-4 bg-blue-100 dark:bg-blue-900 rounded-lg my-4">
2
  这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。
3
</div>

这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。

简单的变量导出

1
export const year = new Date().getFullYear()
2

3
今年是 {year} 年。

今年是 2026 年。

更多信息，请查看 MDX 文档

Chiffrement d'article Firefly

Tue, 12 May 2026 00:00:00 GMT

Ceci est un exemple d'article protégé par mot de passe, illustrant la fonction de chiffrement.

Diagrammes Mermaid dans Markdown

Tue, 12 May 2026 00:00:00 GMT

Guide complet des diagrammes Mermaid dans Markdown

Cet article montre comment utiliser Mermaid dans des documents Markdown pour créer différents types de diagrammes complexes, notamment des diagrammes de flux, des diagrammes de séquence, des diagrammes de Gantt, des diagrammes de classes et des diagrammes d’état.

Exemples de diagrammes de flux

Les diagrammes de flux sont très adaptés pour représenter des processus ou des étapes algorithmiques.

graph TD A[Début] --> B{Vérification} B -->|Oui| C[Étape 1] B -->|Non| D[Étape 2] C --> E[Sous-processus] D --> E subgraph E [Détails] E1[Sous-étape 1] --> E2[Sous-étape 2] E2 --> E3[Sous-étape 3] end E --> F{Décision suivante} F -->|Option 1| G[Résultat 1] F -->|Option 2| H[Résultat 2] F -->|Option 3| I[Résultat 3] G --> J[Fin] H --> J I --> J

Exemples de diagrammes de séquence

Les diagrammes de séquence montrent les interactions entre objets au fil du temps.

sequenceDiagram participant User as Utilisateur participant WebApp as Application Web participant Server as Serveur participant Database as Base de données User->>WebApp: Soumettre la demande de connexion WebApp->>Server: Envoyer la requête d'authentification Server->>Database: Interroger les identifiants utilisateur Database-->>Server: Retourner les données utilisateur Server-->>WebApp: Retourner le résultat d'authentification alt Authentification réussie WebApp->>User: Afficher la page d'accueil WebApp->>Server: Demander les données utilisateur Server->>Database: Récupérer les préférences utilisateur Database-->>Server: Retourner les préférences Server-->>WebApp: Retourner les données utilisateur WebApp->>User: Charger l'interface personnalisée else Authentification échouée WebApp->>User: Afficher le message d'erreur WebApp->>User: Inviter à ressaisir les informations end

Exemples de diagrammes de Gantt

Les diagrammes de Gantt sont très adaptés pour afficher la progression et le calendrier d’un projet.

gantt title Calendrier du projet de développement web dateFormat YYYY-MM-DD axisFormat %m/%d section Phase de conception Analyse des besoins :a1, 2023-10-01, 7d Conception UI :a2, after a1, 10d Création du prototype :a3, after a2, 5d section Phase de développement Développement frontend :b1, 2023-10-20, 15d Développement backend :b2, after a2, 18d Conception de la base de données :b3, after a1, 12d section Phase de test Tests unitaires :c1, after b1, 8d Tests d'intégration :c2, after b2, 10d Tests d'acceptation utilisateur :c3, after c2, 7d section Déploiement Déploiement en production :d1, after c3, 3d Publication :milestone, after d1, 0d

Exemples de diagrammes de classes

Les diagrammes de classes montrent la structure statique du système, y compris les classes, les attributs, les méthodes et leurs relations.

classDiagram class User { +String username +String password +String email +Boolean active +login() +logout() +updateProfile() } class Article { +String title +String content +Date publishDate +Boolean published +publish() +edit() +delete() } class Comment { +String content +Date commentDate +addComment() +deleteComment() } class Category { +String name +String description +addArticle() +removeArticle() } User "1" -- "*" Article : rédige User "1" -- "*" Comment : publie Article "1" -- "*" Comment : possède Article "1" -- "*" Category : appartient à

Exemples de diagrammes d’état

Les diagrammes d’état montrent la séquence d’états qu’un objet traverse au cours de son cycle de vie.

stateDiagram-v2 [*] --> Brouillon Brouillon --> EnRevision : Soumettre EnRevision --> Brouillon : Refuser EnRevision --> Approuvé : Approuver Approuvé --> Publié : Publier Publié --> Archivé : Archiver Publié --> Brouillon : Retirer state Publié { [*] --> Actif Actif --> Masqué : Masquer temporairement Masqué --> Actif : Restaurer Actif --> [*] Masqué --> [*] } Archivé --> [*]

Exemples de diagrammes en secteurs

Les diagrammes en secteurs sont très adaptés pour afficher des données proportionnelles et des pourcentages.

pie title Analyse des sources de trafic du site web "Moteurs de recherche" : 45.6 "Accès direct" : 30.1 "Réseaux sociaux" : 15.3 "Liens référents" : 6.4 "Autres sources" : 2.6

Résumé

Mermaid est un outil puissant pour créer différents types de diagrammes dans des documents Markdown. Cet article a montré comment utiliser les diagrammes de flux, de séquence, de Gantt, de classes, d’état et en secteurs. Ces diagrammes peuvent vous aider à exprimer plus clairement des concepts complexes, des processus et des structures de données.

Pour utiliser Mermaid, il suffit de spécifier le langage mermaid dans un bloc de code et de décrire le diagramme avec une syntaxe textuelle concise. Mermaid convertira automatiquement ces descriptions en visualisations élégantes.

Essayez d’utiliser des diagrammes Mermaid dans votre prochain article de blog technique ou documentation de projet — ils rendront votre contenu plus professionnel et plus facile à comprendre !

Le système de mise en page de Firefly expliqué

Sun, 10 May 2026 00:00:00 GMT

📖 Aperçu

Firefly propose un système de mise en page flexible qui vous permet de personnaliser la présentation visuelle de votre blog selon vos besoins en contenu et vos préférences personnelles. Le système de mise en page comprend principalement deux dimensions : la mise en page des barres latérales et la mise en page de la liste d’articles, qui se combinent pour définir la structure globale de la page.

Cet article présentera en détail les différents modes de mise en page de Firefly, leurs caractéristiques, leurs cas d’utilisation, ainsi que les effets des différentes combinaisons de mise en page.

Barre latérale gauche + mise en page liste

Barre latérale droite + mise en page grille

Barre latérale gauche + mise en page grille 3 colonnes

Double barre latérale + mise en page liste

Double barre latérale + mise en page grille

Double barre latérale + mise en page grille en cascade

I. Système de mise en page des barres latérales

La barre latérale est un élément important des pages de blog, utilisée pour afficher la navigation, les catégories, les tags, les statistiques et autres contenus auxiliaires. Firefly prend en charge deux modes de mise en page des barres latérales.

1.1 Mode barre latérale unique

Barre latérale gauche (position: “left”)

Mise en page barre latérale gauche

Barre latérale droite (position: “right”)

Mise en page barre latérale droite

Caractéristiques

La barre latérale est fixée d’un côté de la page
Meilleure expérience de lecture des articles, plus d’espace
Plus épuré, moins compact

Cas d’utilisation

Style de blog traditionnel
Blogs mettant l’accent sur la navigation et les catégories
Blogs personnels souhaitant mettre en valeur le profil utilisateur
Scénarios où le contenu est prioritaire et les informations auxiliaires secondaires

Tip

Vous pouvez configurer via showBothSidebarsOnPostPage si la double barre latérale doit s’afficher sur la page de détail d’un article.

Lorsque position est défini sur left ou right et que cette option est activée, la page de détail d’un article affichera la double barre latérale, tandis que la page d’accueil et les autres pages conserveront une barre latérale unique.

Utile lorsque vous souhaitez utiliser une seule barre latérale en général, mais afficher des composants comme la table des matières dans la barre latérale opposée sur la page de détail d’un article.

Exemple de configuration

src/config/sidebarConfig.ts

1
export const sidebarLayoutConfig: SidebarLayoutConfig = {
2
  enable: true,
3
  position: "left", // 左侧边栏
4
  showBothSidebarsOnPostPage: true, // 是否在文章详情页显示双侧边栏
5
};

1.2 Mode double barre latérale (position: “both”)

Caractéristiques

Barres latérales présentes simultanément à gauche et à droite
Zone de contenu principal au centre
Utilisation maximale de l’espace écran
Permet d’afficher davantage d’informations auxiliaires
Adapté aux écrans larges

Structure de mise en page

Double barre latérale + mise en page liste

Double barre latérale + mise en page grille

Cas d’utilisation

Navigation sur ordinateur de bureau grand écran
Blogs à haute densité d’information
Nécessite d’afficher un grand volume de contenu auxiliaire
Blogs techniques très spécialisés

Exemple de configuration

src/config/sidebarConfig.ts

1
export const sidebarLayoutConfig: SidebarLayoutConfig = {
2
  enable: true,
3
  position: "both", // 双侧边栏

II. Système de mise en page de la liste d’articles

La liste d’articles est le contenu central de la page d’accueil et de la page d’archives du blog. Firefly propose deux modes d’affichage et prend en charge plusieurs configurations de grille.

2.1 Mode liste (defaultMode: “list”)

Caractéristiques

Disposition verticale en colonne unique
Affiche l’image de couverture de l’article
Montre davantage d’extraits d’articles
Adapté à une lecture approfondie

Structure de mise en page liste

Mise en page mode liste

Avantages

✅ Fort impact visuel, les images de couverture attirent l’attention
✅ Permet d’afficher plus d’informations sur l’article (extraits, tags, etc.)
✅ Adapté aux blogs avec un contenu riche en images
✅ Adapté aux mobiles, une seule colonne plus facile à lire
✅ Compatible avec toutes les configurations de barres latérales (simple, double)

Exemple de configuration

src/config/siteConfig.ts

1
export const siteConfig: SiteConfig = {
2
  postListLayout: {
3
    defaultMode: "list", // 列表模式
4
    allowSwitch: true,   // 允许用户切换
5
  },
6
};

2.2 Mode grille (defaultMode: “grid”)

Caractéristiques

Nombre de colonnes adaptatif, ajusté automatiquement selon la largeur du navigateur
Mise en page compacte, haute densité d’information
Adapté à la navigation rapide

Grille adaptative

Le mode grille utilise la configuration columnWidth pour définir la largeur minimale des cartes (en px). Le navigateur calcule automatiquement le nombre de colonnes pouvant être contenues selon la largeur disponible du conteneur.

Mise en page grille

Exemple de configuration

src/config/siteConfig.ts

1
export const siteConfig: SiteConfig = {
2
  postListLayout: {
3
    defaultMode: "grid",
4
    allowSwitch: true,
5
    grid: {
6
      masonry: true,      // 开启瀑布流
7
      columnWidth: 320,   // 卡片最小宽度(px)，浏览器自动计算列数
8
    },
9
  },
10
};

2.3 Mise en page en cascade (Masonry)

Le mode grille de Firefly intègre une prise en charge intelligente de la mise en page en cascade, qui résout le problème des espaces vides causés par des hauteurs de cartes inégales dans les articles mélangeant images et texte.

Mise en page en cascade

Mise en page intelligente : place automatiquement les cartes dans la colonne la plus courte, maximisant l’utilisation de l’espace vertical.
Élimination des espaces vides : calcule précisément la position de chaque carte via un positionnement absolu, faisant coller les cartes à celles du dessus, éliminant ainsi les espaces vides verticaux.
Nombre de colonnes adaptatif : la mise en page en cascade calcule également dynamiquement le nombre de colonnes en fonction de columnWidth et de la largeur du conteneur, sans configuration fixe nécessaire.
Configuration flexible : vous pouvez activer ou désactiver librement cette fonctionnalité dans siteConfig.ts via l’option postListLayout.grid.masonry.

III. Guide des combinaisons de mise en page

Firefly vous permet de combiner librement les barres latérales et la mise en page de la liste d’articles. Voici la description des effets des différentes combinaisons.

Mode barre latérale	Mode liste d’articles	Recommandation	Cas d’utilisation
Barre latérale unique	Mode liste	⭐⭐⭐⭐⭐	Blogs photo, design, lifestyle, mettant l’accent sur les images et l’immersion
Barre latérale unique	Mode grille	⭐⭐⭐⭐⭐	Blogs techniques et de prise de notes, équilibre entre lecture et efficacité de recherche
Double barre latérale	Mode liste	⭐⭐⭐⭐⭐	Sites nécessitant d’afficher un grand volume d’informations dans les barres latérales
Double barre latérale	Mode grille	⭐⭐⭐⭐⭐	Style geek, recherche de la densité d’information maximale

IV. Comportement de la mise en page responsive

Le système de mise en page de Firefly possède une conception responsive intelligente qui s’ajuste automatiquement selon la taille de l’écran.

Pour garantir la meilleure expérience de lecture, le système ajuste automatiquement la mise en page lorsque l’écran se rétrécit :

Réduction automatique du nombre de colonnes de la grille : le nombre de colonnes du mode grille est déterminé automatiquement par columnWidth et la largeur du conteneur ; plus l’écran est étroit, moins il y a de colonnes.
Mode liste -> Mode grille : lorsque la largeur de l’écran est inférieure à 380px (appareils très petits), le mode liste bascule automatiquement en mode grille pour garantir la lisibilité du contenu des cartes.
Double barre latérale -> Barre latérale unique : lorsque la largeur de l’écran est inférieure à 1280px, une seule barre latérale est affichée selon la configuration tabletSidebar, l’autre est masquée, et la navigation par table des matières bascule vers une navigation flottante.

V. Questions fréquentes

Q1 : Comment ajuster le nombre de colonnes de la grille ?

R : Il suffit de configurer la largeur minimale des cartes via columnWidth. Plus la valeur est petite, plus il y a de colonnes pour une même largeur ; plus la valeur est grande, moins il y a de colonnes. Le navigateur calcule automatiquement le nombre de colonnes optimal selon la largeur disponible.

VI. Résumé

Le système de mise en page de Firefly vous offre une grande liberté, que vous pouvez mettre en œuvre via une configuration simple.

Nous vous recommandons d’essayer différentes combinaisons selon votre type de contenu et les préférences de dispositifs de vos lecteurs cibles, afin de trouver la forme de blog la plus adaptée à votre situation.

Liens utiles

📚 Documentation de configuration des barres latérales
📚 Documentation de configuration du site
🏠 Documentation officielle de Firefly
⭐ Firefly GitHub

Exemples de blocs de code Firefly

Sat, 09 May 2026 00:00:00 GMT

Ici, nous explorons comment utiliser Expressive Code pour présenter des blocs de code. Les exemples fournis sont basés sur la documentation officielle, que vous pouvez consulter pour plus de détails.

Code expressif

Coloration syntaxique

Coloration syntaxique standard

1
console.log('Ce code a la coloration syntaxique !')

Rendu des séquences d’échappement ANSI

TerminalAfficher plusAfficher moins

1
[1;4mStandard ANSI colors:[0m
2
- Dimmed:     [2;30m Black [2;31m Red [2;32m Green [2;33m Yellow [2;34m Blue [2;35m Magenta [2;36m Cyan [2;37m White [0m
3
- Foreground: [30m Black [31m Red [32m Green [33m Yellow [34m Blue [35m Magenta [36m Cyan [37m White [0m
4
- Background: [40m Black [41m Red [42m Green [43m Yellow [44m Blue [45m Magenta [46m Cyan [47m White [0m
5
- Reversed:   [7;30m Black [7;31m Red [7;32m Green [7;33m Yellow [7;34m Blue [7;35m Magenta [7;36m Cyan [7;37m White [0m
6

7
[1;4m8-bit colors (showing colors 160-171 as an example):[0m
8
- Dimmed:     [2;38;5;160m 160 [2;38;5;161m 161 [2;38;5;162m 162 [2;38;5;163m 163 [2;38;5;164m 164 [2;38;5;165m 165 [2;38;5;166m 166 [2;38;5;167m 167 [2;38;5;168m 168 [2;38;5;169m 169 [2;38;5;170m 170 [2;38;5;171m 171 [0m
9
- Foreground: [38;5;160m 160 [38;5;161m 161 [38;5;162m 162 [38;5;163m 163 [38;5;164m 164 [38;5;165m 165 [38;5;166m 166 [38;5;167m 167 [38;5;168m 168 [38;5;169m 169 [38;5;170m 170 [38;5;171m 171 [0m
10
- Background: [48;5;160m 160 [48;5;161m 161 [48;5;162m 162 [48;5;163m 163 [48;5;164m 164 [48;5;165m 165 [48;5;166m 166 [48;5;167m 167 [48;5;168m 168 [48;5;169m 169 [48;5;170m 170 [48;5;171m 171 [0m
11
- Reversed:   [7;38;5;160m 160 [7;38;5;161m 161 [7;38;5;162m 162 [7;38;5;163m 163 [7;38;5;164m 164 [7;38;5;165m 165 [7;38;5;166m 166 [7;38;5;167m 167 [7;38;5;168m 168 [7;38;5;169m 169 [7;38;5;170m 170 [7;38;5;171m 171 [0m
12

13
[1;4m24-bit colors (full RGB):[0m
14
- Dimmed:     [2;38;2;34;139;34m ForestGreen - RGB(34,139,34) [2;38;2;102;51;153m RebeccaPurple - RGB(102,51,153) [0m
15
- Foreground: [38;2;34;139;34m ForestGreen - RGB(34,139,34) [38;2;102;51;153m RebeccaPurple - RGB(102,51,153) [0m
16
- Background: [48;2;34;139;34m ForestGreen - RGB(34,139,34) [48;2;102;51;153m RebeccaPurple - RGB(102,51,153) [0m
17
- Reversed:   [7;38;2;34;139;34m ForestGreen - RGB(34,139,34) [7;38;2;102;51;153m RebeccaPurple - RGB(102,51,153) [0m
18

19
[1;4mFont styles:[0m
20
- Default
21
- [1mBold[0m
22
- [2mDimmed[0m
23
- [3mItalic[0m
24
- [4mUnderline[0m
25
- [7mReversed[0m
26
- [9mStrikethrough[0m

Afficher plusAfficher moins

Cadres éditeur et terminal

Cadre éditeur de code

my-test-file.js

1
console.log('Exemple d\'attribut de titre')

src/content/index.html

1
<div>Exemple de commentaire de nom de fichier</div>

Cadre terminal

Terminal

1
echo "Ce cadre terminal n'a pas de titre"

Exemple de terminal PowerShell

1
Write-Output "Celui-ci a un titre !"

Redéfinir le type de cadre

1
echo "Regardez, pas de cadre !"

PowerShell Profile.ps1

1
# Sans redéfinition, ce serait un cadre terminal
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

Marqueurs de texte et de ligne

Marquer des lignes entières et des plages de lignes

1
// Ligne 1 - ciblée par numéro de ligne
2
// Ligne 2
3
// Ligne 3
4
// Ligne 4 - ciblée par numéro de ligne
5
// Ligne 5
6
// Ligne 6
7
// Ligne 7 - ciblée par la plage "7-8"
8
// Ligne 8 - ciblée par la plage "7-8"

Choisir le type de marqueur de ligne (mark, ins, del)

line-markers.js

1
function demo() {
2
  console.log('Cette ligne est marquée comme supprimée')
3
  // Cette ligne et la suivante sont marquées comme insérées
4
  console.log('Deuxième ligne insérée')
5

6
  return 'Cette ligne utilise le marqueur neutre par défaut'
7
}

Ajouter des étiquettes aux marqueurs de ligne

labeled-line-markers.jsx

1
<button
2
  role="button"
3
  {...props}
4
  value={value}
5
  className={buttonClassName}
6
  disabled={disabled}
7
  active={active}
8
>
9
  {children &&
10
    !active &&
11
    (typeof children === 'string' ? <span>{children}</span> : children)}
12
</button>

Ajouter des étiquettes longues sur des lignes séparées

labeled-line-markers.jsxAfficher plusAfficher moins

1
<button
2
  role="button"
3
  {...props}
4

5
  value={value}
6
  className={buttonClassName}
7

8
  disabled={disabled}
9
  active={active}
10
>
11

12
  {children &&
13
    !active &&
14
    (typeof children === 'string' ? <span>{children}</span> : children)}
15
</button>

Afficher plusAfficher moins

Utiliser une syntaxe de type diff

1
Cette ligne sera marquée comme insérée
2
Cette ligne sera marquée comme supprimée
3
Ceci est une ligne normale

1
--- a/README.md
2
+++ b/README.md
3
@@ -1,3 +1,4 @@
4
+this is an actual diff file
5
-all contents will remain unmodified
6
 no whitespace will be removed either

Combiner coloration syntaxique et syntaxe diff

1
function thisIsJavaScript() {
2
  // Tout le bloc sera mis en évidence en JavaScript,
3
  // et nous pouvons toujours y ajouter des marqueurs diff !
4
  console.log('Ancien code à supprimer')
5
  console.log('Nouveau code brillant !')
6
}

Marquer du texte spécifique dans une ligne

1
function demo() {
2
  // Marquer n'importe quel texte donné dans la ligne
3
  return 'Supporte plusieurs correspondances du texte donné';
4
}

Expressions régulières

1
console.log('Les mots yes et yep seront marqués.')

Échapper les barres obliques

Terminal

1
echo "Test" > /home/test.txt

Choisir le type de marqueur en ligne (mark, ins, del)

1
function demo() {
2
  console.log('Voici les types de marqueurs ins et del');
3
  // L'instruction return utilise le marqueur par défaut
4
  return true;
5
}

Retour à la ligne automatique

Configurer le retour à la ligne par bloc

1
// Exemple avec retour à la ligne activé
2
function getLongString() {
3
  return 'Ceci est une très longue chaîne de caractères qui ne tiendra probablement pas dans l\'espace disponible à moins que le conteneur ne soit très large'
4
}

1
// Exemple avec wrap=false
2
function getLongString() {
3
  return 'Ceci est une très longue chaîne de caractères qui ne tiendra probablement pas dans l\'espace disponible à moins que le conteneur ne soit très large'
4
}

Configurer l’indentation du retour à la ligne

1
// Exemple preserveIndent (activé par défaut)
2
function getLongString() {
3
  return 'Ceci est une très longue chaîne de caractères qui ne tiendra probablement pas dans l\'espace disponible à moins que le conteneur ne soit très large'
4
}

1
// Exemple preserveIndent=false
2
function getLongString() {
3
  return 'Ceci est une très longue chaîne de caractères qui ne tiendra probablement pas dans l\'espace disponible à moins que le conteneur ne soit très large'
4
}

Sections repliables


5 lignes masquées
1
// Tout ce code de configuration sera replié
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// Cette partie du code est visible par défaut
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // Vous pouvez avoir plusieurs sections repliées
3 lignes masquées
12
  const a = 1
13
  const b = 2
14
  const c = a + b
15

16
  // Ceci restera visible
17
  console.log(`Résultat : ${a} + ${b} = ${c}`)
18
  return c
19
}
20

4 lignes masquées
21
// Tout le code jusqu'à la fin du bloc sera à nouveau replié
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: 'Fin du code de démonstration' })

Afficher plusAfficher moins

Numéros de ligne

Afficher les numéros de ligne par bloc

1
// Ce bloc de code affichera les numéros de ligne
2
console.log('Bonjour depuis la ligne 2 !')
3
console.log('Je suis à la ligne 3')

// Ce bloc désactive les numéros de ligne
console.log('Bonjour ?')
console.log('Désolé, savez-vous à quelle ligne je suis ?')

Modifier le numéro de ligne de départ

5
console.log('Bonjour depuis la ligne 5 !')
6
console.log('Je suis à la ligne 6')

Exemples de formules mathématiques KaTeX

Sat, 09 May 2026 00:00:00 GMT

Cet article présente le rendu des formules mathématiques KaTeX dans le thème Firefly.

Formules en ligne (Inline)

Les formules en ligne sont encadrées par un seul symbole $.

Par exemple : la formule d’Euler eiπ+1=0e^{i\pi} + 1 = 0eiπ+1=0 est l’une des plus belles formules des mathématiques.

L’équation masse-énergie E=mc2E = mc^2E=mc2 est également universellement connue.

Formules en bloc (Block)

Les formules en bloc sont encadrées par deux symboles $$ et s’affichent centrées.

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}∫−∞∞e−x2dx=πx=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}x=2a−b±b2−4ac

Exemples complexes

Matrices (Matrices)

(abcd)(αβγδ)=(aα+bγaβ+bδcα+dγcβ+dδ)\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} \alpha & \beta \\ \gamma & \delta \end{pmatrix} = \begin{pmatrix} a\alpha + b\gamma & a\beta + b\delta \\ c\alpha + d\gamma & c\beta + d\delta \end{pmatrix}(acbd)(αγβδ)=(aα+bγcα+dγaβ+bδcβ+dδ)

Limites et sommes (Limits and Sums)

∑n=1∞1n2=π26\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}n=1∑∞n21=6π2lim⁡x→0sin⁡xx=1\lim_{x \to 0} \frac{\sin x}{x} = 1x→0limxsinx=1

Équations de Maxwell (Maxwell’s Equations)

∇⋅E=ρε0∇⋅B=0∇×E=−∂B∂t∇×B=μ0J+μ0ε0∂E∂t\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0\mathbf{J} + \mu_0\varepsilon_0\frac{\partial \mathbf{E}}{\partial t} \end{aligned}∇⋅E∇⋅B∇×E∇×B=ε0ρ=0=−∂t∂B=μ0J+μ0ε0∂t∂E

Équations chimiques (Chemical Equations)

CHX4+2 OX2→COX2+2 HX2O\ce{CH4 + 2O2 -> CO2 + 2H2O}CHX4+2OX2COX2+2HX2O

Plus de symboles

Symbole	Code	Résultat
Alpha	`\alpha`	α\alphaα
Beta	`\beta`	β\betaβ
Gamma	`\Gamma`	Γ\GammaΓ
Pi	`\pi`	π\piπ
Infinity	`\infty`	∞\infty∞
Right Arrow	`\rightarrow`	→\rightarrow→
Partial	`\partial`	∂\partial∂

Pour plus de syntaxe KaTeX, consultez KaTeX Supported Functions.

Fonctionnalités Markdown étendues

Sat, 09 May 2026 00:00:00 GMT

Carte de dépôt GitHub

Vous pouvez ajouter des cartes dynamiques pointant vers des dépôts GitHub. Au chargement de la page, les informations du dépôt sont récupérées depuis l’API GitHub.

CuteLeaf

Firefly

Waiting for api.github.com...

00K

Waiting...

Utilisez le code ::github{repo="CuteLeaf/Firefly"} pour créer une carte de dépôt GitHub.

1
::github{repo="CuteLeaf/Firefly"}

Configuration des blocs d’avertissement (Admonitions)

Firefly utilise le plugin rehype-callouts, qui prend en charge trois styles de thèmes pour les blocs d’avertissement : GitHub, Obsidian et VitePress. Vous pouvez les configurer dans src/config/siteConfig.ts :

src/config/siteConfig.ts

1
export const siteConfig: SiteConfig = {
2
  // ...
3
  rehypeCallouts: {
4
    // Options : "github" | "obsidian" | "vitepress"
5
    theme: "github",
6
  },
7
  // ...
8
};

Remarque : après avoir modifié la configuration, vous devez redémarrer le serveur de développement pour que les changements prennent effet.

Voici la liste des types pris en charge par chaque thème. Chaque style de thème a sa propre syntaxe ; choisissez selon vos préférences.

1. Style de thème GitHub

Voici les 5 types de base officiellement pris en charge par GitHub.

GitHub

Syntaxe de base

1
> [!NOTE] NOTE
2
> Informations que l'utilisateur devrait prendre en compte.
3

4
> [!TIP] TIP
5
> Informations facultatives pour aider l'utilisateur à mieux réussir.
6

7
> [!IMPORTANT] IMPORTANT
8
> Informations essentielles nécessaires au succès de l'utilisateur.
9

10
> [!WARNING] WARNING
11
> Contenu critique nécessitant une attention immédiate.
12

13
> [!CAUTION] CAUTION
14
> Conséquences négatives potentielles d'une action.
15

16
> [!NOTE] Titre personnalisé
17
> Ceci est un exemple avec un titre personnalisé.

Afficher plusAfficher moins

2. Style de thème Obsidian

Le style Obsidian prend en charge un grand nombre de types et d’alias.

Cliquer pour développer... la liste de syntaxes Obsidian

1
> [!NOTE] NOTE
2
> Bloc de notes générique.
3

4
> [!ABSTRACT] ABSTRACT
5
> Résumé de l'article.
6

7
> [!SUMMARY] SUMMARY
8
> Synthèse de l'article (identique à Abstract).
9

10
> [!TLDR] TLDR
11
> Trop long, pas lu (identique à Abstract).
12

13
> [!INFO] INFO
14
> Informations supplémentaires.
15

16
> [!TODO] TODO
17
> Éléments à accomplir.
18

19
> [!TIP] TIP
20
> Conseils pratiques ou astuces.
21

22
> [!HINT] HINT
23
> Indication (identique à Tip).
24

25
> [!IMPORTANT] IMPORTANT
26
> Information importante.
27

28
> [!SUCCESS] SUCCESS
29
> Opération réussie.
30

31
> [!CHECK] CHECK
32
> Vérification passée (identique à Success).
33

34
> [!DONE] DONE
35
> Terminé (identique à Success).
36

37
> [!QUESTION] QUESTION
38
> Poser une question.
39

40
> [!HELP] HELP
41
> Demander de l'aide (identique à Question).
42

43
> [!FAQ] FAQ
44
> Questions fréquentes (identique à Question).
45

46
> [!WARNING] WARNING
47
> Avertissement.
48

49
> [!CAUTION] CAUTION
50
> Précaution (identique à Warning).
51

52
> [!ATTENTION] ATTENTION
53
> Attirer l'attention (identique à Warning).
54

55
> [!FAILURE] FAILURE
56
> Opération échouée.
57

58
> [!FAIL] FAIL
59
> Échec (identique à Failure).
60

61
> [!MISSING] MISSING
62
> Contenu manquant (identique à Failure).
63

64
> [!DANGER] DANGER
65
> Avertissement d'opération dangereuse.
66

67
> [!ERROR] ERROR
68
> Message d'erreur (identique à Danger).
69

70
> [!BUG] BUG
71
> Signaler un défaut logiciel.
72

73
> [!EXAMPLE] EXAMPLE
74
> Présenter un exemple.
75

76
> [!QUOTE] QUOTE
77
> Citer un passage.
78

79
> [!CITE] CITE
80
> Citation (identique à Quote).
81

82
> [!NOTE] Titre personnalisé
83
> Ceci est un exemple avec un titre personnalisé.

Afficher plusAfficher moins

Obsidian

3. Style de thème VitePress

Le style VitePress propose un ensemble de styles plats et modernes par défaut. Il comprend actuellement 5 types de base identiques à ceux de GitHub.

Cliquer pour développer... la liste de syntaxes VitePress

1
> [!NOTE] NOTE
2
> Correspond au Note de GitHub.
3

4
> [!TIP] TIP
5
> Correspond au Tip de GitHub.
6

7
> [!IMPORTANT] IMPORTANT
8
> Correspond au Important de GitHub.
9

10
> [!WARNING] WARNING
11
> Correspond au Warning de GitHub.
12

13
> [!CAUTION] CAUTION
14
> Correspond au Caution de GitHub.
15

16
> [!TIP] Titre personnalisé
17
> Le style VitePress prend également en charge les titres personnalisés.

Afficher plusAfficher moins

VitePress

4. Syntaxe de style Docusaurus

Seule la syntaxe est prise en charge ; le style reste identique aux trois thèmes ci-dessus.

Cliquer pour développer... la liste de syntaxes Docusaurus

Prend en charge les types de blocs d’avertissement suivants : note tip important warning caution

1
:::note
2
Informations que l'utilisateur devrait prendre en compte, même en parcourant rapidement.
3
:::
4

5
:::tip
6
Informations facultatives pour aider l'utilisateur à mieux réussir.
7
:::
8

9
:::important
10
Informations essentielles nécessaires au succès de l'utilisateur.
11
:::
12

13
:::warning
14
Contenu critique nécessitant une attention immédiate en raison de risques potentiels.
15
:::
16

17
:::caution
18
Conséquences négatives potentielles d'une action.
19
:::
20

21
:::tip[Titre personnalisé]
22
Informations facultatives pour aider l'utilisateur à mieux réussir.
23
:::

Afficher plusAfficher moins

Spoiler

Vous pouvez ajouter un effet spoiler à votre texte. Le texte prend également en charge la syntaxe Markdown.

Contenu caché haha !

1
Contenu :spoiler[caché **haha**] !

Grille d’images (Image Grid)

Vous pouvez utiliser les balises [grid] et [/grid] pour afficher plusieurs images côte à côte verticalement. C’est très utile pour présenter une galerie de photos ou des comparaisons d’images. Le système dispose automatiquement les images dans une grille responsive en fonction du nombre d’images encadrées (jusqu’à 4 images côte à côte maximum).

Compensation automatique de la hauteur des images : Si des images d’une même rangée ont des hauteurs, tailles ou proportions différentes, elles se rempliront automatiquement comme dans une « galerie en mosaïque ». Les images plus courtes ou non conformes seront automatiquement recadrées au centre avec object-cover pour combler l’espace. Les bords des images sont parfaitement alignés horizontalement sans espace, mais après le recadrage, seul un clic sur l’image via la visionneuse permet de voir l’image complète ; il est donc conseillé d’éviter autant que possible de mélanger des images aux proportions très différentes dans une même rangée.

Légendes toujours alignées en bas : Quelle que soit la variation de dimensions des images au-dessus, toutes les légendes d’une même ligne sont alignées sur une ligne de base horizontale parfaite.

Image exemple un

Image exemple deux

Image exemple trois

Syntaxe de base

1
[grid]
2
![Image exemple un](./images/firefly1.avif)
3
![Image exemple deux](./images/firefly2.avif)
4
![Image exemple trois](./images/firefly3.avif)
5
[/grid]

Diagrammes PlantUML dans Markdown

Sat, 09 May 2026 00:00:00 GMT

Guide des diagrammes PlantUML dans Markdown

PlantUML est un outil de création de diagrammes à partir de texte pur. Il suffit d’écrire une syntaxe structurée pour générer des diagrammes de séquence, de classes, de cas d’utilisation, d’activité et bien d’autres diagrammes d’ingénierie courants.

Il est particulièrement adapté aux blogs techniques et à la documentation de projet :

Les diagrammes sont gérés avec le texte dans le système de versions, facilitant la collaboration et la révision
Modifier un diagramme ne nécessite que de modifier le texte, idéal pour les itérations fréquentes
Intégration transparente avec Markdown pour une documentation cohérente

Dans Firefly, les blocs de code plantuml sont encodés lors de la compilation pour générer l’adresse SVG du serveur. Côté page, la source du diagramme bascule automatiquement selon le thème clair/sombre, avec prise en charge du zoom, du glisser-déplacer et de l’interaction plein écran.

Pour démarrer rapidement, retenez ce modèle minimal :

Exemples de diagrammes d’activité

Exemples de diagrammes d’état

Exemples de diagrammes de cas d’utilisation

Exemples de diagrammes de composants

Exemples de diagrammes de déploiement

Exemples de diagrammes ER

Exemples de diagrammes de séquence (connexion et rafraîchissement de jeton)

Exemples de diagrammes de conteneurs C4

Intégrer des vidéos dans un article

Sat, 09 May 2026 00:00:00 GMT

Il suffit de copier le code d’intégration depuis YouTube ou une autre plateforme, puis de le coller dans le fichier markdown.

1
---
2
title: Intégrer des vidéos dans un article
3
published: 2023-10-19
4
// ...
5
---
6

7
<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>