Mises en page

Les mises en page définissent la structure et l’apparence de vos pages. Le thème Zer0-Mistakes inclut plusieurs mises en page intégrées.

Mises en page disponibles

Utiliser les mises en page

Spécifiez une mise en page dans le front matter de votre page :

---
title: "My Page"
layout: default
---

Hiérarchie des mises en page

Les mises en page héritent les unes des autres :

root.html                 # base HTML document — never use directly
├── default.html          # adds the sidebars and table of contents
│   ├── article.html      # blog posts
│   ├── collection.html   # collection index pages
│   ├── author.html  authors.html
│   ├── note.html    notebook.html
│   ├── recipe.html  cookbook.html
│   └── tag.html
├── home.html             # homepage
├── landing.html          # full-width marketing pages
├── section.html  news.html  admin.html  stats.html
└── 404.html      setup.html  welcome.html  book*.html

La branche sur laquelle se situe une mise en page n’est pas qu’esthétique. default.html est la seule mise en page qui affiche la barre latérale gauche (#bdSidebar) et le panneau de table des matières (#tocContents). Une mise en page qui hérite directement de root n’obtient ni l’un ni l’autre — donc une mise en page personnalisée qui en a besoin doit hériter de default.

Créer des mises en page personnalisées

Étape 1 : Créer le fichier de mise en page

Créez un fichier dans _layouts/ :

---
layout: default
---
<!-- _layouts/tutorial.html -->
<article class="tutorial">
  <header class="tutorial-header">
    <h1>{{ page.title }}</h1>
    <div class="meta">
      <span class="difficulty">{{ page.difficulty }}</span>
      <span class="time">{{ page.estimated_time }}</span>
    </div>
  </header>
  
  <div class="tutorial-content">
    {{ content }}
  </div>
  
  {% if page.next_tutorial %}
  <footer class="tutorial-footer">
    <a href="{{ page.next_tutorial }}">Next Tutorial →</a>
  </footer>
  {% endif %}
</article>

Étape 2 : Utiliser la mise en page

---
title: "Getting Started Tutorial"
layout: tutorial
difficulty: beginner
estimated_reading_time: "15 minutes"
next_tutorial: /tutorials/part-2/
---

Variables de mise en page

Accédez à ces variables dans vos mises en page :

Remplacer les mises en page du thème

Pour personnaliser une mise en page du thème :

1. Copiez la mise en page du thème dans votre répertoire _layouts/
2. Modifiez-la selon vos besoins
3. Jekyll utilise votre version à la place

Contenu conditionnel

Affichez du contenu en fonction de la mise en page ou des variables de page :

{% if page.layout == 'article' %}
  <div class="post-meta">
    <time>{{ page.date | date: "%B %d, %Y" }}</time>
    <span class="author">{{ page.author }}</span>
  </div>
{% endif %}

{% if page.sidebar %}
  {% include navigation/sidebar.html %}
{% endif %}

Inclure des composants

Utilisez les includes pour les parties réutilisables :

{% include core/head.html %}
{% include navigation/header.html %}
{% include content/toc.html %}
{% include core/footer.html %}

Bonnes pratiques

1. Commencez avec default — Héritez de default pour la cohérence
2. Gardez les mises en page ciblées — Chaque mise en page doit avoir un seul objectif
3. Utilisez les includes — Extrayez les composants réutilisables
4. Documentez les mises en page personnalisées — Notez l’objectif et les variables requises
5. Testez la réactivité — Vérifiez que les mises en page fonctionnent sur toutes les tailles d’écran

Référence

• Documentation des mises en page Jekyll
• Langage de template Liquid
• Maîtrise de CSS Grid (tutoriel) — créez des mises en page personnalisées à deux dimensions avec des exemples interactifs dans le navigateur

Référence technique

Pour les détails de niveau contributeur (hiérarchie des mises en page, héritage des templates Liquid, câblage de la barre latérale) :

• Mises en page et navigation → docs/ui/layouts-and-navigation.md

Voir aussi

• [[Customization]]
• [[Include Components]]
• [[Liquid]]