3 - Les templates et Assets (Symfony 7)

Temps de lecture : 12 minutes environ.

Bienvenue dans ce tutoriel consacré aux templates et aux assets, incluant les fichiers JS, CSS et les images, dans notre série Symfony 7 pour le projet OpenBlog.

Ce tutoriel fait suite à notre précédente vidéo où nous avons créé un contrôleur et exploré les templates. Aujourd'hui, nous approfondirons la syntaxe Twig et la gestion des assets.

Introduction aux Fichiers Twig

Les fichiers Twig sont des modèles de pages HTML dans lesquels nous pouvons inclure des données provenant de nos contrôleurs. Voici la structure de base d'un fichier Twig :

{% extends 'base.html.twig' %}



{% block title %}Hello{% endblock %}



{% block body %}

    <h1>{{ message }}</h1>

{% endblock %}
  • extends : Utilisé pour indiquer que notre template repose sur un modèle de base (base.html.twig).
  • Blocs (block) : Permettent de définir des sections modifiables dans nos templates. Les blocs peuvent contenir du contenu par défaut qui sera remplacé si redéfini dans les templates enfants.

Configuration du Template de Base

Le fichier base.html.twig, créé par défaut par Symfony, sert de modèle principal pour nos pages. Il contient des sections importantes telles que doctype, html, head, et body.

Voici un exemple simplifié de base.html.twig :

<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{% block title %}Welcome{% endblock %}</title>

    {% block stylesheets %}{% endblock %}

    {% block javascripts %}{% endblock %}

</head>

<body>

    {% block body %}{% endblock %}

</body>

</html>

Inclusion de CSS et JavaScript

Pour ajouter des fichiers CSS et JS, nous utilisons les blocs stylesheets et javascripts. Voici comment inclure ces fichiers dans votre template :

{% block stylesheets %}

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

{% endblock %}



{% block javascripts %}

    <script src="{{ asset('js/app.js') }}"></script>

{% endblock %}

Utilisation de Variables et de Conditions

Twig permet également l'utilisation de variables et de conditions dans vos templates. Par exemple :

{% if showName %}

    <h1>Hello, {{ name }}!</h1>

{% else %}

    <h1>Bonjour!</h1>

{% endif %}

Boucles dans Twig

Vous pouvez utiliser des boucles pour afficher des listes de données :

{% for user in users %}

    <p>{{ user.name }}</p>

{% endfor %}

Gestion des Assets

Symfony 7 introduit l'Asset Mapper, facilitant la gestion des fichiers CSS et JS. Voici comment structurer vos assets :

  1. Créer les dossiers : Placez vos fichiers CSS dans assets/styles et vos fichiers JS dans assets/js.
  2. Configurer l'Asset Mapper : Assurez-vous que votre fichier importmap.php est correctement configuré.

Exemple de fichier importmap.php :

<?php



return [

    'imports' => [

        'app' => '/assets/js/app.js',

    ],

];

Exemple de Code pour Inclure un Asset

Pour inclure un asset dans votre template, utilisez la fonction asset :

<img src="{{ asset('images/logo.png') }}" alt="Logo">

Exemple Complet : Utilisation des Blocs et des Assets

{% extends 'base.html.twig' %}



{% block title %}Accueil{% endblock %}



{% block stylesheets %}

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

{% endblock %}



{% block body %}

    <nav>

        <img src="{{ asset('images/logo.png') }}" alt="Logo OpenBlog">

        <ul>

            <li><a href="{{ path('home') }}">Accueil</a></li>

            <li><a href="{{ path('articles') }}">Articles</a></li>

            <li><a href="{{ path('categories') }}">Catégories</a></li>

            <li><a href="{{ path('authors') }}">Auteurs</a></li>

            <li><a href="{{ path('contact') }}">Contact</a></li>

            <li><a href="{{ path('search') }}">Recherche</a></li>

        </ul>

    </nav>



    <div class="content">

        {% for article in articles %}

            <h2>{{ article.title }}</h2>

            <p>{{ article.summary }}</p>

        {% endfor %}

    </div>



    <footer>

        <p>&copy; 2023 OpenBlog. <a href="{{ path('legal_mentions') }}">Mentions légales</a></p>

    </footer>

{% endblock %}



{% block javascripts %}

    <script src="{{ asset('js/app.js') }}"></script>

{% endblock %}

Conclusion

Nous avons exploré les templates Twig, l'inclusion de CSS et JS, et la gestion des assets avec Symfony 7. La prochaine fois, nous verrons comment créer la base de données de notre projet.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.

3 - Les templates et Assets (Symfony 7)
Article publié le

Catégories : Symfony twig Symfony 7

Mots-clés : Javascript css js twig assets chartscss Symfony 7

Partager : Partager sur Facebook Partager sur Twitter Partager sur LinkedIn