Découpage de la mise en page
Making-of
Le site se complexifie et parfois atteint certaines limites. Séparons certains éléments de mises en page pour garder le contrôle.
IDEA additional info:
{
- "description": "foo"
+ "description": "Développeur logiciel en quête du sens dans un monde aux ressources limitées."
}Index: _includes/layout.html
<html lang="fr">
<head>
<meta charset="UTF-8">
- <meta name="description" content="Développeur logiciel en quête du sens dans un monde aux ressources limitées.">
+ <meta name="description" content="Le site se complexifie et parfois atteint certaines limites. Séparons certains éléments de mises en page pour garder le contrôle.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Baldir - Découpage de la mise en page</title>
<link rel="alternate" href="/feed.xml" title="Baldir - Flux RSS des articles de blog" type="application/rss+xml">
@@ -53,7 +53,7 @@
display: inline-block;
cursor: pointer;
padding: .5em;
- color: #f1f3f4 ;
+ color: #f1f3f4;
}
.header-skip-content a:not(:focus) {
@@ -73,43 +73,36 @@
}
</style>
<link href="/public/css/a11y-light.min.css" rel="stylesheet"/>
+ <link href="/public/css/style.css" rel="stylesheet"/>
</head>
<body>
<header>
<div class="header-skip-content">
<a href="#skip-content">Contenu</a>
</div>
- <div style="display: inline-block;width:5rem;"><a href="/">Baldir</a></div>
- <nav style="display: inline-block;">
+ <div role="banner" >
+ <h1 style="margin: .25rem .5rem;"><a href="/">Baldir</a></h1>
+ </div>
+ <p style="font-size: small">Développeur logiciel en quête du sens dans un monde aux ressources limitées.</p>
+ <nav style="display: inline-block;" role="menu">
<ul>
<li>
- <a href="/blog">Articles de blog</a>
+ <a href="/blog" role="menuitem">Articles de blog</a>
</li>
<li>
- <a href="/about">À propos</a>
+ <a href="/about" role="menuitem">À propos</a>
</li>
<li>
- <a href="/notes">Notes</a>
+ <a href="/notes" role="menuitem">Notes</a>
</li>
<li>
- <a href="/making-of">Making of</a>
+ <a href="/making-of" role="menuitem">Making of</a>
</li>
</ul>
</nav>
</header>
-<main>
- <div id="skip-content">
- <h1>Découpage de la mise en page</h1>
-
- <p>Le site se complexifie et parfois atteint certaines limites. Séparons certains éléments de mises en page pour garder le contrôle.</p>
-
- </div>
+<main id="skip-content">
+
</main>
</body>
</html>
Ajout _includes/default.html pour les pages standards (ex. articles).
+---
+layout: layout.html
+title: Articles récents
+description: "Développeur logiciel en quête du sens dans un monde aux ressources limitées."
+---
+
+<h1>Découpage de la mise en page</h1>
+
+<div class="cover_image">
+ <img alt="" src="/public/img/cover_images/decoupage-de-la-mise-en-page.png"/>
+</div>
+{% endif %}
+{% if stub %}
+<p>
+ <span class="bold">Note :</span> ceci est une ébauche d’article qui sera complétée dans le futur.
+ Elle a été créée dans le but de résoudre les liens avec d’autres articles.
+ <!-- N’hésite pas à jeter un œil aux liens ci-dessous pour trouver les pages associées.-->
+</p>
+
+{% if description %}<p>{{description}}</p>{% endif %}
+
+{{content}}
Index: _includes/landing.html
+---
+layout: layout.html
+---
+
+
Exemple d'un article de making-of.
Index: making-of/001-echafaudage-avec-11ty.md
+---
+title: "Échafaudage avec 11ty"
+date: 2024-07-16T18:15:46+02:00
+description: "Car il faut bien commencer quelque-part. Je démarre le blog avec Eleventy."
+tags:
+ - 11ty
+---
+
+Je vais initialiser un projet avec [Eleventy (11ty)](https://www.11ty.dev/)
+
+11ty est un [générateur de sites statiques](/glossaire/generateur-de-sites-statiques).
+Une partie de la communauté est particulièrement sensible à la performance, l'accessibilité et le référencement.
+Ils ont mis en place [un tableau de scores](https://www.11ty.dev/speedlify/) pour inviter des créateur-ices de sites à les optimiser
+
+## Mise en place de 11ty
+
+Je crée un fichier markdown `index.md` qui sera la racine du site.
+
+```shell
+echo '# Heading' > index.md
+```
+
+Je lance la commande suivante.
+
+```shell
+npx @11ty/eleventy --serve
+```
+
+Le site est accessible à l'adresse suivante : http://localhost:8080