Jour 5 - Structurer le layout Twig du blog pour une lecture confortable

Un blog technique doit être agréable à lire. Si ton template est désordonné, même un bon contenu perd en impact.

On va garder Twig simple, mais propre: blocs clairs, composants et classes CSS stables.

Objectif d’apprentissage

Transformer des templates bruts en une vraie expérience de lecture: hiérarchie visuelle, composants réutilisables et cohérence éditoriale.

Ce que tu vas pratiquer aujourd’hui

• Créer une base Twig commune au blog.
• Construire une carte article réutilisable.
• Améliorer la lisibilité sur mobile.
• Préparer les zones pour SEO et partage social.

1. Créer un layout dédié au blog

Sépare le layout du blog du reste du site quand les besoins UX sont différents.

Tu gardes ainsi une base claire pour les évolutions futures.

{# templates/blog/layout.html.twig #}
{% extends 'base.html.twig' %}

{% block body %}
    <section class="resume-blog">
        <div class="container resume-container">
            {% block blog_content %}{% endblock %}
        </div>
    </section>
{% endblock %}

2. Créer un composant de carte article

Un composant unique évite les incohérences entre la homepage, la page blog et les listes filtrées.

C’est aussi plus facile à maintenir quand le design évolue.

{# templates/blog/_post_card.html.twig #}
<article class="resume-blog-card">
    <a href="{{ path('app_blog_show', {slug: post.slug}) }}">
        <h2>{{ post.title }}</h2>
    </a>
    <p>{{ post.excerpt }}</p>
    <small>{{ post.readingTime }} min · {{ post.publishedAt|date('d/m/Y') }}</small>
</article>

3. Adapter l’espacement pour la lecture

Le confort de lecture dépend énormément de la largeur de colonne, du line-height et des marges verticales.

Un simple réglage CSS peut changer totalement la perception qualité.

.resume-blog-article {
    max-width: 820px;
    margin-inline: auto;
    line-height: 1.75;
}

.resume-blog-article h2 {
    margin-top: 2rem;
}

Checklist de fin de session

• Layout blog séparé et lisible.
• Composant carte réutilisable.
• Page article confortable en desktop et mobile.
• Structure Twig claire pour la suite.

Erreurs fréquentes à éviter

• Sauter la vérification finale parce que “ça marche chez moi”.
• Mélanger trop de logique dans le controller au lieu de garder un flux clair.
• Oublier la cohérence entre la donnée, le template Twig et le comportement en production.

Pourquoi cette étape compte en conditions réelles

Dans un vrai projet client, chaque étape technique doit rester compréhensible par l’équipe, duplicable sur un autre environnement et fiable dans le temps. Ici, l’objectif est de transformer la théorie en un flux de travail concret, avec des décisions simples que tu peux défendre en revue de code.

Si tu appliques sérieusement les points du jour (créer une base twig commune au blog.), tu réduis la dette technique dès le départ et tu facilites la suite: SEO, publication, maintenance et déploiement. C’est exactement la différence entre un blog “démo” et un blog exploitable en production.

Mini plan de révision

• Reprends ce point et explique-le à voix haute comme si tu faisais un code review : Créer une base Twig commune au blog.
• Reprends ce point et explique-le à voix haute comme si tu faisais un code review : Construire une carte article réutilisable.
• Reprends ce point et explique-le à voix haute comme si tu faisais un code review : Améliorer la lisibilité sur mobile.

Exercice rapide

Ajoute un bloc auteur en bas d’article avec nom, rôle et lien vers la page contact.

Et demain ?

Demain, on ajoute les formulaires de création/édition avec validation et messages utilisateur propres.