Mon site est vachement moche ! 😡
Que pour le moment !
On va voir ici comment ajouter un peut de CSS et Javascript à notre site pour gérer le rendu et les interactions dynamiques avec la page !
Les blocks
Vous vous rappelez du fichier template/base.html.twig ?
Nous avions deux blocs avec des noms spéciaux :
{% block stylesheets %}{% endblock %}et
{% block javascripts %}{% endblock %}Dans la plupart des projets symfony avec twig, vous allez retrouver ces blocs car ils sont généralement utilisés pour héberger les feuilles des style ("Stylesheet" en anglais) , et le javascript pour le second.
Dans ces blocs vous allez pouvoir appeler tous vos fichiers css ainsi que vos fichiers javascript pour faire tourner votre site.
Vous pouvez très bien les renommer comme vous le souhaitez, mais gardez quand même un nom explicite, appelez son bloc css
tartiflettene vous aidera pas vous ni vote collègue qui va reprendre le projet
Donc nous pouvons très bien transformer notre template base.html.twig comme cela :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>Et hop, on a désormais bootstrap sur tout notre site 😎
Si vous avez un problème n'hésitez pas à vider le cache symfony avec :
php bin/console cache:clearouphp bin/console cache:clear --env=prodsi vous êtes en mode production
Ajouter ses propres fichiers
Bon pour l'instant on a que ajouté bootstrap, ce qui est pratique mais pas génial en soit, on ne peut rien personnaliser !
Par contre si on se rappelle bien, on sait que l'on a un dossier qui est destiné à recevoir des fichiers publiques... le dossier public!
C'est le point d'entrée de notre site, mais aussi le moyen de stocker des fichiers publiques de type css, javascript, images... et plus encore.
Allez dans le dossier public et créez à l'intérieur un dossier css, ainsi que le fichier style.css dans le dossier que vous venez de créer.
Ajoutez ce contenu dans le fichier style.css :
body {
background: red
}Je sais c'est pas terrible comme css, mais c'est pour l'exemple, vous pourrez vous torturer autant que vous voulez sur le CSS lors des projets !
Ensuite modifier le template base.html.twig de façon à ajouter notre fichier :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="/css/style.css">
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>Normalement vous devez avoir une belle page rouge qui vous éclate les yeux !
Si ce n'est pas le cas, n'hésitez pas à nettoyer le cache symfont avec
php bin/console cache:clear, j'insiste mais cette commande règle généralement pas mal de soucis !
Pour le javascript, c'est la même histoire, créez un dossier javascript et mettez y vos fichiers javascript.
Ensuite, ajoutez dans le bloc javascripts vos fichiers avec en source /javascript/[nom du fichier].js.
En soit c'est la même chose, mais dans un bloc différent.
Pourquoi commencer avec un / on ne peut pas tout simplement faire css/style.css ?
Non, car ça va très bien marcher jusqu'au jour où vous allez ajouter un niveau de navigation dans votre site par exemple :
www.pestorosso.fr/shop/pesto, et là malheur votre css, javascript, plus rien ne se charge, et c'est normal !
Ne pas mettre de / devant l'url indique que le chemin est relatif au chemin actuel, donc il va aller chercher les ressources comme ça : www.pestorosso.fr/shop/css/style.css, sauf que vous votre fichier n'est pas dans public/shop/css/style.css mais dans public/css/style.css.
L'adresse correcte pour accéder à votre css serait la suivante : www.pestorosso.fr/css/style.css
Ce / sert donc à viser la partie racine de votre site (c'est à dire le dossier public dans Symfony !), de cette façon ou que vous soyez dans votre navigation, la ressource appelée sera toujours www.pestorosso.fr/css/style.css
Cette explication étant bien trop longue et complexe, je vais vous montrer comment ne pas avoir besoin d'y penser grâce à un autre paquet symfony 😉
La fonction assets de symfony
La fonction assets de symfony permet de vous simplifier la vie, elle va écrire l'url de votre ressource à votre place, vous avez juste à la renseigner à partir du dossier /public
Comment l'utiliser
Cette fonction va intervenir dans nos templates twig !
Remplacez tous vos appels de fichiers en les entourants de {{ asset('votre ressource') }}, un petit exemple ici :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>C'est pareil pour les javascript ou tout autre ressource dont vous allez avoir besoin (images, fonts, etc...), par contre on change pas nos liens bootstrap ce sont ceux en ligne !
⚠️ Attention, si vous testez ça maintenant ça ne vas pas marcher ! La fonction asset nécessite une receipe pour l'utiliser
Installer la fonction asset
Bon, ici c'est comme ce que l'on a fait aupravant pour ajouter des packs / receipes et autres composants spécifiques de Symfony, on utilise ce bon vieux composer :
composer require assetÀ partir de là, votre page devrait de nouveau afficher votre belle page ROUGE.
Afin de vous facilier la vie, et tirer partie des autres fonctionnalités de assets, utilisez cette petite fonction sur tous les fichiers statiques que vous avez (c'est à dire: css, javascript, images, et d'autres encore).
Conclusion
Si vous ne devez retenir qu'une seule chose de cette page, c'est l'utilisation de la fonction asset dans twig pour vous faciliter la vie !
@GarnierKristen