Publié le : 30/07/2021
Layouts et Assets pour les Vues dans Symfony
Pour avoir du code HTML valide pour Symfony, il faut définir les Layouts et les Assets de la Vue dans l’architecture MVC.
Héritage dans Twig
Avec Twig, nous avons la possibilité d’hériter d’un autre template. Ce qui permet de ne définir dans son template que les éléments qui change. Et ainsi de ne pas modifier les éléments qui ne change pas ou presque. Les éléments qui ne change pas ou presque sont les :
- menus ;
- footers ;
- la place du logo.
Pour faire de l’héritage avec Twig, on entre le code suivant :
{% extends 'base.html.twig' %}
Ainsi le code de default.html.twig (il se trouve dans l’article : Twig le moteur moderne de template de Symfony) deviendra :
{% extends 'base.html.twig' %}
{% block body %}
<h1>Hello World</h1>
{{ name }} - {{ "now"| date("d/m/Y H:i:s")}}
{% endblock %}
Il est important de noter que dans le fichier Twig base.html.twig il y a le bloc body. C’est ce que l’on retrouve avec le code ci-dessous :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{# Run `composer require symfony/webpack-encore-bundle`
and uncomment the following Encore helpers to start using Symfony UX #}
{% block stylesheets %}
{% endblock %}
{% block javascripts %}
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
Ce code a été généré par Symfony lors de l’installation du bundle Twig.
Ajout des layouts et assets dans la vue de Symfony
Pour ajouter les layouts et assests, nous allons travailler dans le répertoire public. Dans ce répertoire, nous allons ajouter les répertoires images et css.
Ensuite dans notre fichier twig (default.html.twig), nous allons ajouter les lignes suivantes :
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('/css/css.css') }}" />
{% endblock %}
Mais pour que cela fonctionne, il faut installer l’asset avec la commande :
$ composer req asset
