Cette page a été traduite automatiquement à partir de l'original en anglais.
Voir l'original
Mises en page
Créez et personnalisez les mises en page des pages dans le thème Jekyll Zer0-Mistakes.
Table des matières
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
| Mise en page | Objectif | Cas d’usage |
|---|---|---|
default |
Page standard avec barre latérale | Documentation, pages générales |
journals |
Mise en page d’article de blog | Articles de blog avec métadonnées |
home |
Mise en page de page d’accueil | Page d’accueil du site |
collection |
Index de collection | Pages de liste pour les collections |
landing |
Page pleine largeur | Pages marketing/d’atterrissage |
root |
HTML de base | Ne pas utiliser directement |
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
└── default.html
├── home.html
├── journals.html
├── collection.html
└── landing.html
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>Mises en page</h1>
<div class="meta">
<span class="difficulty">intermediate</span>
<span class="time"></span>
</div>
</header>
<div class="tutorial-content">
<!--
===================================================================
DEFAULT LAYOUT - Standard content layout with sidebars
===================================================================
File: default.html
Path: _layouts/default.html
Inherits: root.html
Purpose: Primary content layout with sidebar navigation and table of contents
Template Logic:
- Creates a responsive three-column layout using Bootstrap grid
- Left sidebar: Site navigation and content outline (collapsible on mobile)
- Local graph: Obsidian side panel (rendered at body level via footer.html)
- Center: Main content area with page title and body content
- Right sidebar: Table of contents and page shortcuts (hidden on mobile)
- Implements scroll spy for navigation highlighting
- Responsive design that stacks vertically on mobile devices
Layout Structure:
1. Container wrapper with Bootstrap responsive classes
2. Left sidebar (bd-sidebar) - Navigation and outline
3. Main content area (bd-main) with:
- Intro section (page title, metadata)
- Right sidebar (bd-toc) - Table of contents
- Content area (bd-content) - Main page content
Dependencies:
- sidebar-left.html: Site navigation and content outline
- intro.html: Page title, breadcrumbs, and metadata
- sidebar-right.html: Table of contents and page shortcuts
Bootstrap Classes Used:
- container-xxl: Extra large responsive container
- bd-gutter: Custom Bootstrap spacing
- bd-layout: Custom layout utility class
- bd-sidebar: Custom sidebar styling
- bd-main: Main content area
- bd-toc: Table of contents styling
- bd-content: Content area styling
===================================================================
-->
<!-- ================================================ -->
<!-- MAIN LAYOUT CONTAINER -->
<!-- Bootstrap responsive container with custom grid -->
<!-- ================================================ -->
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<!-- ================================ -->
<!-- LEFT SIDEBAR - Navigation -->
<!-- ================================ -->
<!-- Site navigation, content outline, and offcanvas menu for mobile -->
<aside class="bd-sidebar">
<!--
===================================================================
SIDEBAR LEFT - Dynamic Navigation Sidebar
===================================================================
File: sidebar-left.html
Path: _includes/navigation/sidebar-left.html
Purpose: Left sidebar panel (responsive offcanvas) around the resolved
sidebar navigation content
Template Logic:
- Responsive offcanvas sidebar for mobile devices
- Mode resolution + rendering are delegated to shared includes:
* navigation/sidebar-config.html — resolves sidebar_nav / title / icon
from page.sidebar → collection `sidebar:` metadata → site.sidebar
* navigation/sidebar-nav.html — renders the resolved mode
Navigation modes (page.sidebar.nav — see sidebar-config.html):
- "auto": best mode for the page's collection (curated data file →
collection folder tree → post categories)
- "collection": live folder tree of the page's (or a named) collection
- "categories" / "tags": posts grouped by taxonomy term
- any other value: _data/navigation/<value>.yml rendered by nav-tree.html
Configuration:
- Heading text/icon: page.sidebar.title/icon → collection metadata →
site.sidebar.title/icon → "Browse docs"
===================================================================
-->
<!-- ================================ -->
<!-- SIDEBAR NAVIGATION CONTAINER -->
<!-- ================================ -->
<!-- Responsive offcanvas sidebar - full-width on mobile, fixed on desktop -->
<script>
try {
if (localStorage.getItem('zer0-nav-sidebar-visible') === 'false') {
document.documentElement.classList.add('bd-sidebar-pref-hidden');
}
} catch (e) {}
</script>
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<!-- ========================== -->
<!-- SIDEBAR HEADER -->
<!-- ========================== -->
<!-- Mobile-only header with close button -->
<div class="offcanvas-header">
<h2 class="offcanvas-title h5 mb-0" id="bdSidebarOffcanvasLabel">Browse docs</h2>
<div class="d-flex align-items-center gap-1">
<button type="button"
class="btn btn-sm btn-link text-body-secondary bd-sidebar-visibility-toggle d-lg-none px-2"
aria-controls="bdSidebar"
aria-expanded="true"
aria-label="Hide documentation sidebar">
<i class="bi bi-eye-slash" aria-hidden="true"></i>
<span class="visually-hidden">Hide documentation sidebar</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close documentation sidebar" data-bs-target="#bdSidebar"></button>
</div>
</div>
<!-- ========================== -->
<!-- SIDEBAR CONTENT AREA -->
<!-- ========================== -->
<!-- Scrollable content area with dynamic navigation options -->
<div class="offcanvas-body overflow-auto">
<div class="bd-sidebar-desktop-header mb-3 d-none d-lg-flex align-items-center justify-content-between gap-2 w-100">
<strong class="d-flex align-items-center mb-0">
<i class="bi bi-journal-bookmark me-2" aria-hidden="true"></i>
Browse docs
</strong>
<button type="button"
class="btn btn-sm btn-link text-body-secondary bd-sidebar-visibility-toggle d-none d-lg-inline-flex flex-shrink-0 px-1"
aria-controls="bdSidebar"
aria-expanded="true"
aria-label="Hide documentation sidebar"
title="Hide documentation sidebar">
<i class="bi bi-layout-sidebar-inset" aria-hidden="true"></i>
<span class="visually-hidden">Hide documentation sidebar</span>
</button>
</div>
<!-- Resolved navigation content (see navigation/sidebar-nav.html) -->
<nav class="w-100 nav-tree" id="sidebar-content" data-nav-tree aria-label="Section navigation">
<!--
===================================================================
NAV TREE - Flat YAML Navigation Renderer
===================================================================
File: nav-tree.html
Path: _includes/navigation/nav-tree.html
Purpose: Render hierarchical navigation from YAML data files
Parameters:
- nav: Name of navigation file in _data/navigation/ (e.g., "docs", "main")
Data Schema (expected in _data/navigation/*.yml):
- title: string (required) - Display text
- url: string (optional) - Link URL
- icon: string (optional) - Bootstrap Icons class (e.g., "bi-folder")
- expanded: boolean (optional) - Default expanded state (default: false)
- children: array (optional) - Nested navigation items (max 2 levels)
Note: This implementation supports 2 levels of nesting to avoid Jekyll's
include depth limit. For deeper nesting, consider a plugin approach.
Dependencies:
- site.data.navigation[nav]: Navigation YAML data
- Bootstrap 5 collapse component
- Bootstrap Icons for visual indicators
Usage:
include navigation/nav-tree.html nav="docs"
===================================================================
-->
<ul class="list-unstyled fw-normal pb-2 small nav-tree-root">
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-rocket-takeoff me-2"></i>
<span>Getting Started</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-getting-started"
aria-expanded="true"
aria-controls="nav-getting-started"
aria-label="Toggle Getting Started submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse show" id="nav-getting-started">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Documentation Home</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/installation/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Installation</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/getting-started/quick-start/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Quick Start</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/getting-started/theme-guide/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Theme Guide</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/front-matter/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Front Matter</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/features/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-stars me-2"></i>
<span>Features</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-features"
aria-expanded="false"
aria-controls="nav-features"
aria-label="Toggle Features submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-features">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Features Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/book-collection/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Books Collection</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/mermaid-diagrams/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Mermaid Diagrams</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/mathjax-math/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>MathJax Math</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/giscus-comments/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Giscus Comments</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/posthog-analytics/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>PostHog Analytics</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/keyboard-navigation/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Keyboard Navigation</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/preview-image-generator/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Preview Images</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/customization/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-palette me-2"></i>
<span>Customization</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-customization"
aria-expanded="false"
aria-controls="nav-customization"
aria-label="Toggle Customization submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-customization">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/customization/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Customization Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/customization/layouts/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Layouts</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/customization/styles/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Styles</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/customization/navigation/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Navigation</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/deployment/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-cloud-upload me-2"></i>
<span>Deployment</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-deployment"
aria-expanded="false"
aria-controls="nav-deployment"
aria-label="Toggle Deployment submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-deployment">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Deployment Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/github-pages/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>GitHub Pages</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/remote-theme-checklist/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Remote-Theme Consumer Checklist</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/build-overlay/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Safe-Mode Build Overlay</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/netlify/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Netlify</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/custom-domain/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Custom Domain</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/jekyll/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-journal-code me-2"></i>
<span>Jekyll</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-jekyll"
aria-expanded="false"
aria-controls="nav-jekyll"
aria-label="Toggle Jekyll submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-jekyll">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Jekyll Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/jekyll-config/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Configuration</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/jekyll-liquid/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Liquid Templating</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/code-highlighting/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Code Highlighting</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/pagination/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Pagination</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/jekyll-performance-optimization/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Performance</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/jekyll-security/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Security</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/ruby/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-gem me-2"></i>
<span>Ruby & Bundler</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-ruby-bundler"
aria-expanded="false"
aria-controls="nav-ruby-bundler"
aria-label="Toggle Ruby & Bundler submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-ruby-bundler">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/ruby/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Ruby Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/ruby-101/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Ruby 101</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/liquid/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-droplet me-2"></i>
<span>Liquid</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-liquid"
aria-expanded="false"
aria-controls="nav-liquid"
aria-label="Toggle Liquid submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-liquid">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/liquid/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Liquid Overview</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/docker/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-box-seam me-2"></i>
<span>Docker</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-docker"
aria-expanded="false"
aria-controls="nav-docker"
aria-label="Toggle Docker submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-docker">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/docker/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Docker Overview</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/bootstrap/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-bootstrap me-2"></i>
<span>Bootstrap</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-bootstrap"
aria-expanded="false"
aria-controls="nav-bootstrap"
aria-label="Toggle Bootstrap submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-bootstrap">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/bootstrap/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Bootstrap Overview</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/development/testing/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-tools me-2"></i>
<span>Development</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-development"
aria-expanded="false"
aria-controls="nav-development"
aria-label="Toggle Development submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-development">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/development/testing/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Testing</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/development/vendor-assets/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Vendor assets</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/troubleshooting/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-question-circle me-2"></i>
<span>Help</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-help"
aria-expanded="false"
aria-controls="nav-help"
aria-label="Toggle Help submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-help">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/troubleshooting/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Troubleshooting</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</aside>
<div class="position-fixed bd-sidebar-fab d-lg-none" id="sidebarFab">
<button class="btn btn-primary rounded-circle shadow-lg p-0 bd-sidebar-toggle"
type="button"
aria-controls="bdSidebar"
aria-expanded="true"
aria-label="Open documentation sidebar">
<i class="bi bi-journal-bookmark fs-5" aria-hidden="true"></i>
</button>
</div>
<!-- ================================ -->
<!-- MAIN CONTENT AREA -->
<!-- ================================ -->
<!-- Primary content section with scroll spy for table of contents navigation.
Not a <main>: root.html already provides the single <main id="main-content">
landmark; a nested <main> here would duplicate it (issue #299). -->
<div class="bd-main order-1" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="100" data-bs-smooth-scroll="true">
<!--
file: _includes/content/intro.html
description: Enhanced intro section with share, edit, and improve/report buttons
path: _includes/content/intro.html
features:
- Responsive share dropdown with multiple social platforms
- Edit on GitHub quick link
- "Improve" button — opens the page-feedback widget (capture type + description
+ live page context + console logs → GitHub issue). Progressive enhancement:
it is a real link to the issue form, upgraded by assets/js/page-feedback.js.
See _includes/components/page-feedback.html.
- Responsive flex layout: full-width content block, frosted metadata footer with reading time and action buttons
- Balanced padding and typography hierarchy via bd-intro-* classes
- Metadata row: author, dates, category, difficulty, tags, view source
-->
<!-- Intro Section -->
<div class="bd-intro" style="
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assets/images/previews/keyboard-navigation.png') no-repeat center center / cover;">
<div class="bd-intro-inner">
<div class="bd-intro-content">
<h1 class="bd-intro-title">Navigation au clavier</h1>
<p class="bd-intro-description">Guide complet des raccourcis clavier et des fonctionnalités d'accessibilité de la navigation dans le thème Zer0-Mistakes.</p>
</div>
<div class="bd-intro-meta-footer">
<ul class="bd-intro-meta-row list-unstyled" aria-label="Page metadata">
<li class="bd-intro-meta-item">
<i class="bi bi-person-fill bd-intro-meta-icon" aria-hidden="true"></i>
<a class="bd-intro-meta-link" href="https://github.com/bamr87" rel="author" itemprop="author">Amr</a>
</li>
<li class="bd-intro-meta-item">
<i class="bi bi-pencil bd-intro-meta-icon" aria-hidden="true"></i>
<time datetime="2026-06-16T00:00:00+00:00" itemprop="dateModified">
Mis à jour Jun 16, 2026
</time>
</li>
<li class="bd-intro-meta-item">
<i class="bi bi-folder2 bd-intro-meta-icon" aria-hidden="true"></i>
<a class="bd-intro-meta-link bd-intro-badge" href="/docs/features/">Features</a>
</li>
<li class="bd-intro-meta-item">
<i class="bi bi-bar-chart-steps bd-intro-meta-icon" aria-hidden="true"></i>
<span class="bd-intro-badge bd-intro-badge--level bd-intro-badge--level-beginner">Beginner</span>
</li>
<li class="bd-intro-meta-item bd-intro-meta-item--tags">
<i class="bi bi-tags bd-intro-meta-icon" aria-hidden="true"></i>
<span class="bd-intro-tag-list">
<a class="bd-intro-badge bd-intro-badge--tag" href="/tags/#keyboard">keyboard</a>
<a class="bd-intro-badge bd-intro-badge--tag" href="/tags/#shortcuts">shortcuts</a>
<a class="bd-intro-badge bd-intro-badge--tag" href="/tags/#accessibility">accessibility</a>
<a class="bd-intro-badge bd-intro-badge--tag" href="/tags/#navigation">navigation</a>
</span>
</li>
<li class="bd-intro-meta-item bd-intro-meta-item--source d-none d-md-inline-flex">
<i class="bi bi-file-earmark-code bd-intro-meta-icon" aria-hidden="true"></i>
<a class="bd-intro-meta-link" href="https://github.com/bamr87/zer0-mistakes/blob/main//fr/docs/features/keyboard-navigation.md" target="_blank" rel="noopener noreferrer">Voir la source</a>
</li>
</ul>
<div class="bd-intro-meta-bottom">
<p class="bd-intro-meta">
<i class="bi bi-clock me-1" aria-hidden="true"></i>
Temps de lecture estimé : 5 minutes
</p>
<!-- Action Buttons Group -->
<div class="bd-intro-actions">
<!-- Share Button -->
<div class="dropdown">
<button class="btn btn-sm btn-info dropdown-toggle" type="button" id="shareDropdownBottom" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-share" aria-hidden="true"></i>
<span class="d-none d-sm-inline ms-1">Partager</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="shareDropdownBottom">
<li>
<a class="dropdown-item" href="https://reddit.com/submit?url=https://zer0-mistakes.com/fr/docs/features/keyboard-navigation/&title=Navigation%20au%20clavier" target="_blank" rel="noopener noreferrer">
<i class="bi bi-reddit me-2"></i>Partager sur Reddit
</a>
</li>
<li>
<a class="dropdown-item js-linkedin-share"
href="https://www.linkedin.com/sharing/share-offsite/?url=https://zer0-mistakes.com/fr/docs/features/keyboard-navigation/"
target="_blank"
rel="noopener noreferrer"
title="Copies a cleaned article summary to your clipboard, then opens LinkedIn sharing"
data-share-url="https://zer0-mistakes.com/fr/docs/features/keyboard-navigation/"
data-share-title="Navigation au clavier"
data-share-description="Guide complet des raccourcis clavier et des fonctionnalités d'accessibilité de la navigation dans le thème Zer0-Mistakes.">
<i class="bi bi-linkedin me-2"></i>Partager sur LinkedIn
</a>
</li>
<li>
<a class="dropdown-item" href="https://x.com/intent/tweet?url=https%3A%2F%2Fzer0-mistakes.com%2Ffr%2Fdocs%2Ffeatures%2Fkeyboard-navigation%2F&text=Navigation+au+clavier" target="_blank" aria-label="Partager sur X">
<i class="bi bi-twitter-x me-2"></i>Partager sur X
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li><button class="dropdown-item" type="button" data-copy="https://zer0-mistakes.com/fr/docs/features/keyboard-navigation/">
<i class="bi bi-clipboard me-2" aria-hidden="true"></i>Copier le lien
</button>
</li>
</ul>
</div>
<!-- Improve / Report — opens the page-feedback widget (assets/js/page-feedback.js).
Progressive enhancement: this is a real link to the issue form, so it
works without JavaScript; page-feedback.js intercepts [data-pf-open]
clicks and opens the richer capture modal (context + logs + AI) instead. -->
<a class="btn btn-sm btn-success bd-intro-action-link"
href="https://github.com/bamr87/zer0-mistakes/issues/new?template=page_improvement.yml&labels=page-feedback"
data-pf-open
target="_blank"
rel="noopener noreferrer"
title="Report a problem or suggest an improvement for this page">
<i class="bi bi-megaphone" aria-hidden="true"></i>
<span class="d-none d-sm-inline ms-1">Améliorer</span>
</a>
<!-- Edit on GitHub Button -->
<a href="https://github.com/bamr87/zer0-mistakes/blob/main//fr/docs/features/keyboard-navigation.md"
class="btn btn-sm btn-dark bd-intro-action-link"
target="_blank"
rel="noopener noreferrer">
<i class="bi bi-github" aria-hidden="true"></i>
<span class="d-none d-sm-inline ms-1">Modifier sur GitHub</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- =============================== -->
<!-- RIGHT SIDEBAR - Table of Contents -->
<!-- =============================== -->
<!-- Page outline, shortcuts, and related links (hidden on mobile) -->
<div class="bd-toc text-body-secondary">
<!--
file: sidebar-right.html
path: _includes/sidebar-right.html
includes: nav_list.html, content/toc.html
--><!-- FOUC guard: apply hidden TOC preference before paint -->
<script>
try {
if (localStorage.getItem('zer0-nav-toc-visible') === 'false') {
document.documentElement.classList.add('bd-toc-pref-hidden');
}
} catch (e) {}
</script>
<!-- Right sidebar container -->
<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="tocContents" aria-labelledby="tocLabel">
<div class="offcanvas-header">
<h2 class="offcanvas-title h5 mb-0" id="tocLabel">Table des matières</h2>
<div class="d-flex align-items-center gap-1">
<button type="button"
class="btn btn-sm btn-link text-body-secondary bd-toc-visibility-toggle d-lg-none px-2"
aria-controls="tocContents"
aria-expanded="true"
aria-label="Hide table of contents">
<i class="bi bi-eye-slash" aria-hidden="true"></i>
<span class="visually-hidden">Hide table of contents</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close table of contents" data-bs-target="#tocContents"></button>
</div>
</div>
<div class="offcanvas-body">
<!-- Table of contents -->
<nav id="TableOfContents" role="navigation" aria-label="Table of Contents">
<!-- TOC title -->
<div class="mb-3 d-flex align-items-center justify-content-between gap-2">
<strong class="d-flex align-items-center mb-0">
<i class="bi bi-file-text me-2" aria-hidden="true"></i>
Sur cette page
</strong>
<button type="button"
class="btn btn-sm btn-link text-body-secondary bd-toc-visibility-toggle d-none d-lg-inline-flex flex-shrink-0 px-1"
aria-controls="tocContents"
aria-expanded="true"
aria-label="Hide table of contents"
title="Hide table of contents">
<i class="bi bi-layout-sidebar-inset-reverse" aria-hidden="true"></i>
<span class="visually-hidden">Hide table of contents</span>
</button>
</div>
<ul class="list-group-flush"><li class="list-group-item"><a href="#navigation-au-clavier" class="">Navigation au clavier</a><ul><li class="list-group-item"><a href="#référence-rapide" class="">Référence rapide</a></li><li class="list-group-item"><a href="#navigation-par-saut" class="">Navigation par saut</a><ul><li class="list-group-item"><a href="#aller-au-contenu-principal" class="">Aller au contenu principal</a></li></ul></li><li class="list-group-item"><a href="#navigation-par-barre-latérale" class="">Navigation par barre latérale</a><ul><li class="list-group-item"><a href="#barre-latérale-gauche" class="">Barre latérale gauche</a></li><li class="list-group-item"><a href="#barre-latérale-droite-table-des-matières" class="">Barre latérale droite (table des matières)</a></li></ul></li><li class="list-group-item"><a href="#gestion-du-focus" class="">Gestion du focus</a><ul><li class="list-group-item"><a href="#piège-de-focus-offcanvas" class="">Piège de focus offcanvas</a></li><li class="list-group-item"><a href="#liens-dancrage" class="">Liens d’ancrage</a></li></ul></li><li class="list-group-item"><a href="#fonctionnalités-daccessibilité" class="">Fonctionnalités d’accessibilité</a><ul><li class="list-group-item"><a href="#prise-en-charge-des-lecteurs-décran" class="">Prise en charge des lecteurs d’écran</a></li><li class="list-group-item"><a href="#indicateurs-visuels-de-focus" class="">Indicateurs visuels de focus</a></li><li class="list-group-item"><a href="#mouvement-réduit" class="">Mouvement réduit</a></li></ul></li><li class="list-group-item"><a href="#gestes-tactiles-et-balayages" class="">Gestes tactiles et balayages</a><ul><li class="list-group-item"><a href="#balayer-pour-ouvrir" class="">Balayer pour ouvrir</a></li><li class="list-group-item"><a href="#cibles-tactiles" class="">Cibles tactiles</a></li></ul></li><li class="list-group-item"><a href="#prise-en-charge-des-navigateurs" class="">Prise en charge des navigateurs</a></li><li class="list-group-item"><a href="#dépannage" class="">Dépannage</a><ul><li class="list-group-item"><a href="#focus-non-visible" class="">Focus non visible</a></li><li class="list-group-item"><a href="#raccourcis-ne-fonctionnant-pas" class="">Raccourcis ne fonctionnant pas</a></li><li class="list-group-item"><a href="#problèmes-de-lecteur-décran" class="">Problèmes de lecteur d’écran</a></li></ul></li><li class="list-group-item"><a href="#retours" class="">Retours</a></li><li class="list-group-item"><a href="#référence-technique" class="">Référence technique</a></li><li class="list-group-item"><a href="#voir-aussi" class="">Voir aussi</a></li></ul></li></ul>
</nav>
</div>
</div>
</div>
<!-- =============================== -->
<!-- MAIN CONTENT BODY -->
<!-- =============================== -->
<!-- Where the actual page content is rendered -->
<div class="bd-content ps-lg-2">
<h1 id="navigation-au-clavier">Navigation au clavier</h1>
<p>Le thème Zer0-Mistakes inclut une prise en charge complète de la navigation au clavier pour améliorer l’accessibilité et l’efficacité de la navigation pour tous les utilisateurs.</p>
<p><img src="/assets/images/docs/features/keyboard-navigation.png" alt="La fenêtre modale d'aide sur les raccourcis clavier répertoriant des actions telles qu'Ouvrir la recherche, Section précédente/suivante et Afficher la table des matières" /></p>
<p>Appuyez sur <kbd>?</kbd> sur n’importe quelle page pour ouvrir cette référence des raccourcis.</p>
<h2 id="référence-rapide">Référence rapide</h2>
<table>
<thead>
<tr>
<th>Raccourci</th>
<th>Action</th>
<th>Contexte</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">Tab</code> / <code class="language-plaintext highlighter-rouge">Shift+Tab</code></td>
<td>Naviguer en avant/en arrière parmi les liens</td>
<td>N’importe où</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">Enter</code> / <code class="language-plaintext highlighter-rouge">Space</code></td>
<td>Activer un lien ou un bouton</td>
<td>Sur un élément focalisable</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">[</code></td>
<td>Aller à la section précédente</td>
<td>Table des matières</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">]</code></td>
<td>Aller à la section suivante</td>
<td>Table des matières</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">Esc</code></td>
<td>Fermer la barre latérale offcanvas</td>
<td>Quand la barre latérale est ouverte</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">/</code></td>
<td>Focaliser la recherche (à venir)</td>
<td>N’importe où</td>
</tr>
</tbody>
</table>
<h2 id="navigation-par-saut">Navigation par saut</h2>
<h3 id="aller-au-contenu-principal">Aller au contenu principal</h3>
<p>Appuyez sur <code class="language-plaintext highlighter-rouge">Tab</code> immédiatement après le chargement de la page pour afficher le lien « Aller au contenu principal ». Cela permet aux utilisateurs du clavier de contourner le menu de navigation et d’accéder directement au contenu de la page.</p>
<p><strong>Comment ça fonctionne :</strong></p>
<ol>
<li>La page se charge</li>
<li>Appuyez une fois sur <code class="language-plaintext highlighter-rouge">Tab</code></li>
<li>Le bouton « Aller au contenu principal » apparaît</li>
<li>Appuyez sur <code class="language-plaintext highlighter-rouge">Enter</code> pour accéder au contenu principal</li>
</ol>
<h2 id="navigation-par-barre-latérale">Navigation par barre latérale</h2>
<h3 id="barre-latérale-gauche">Barre latérale gauche</h3>
<p>La barre latérale gauche fournit la navigation à l’échelle du site et peut être contrôlée au clavier :</p>
<ul>
<li><strong>Ouvrir sur mobile</strong> : atteignez le bouton de menu avec Tab, appuyez sur <code class="language-plaintext highlighter-rouge">Enter</code></li>
<li><strong>Naviguer parmi les éléments</strong> : utilisez <code class="language-plaintext highlighter-rouge">Tab</code> pour parcourir les liens</li>
<li><strong>Développer les catégories</strong> : appuyez sur <code class="language-plaintext highlighter-rouge">Enter</code> sur les boutons de catégorie</li>
<li><strong>Fermer</strong> : appuyez sur <code class="language-plaintext highlighter-rouge">Esc</code></li>
</ul>
<h3 id="barre-latérale-droite-table-des-matières">Barre latérale droite (table des matières)</h3>
<p>La barre latérale de la table des matières inclut une navigation au clavier avancée :</p>
<h4 id="navigation-par-section">Navigation par section</h4>
<ul>
<li><strong>Section précédente</strong> : appuyez sur <code class="language-plaintext highlighter-rouge">[</code> pour faire défiler jusqu’au titre précédent</li>
<li><strong>Section suivante</strong> : appuyez sur <code class="language-plaintext highlighter-rouge">]</code> pour faire défiler jusqu’au titre suivant</li>
<li><strong>Sélection directe</strong> : parcourez les liens de la table des matières avec Tab et appuyez sur <code class="language-plaintext highlighter-rouge">Enter</code></li>
</ul>
<h4 id="accès-mobile">Accès mobile</h4>
<p>Sur les appareils mobiles :</p>
<ol>
<li>Le bouton de la table des matières apparaît dans le coin inférieur droit</li>
<li>Atteignez le bouton avec Tab ou balayez depuis le bord droit</li>
<li>Appuyez sur <code class="language-plaintext highlighter-rouge">Enter</code> pour ouvrir</li>
<li>Naviguez avec <code class="language-plaintext highlighter-rouge">Tab</code>, fermez avec <code class="language-plaintext highlighter-rouge">Esc</code></li>
</ol>
<h2 id="gestion-du-focus">Gestion du focus</h2>
<p>Le thème gère automatiquement le focus pour offrir une expérience clavier fluide :</p>
<h3 id="piège-de-focus-offcanvas">Piège de focus offcanvas</h3>
<p>Lorsqu’une barre latérale s’ouvre :</p>
<ul>
<li>Le focus se déplace à l’intérieur du panneau offcanvas</li>
<li><code class="language-plaintext highlighter-rouge">Tab</code> parcourt en boucle les éléments du panneau</li>
<li><code class="language-plaintext highlighter-rouge">Esc</code> ferme le panneau et redonne le focus au bouton déclencheur</li>
</ul>
<h3 id="liens-dancrage">Liens d’ancrage</h3>
<p>En cliquant sur les liens de la table des matières :</p>
<ul>
<li>La page défile jusqu’au titre ciblé</li>
<li>Le focus se déplace vers le titre pour poursuivre la navigation au clavier</li>
<li>L’URL se met à jour sans recharger la page</li>
</ul>
<h2 id="fonctionnalités-daccessibilité">Fonctionnalités d’accessibilité</h2>
<h3 id="prise-en-charge-des-lecteurs-décran">Prise en charge des lecteurs d’écran</h3>
<ul>
<li>Tous les éléments interactifs disposent d’étiquettes ARIA descriptives</li>
<li>Les repères de navigation sont clairement définis</li>
<li>Liens de saut pour une navigation efficace</li>
<li>Indicateurs de focus visibles en permanence</li>
</ul>
<h3 id="indicateurs-visuels-de-focus">Indicateurs visuels de focus</h3>
<ul>
<li>Contours de focus à contraste élevé sur tous les éléments interactifs</li>
<li>Mise en surbrillance de la section active dans la table des matières</li>
<li>Indication de la page courante dans la navigation</li>
<li>États de survol pour une meilleure visibilité</li>
</ul>
<h3 id="mouvement-réduit">Mouvement réduit</h3>
<p>Le thème respecte le paramètre système <code class="language-plaintext highlighter-rouge">prefers-reduced-motion</code> :</p>
<ul>
<li>Défilement fluide désactivé lorsque demandé</li>
<li>Animations de transition minimisées</li>
<li>Changements de page instantanés plutôt qu’animés</li>
</ul>
<h2 id="gestes-tactiles-et-balayages">Gestes tactiles et balayages</h2>
<p>Sur les appareils tactiles, des commandes gestuelles supplémentaires sont disponibles :</p>
<h3 id="balayer-pour-ouvrir">Balayer pour ouvrir</h3>
<ul>
<li><strong>Balayer vers la droite</strong> depuis le bord gauche : ouvre la barre latérale gauche</li>
<li><strong>Balayer vers la gauche</strong> depuis le bord droit : ouvre la table des matières</li>
</ul>
<h3 id="cibles-tactiles">Cibles tactiles</h3>
<p>Tous les éléments interactifs respectent la taille minimale requise des cibles tactiles (44x44px) pour une meilleure accessibilité.</p>
<h2 id="prise-en-charge-des-navigateurs">Prise en charge des navigateurs</h2>
<p>Les fonctionnalités de navigation au clavier fonctionnent dans :</p>
<ul>
<li>Chrome/Edge 58+</li>
<li>Firefox 55+</li>
<li>Safari 12.1+</li>
<li>Tous les navigateurs mobiles modernes</li>
</ul>
<h2 id="dépannage">Dépannage</h2>
<h3 id="focus-non-visible">Focus non visible</h3>
<p>Si vous ne voyez pas les indicateurs de focus :</p>
<ol>
<li>Vérifiez les paramètres du navigateur concernant le « surlignage de tabulation »</li>
<li>Assurez-vous que du CSS personnalisé n’a pas remplacé les styles <code class="language-plaintext highlighter-rouge">:focus</code></li>
<li>Essayez un autre navigateur</li>
</ol>
<h3 id="raccourcis-ne-fonctionnant-pas">Raccourcis ne fonctionnant pas</h3>
<p>Si les raccourcis clavier ne répondent pas :</p>
<ol>
<li>Assurez-vous que JavaScript est activé</li>
<li>Vérifiez la console du navigateur pour d’éventuelles erreurs</li>
<li>Vérifiez que vous n’êtes pas en train de saisir dans un champ de formulaire</li>
<li>Essayez de rafraîchir la page</li>
</ol>
<h3 id="problèmes-de-lecteur-décran">Problèmes de lecteur d’écran</h3>
<p>Pour les problèmes de lecteur d’écran :</p>
<ol>
<li>Assurez-vous d’utiliser la dernière version du lecteur d’écran</li>
<li>Vérifiez la prise en charge d’ARIA dans votre navigateur</li>
<li>Consultez les <a href="https://www.w3.org/WAI/WCAG21/quickref/">directives WCAG 2.1</a></li>
</ol>
<h2 id="retours">Retours</h2>
<p>Vous avez des suggestions pour améliorer la navigation au clavier ? <a href="https://github.com/bamr87/zer0-mistakes/issues">Ouvrez un ticket</a> ou contribuez à nos <a href="https://github.com/bamr87/zer0-mistakes/blob/main/CONTRIBUTING.md">améliorations d’accessibilité</a>.</p>
<hr />
<p><em>Ce guide respecte les normes d’accessibilité <a href="https://www.w3.org/WAI/WCAG21/quickref/">WCAG 2.1 niveau AA</a>.</em></p>
<h2 id="référence-technique">Référence technique</h2>
<p>Pour les détails d’implémentation (conformité WCAG 2.1 AA, attributs ARIA, gestion des événements clavier, gestion du focus) :</p>
<ul>
<li><a href="https://github.com/bamr87/zer0-mistakes/blob/main/docs/implementation/navigation-redesign.md">Refonte de la navigation → docs/implementation/navigation-redesign.md</a></li>
</ul>
<h2 id="voir-aussi">Voir aussi</h2>
<ul>
<li>[[Features]]</li>
<li>[[Skip-to-Content Accessibility Link]]</li>
<li>[[Sidebar Navigation System]]</li>
</ul>
</div>
</div>
</div>
</div>
</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 :
| Variable | Description |
|---|---|
⟦8⟧ |
Contenu de la page (obligatoire) |
⟦10⟧ |
Titre de la page |
⟦12⟧ |
Description de la page |
⟦14⟧ |
Nom de la mise en page actuelle |
⟦16⟧ |
URL de la page |
⟦18⟧ |
Titre du site |
Remplacer les mises en page du thème
Pour personnaliser une mise en page du thème :
- Copiez la mise en page du thème vers votre répertoire
_layouts/ - Modifiez selon vos besoins
- 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 == 'journals' %}
<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
- Commencez avec
default— Héritez de default pour la cohérence - Gardez les mises en page ciblées — Chaque mise en page doit avoir un seul objectif
- Utilisez les includes — Extrayez les composants réutilisables
- Documentez les mises en page personnalisées — Notez l’objectif et les variables requises
- 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 bidimensionnelles personnalisées avec des exemples interactifs dans le navigateur
Référence technique
Pour les détails destinés aux contributeurs (hiérarchie des mises en page, héritage des templates Liquid, câblage de la barre latérale) :
Voir aussi
- [[Customization]]
- [[Include Components]]
- [[Liquid]]