L'Architecture Moustache

Le chaos du copié-collé

Jusqu'à présent, dans ce labo, j'écrivais tout en dur. Je voulais une carte ? Je copiais 15 lignes de HTML. Je voulais rajouter une page ? Je copiais tout le <head>, le doctype, le header, le footer.

C'est bien pour commencer. C'est l'enfer pour maintenir. Imagine j'ai perdu 10 minutes à changer le nom d'un lien dans le footer sur 5 pages à la main. On va apprendre à se peigner la moustache.

Je vais changer de paradigme. Il existe un moteur Jekyll et sa syntaxe "Moustache" (les doubles accolades {{ }}). L'objectif : Séparer le fond de la forme.

Les deux règles de la Moustache

Il n'y a que deux symboles à comprendre. Pas de JavaScript, pas de backend compliqué. Juste des ordres donnés au compilateur avant d'afficher la page.

L'Action (Le cerveau)

{% action %}

Les accolades avec des pourcentages. Ça donne un ordre au compilateur : faire une boucle, vérifier une condition (if), ou inclure un fichier. Ça ne s'affiche jamais à l'écran.

L'Affichage (La voix)

Les doubles accolades simples. C'est pour "recracher" de la donnée dans le HTML. Un titre, une couleur, un calcul. C'est ce que les personnes verront.

L'organisation (Le Tri Sélectif)

Avant d'écrire du code, il faut ranger sa chambre. Jekyll impose une architecture stricte pour s'y retrouver. Si tu as bien fait ton travail, la racine de ton projet ne contiendra presque plus rien, à part les dossiers suivants :

_layouts/ : Les moules (les squelettes de tes pages avec le head, body, etc).
_includes/ : Les pièces de montage (un bouton, une barre de navigation, une carte).
_data/ : Le cerveau (des fichiers texte avec des données brutes qu'on peut appeler. Le niveau 2 en parle mieux. Là je suis en Lvl 1...)

La refonte étape par étape

Voici exactement comment on passe d'un site bordélique à une architecture optimisée, tout en restant 100% statique. On va y aller pas à pas.

1

Créer le Layout (Le Moule Dynamique)

On crée un nouveau fichier _layouts/default.html. Ce sera la coquille de TOUTES nos pages. Mais attention, on ne va pas écrire le titre en dur (<h1>Lab OKLCH</h1>), sinon toutes nos pages auront le même titre !

À la place, on prépare des "trous" que la page viendra remplir grâce à la syntaxe {{ page.variable }}.

<!DOCTYPE html>
<html lang="fr" class="no-js">
<head>
  <title>{{ page.title }} | Lab OKLCH</title>
</head>
<body>
  <div class="container">
   <header>
    
    <h1>{{ page.title }}</h1>
    <p>{{ page.subtitle }}</p>
   </header>

   
   {{ content }}

   <footer>...</footer>
  </div>
</body>
</html>

Le layout est posé. Il est prêt à recevoir des informations externes pour s'auto-compléter.

2

Le Front Matter (Le Tableau de bord)

Maintenant, tu prends la page que tu es en train de créer (par exemple moustache.html). Tu supprimes TOUT le body, le head, le footer. Tu ne gardes QUE les sections de contenu.

Tout en haut de ce fichier, entre deux lignes de tirets ---, tu vas envoyer tes variables au Layout. C'est ça, le Front Matter.
Rappel toi. On a dit que {% %} voulait dire "exécuter une commande Jekyll" et {{ }} voulait dire "afficher une variable"
C'est ce qu'on a fait dans le layout. on a écrit page.title et page.subtitle
et c'est entre quoi comme symbole ?
{{ }}
Donc il faut qu'on définisse ces variables dans le Front Matter.
C'est pourquoi notre fichier ne commence plus comme d'habitude. Mais, pour par exemple moustache.html, on écrit en haut :

---
layout: default
title: "L'Architecture Moustache"
subtitle: "Comment j'ai arrêté de copier-coller des divs."
---

<section class="doc-section">
<h2>Le chaos du copié-collé</h2>
<p>Jusqu'à présent...</p>
</section>

La mécanique : Jekyll lit le Front Matter. Il voit layout: default.
Il ouvre default.html. Partout où il voit
{{ page.title }},
il remplace par "L'Architecture Moustache".
Et à la place de
{{ content }},
il colle toutes tes balises qui sont dans <section>.

3

L'Include (Nettoyer le Moule)

Notre fichier _layouts/default.html est super, mais il contient encore tout le menu de navigation et le gros footer codés en dur. Si le menu devient énorme, le fichier Layout deviendra illisible.

On crée un fichier _includes/nav.html. Dedans, on met UNIQUEMENT la balise <nav>...</nav>. Rien d'autre.

On crée un _includes/footer.html avec juste le footer.

Et on met à jour notre Layout pour "appeler" ces morceaux :

<header>
  <h1>{{ page.title }}</h1>
  <p>{{ page.subtitle }}</p>
  
  {% include nav.html %}
</header>

{{ content }}


{% include footer.html %}

Bilan de cette étape

À ce stade :

Si je veux créer un nouvel article, j'ai juste à remplir le Front Matter et écrire mon texte. 0 ligne de structure HTML à taper.
Si je dois changer la balise meta de tout mon site, j'ai UN fichier (_layouts/default.html).
Si je dois ajouter un lien dans le menu, j'ai UN fichier (_includes/nav.html).

<p><!DOCTYPE html>
<html lang="fr" class="no-js">
{% include head.html %}
<body>
<div class="container">
{% include header.html %}
<section class="doc-section">
<h2>Le chaos du copié-collé</h2>
<p>Jusqu'à présent...</p></section>
{% include footer.html %}
</div>
</body>
</html>

Voila comment se termine cette étape. Avec un layout qui n'a presque plus de balises codées en dur.
Elles se trouve dans les fichiers _includes/

C'est une architecture plus propre, plus maintenable, plus scalable. Et cerise sur le gateau ! J'ai imbriqué des includes dans des includes. Par exemple, le header inclut la nav.
Donc si je change le header, la nav se met à jour automatiquement sur toutes les pages.

On vient de nettoyer un peu le lab. On peut presque rendre dynamique le contenu. Mais ça, c'est pour demain...
on verra comment on peut automatiser le menu de navigation et les composants grâce au dossier _data et aux boucles. La vraie programmation commence.