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

📖 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.

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”)

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

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

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

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

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

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

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.

Exemple de configuration

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 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.

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 :

1. 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.
2. 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.
3. 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

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