Ajouter des fichiers spécifiques à votre page

Parfois, une page a besoin d'avoir des scripts js ou fichiers css spécifiques, que les autres n'ont pas besoin d'avoir.

Ici assets ne sera pas notre grand sauveur, mais il fera parti de l'équation pour faire ça !

Utilisation des blocs

Vous vous rappelez des blocs ?

Hé bien sachez que vous pouvez les surcharger ! C'est à dire remplacer le contenu du bloc par un contenu défini chez un template enfant.

Dans un premier temps, on serait peut être tenté de faire ce genre de choses :

• Copier les ressources du template parent
• Coller dans le bloc javascript ou css de l'enfant
• Ajouter nos ressource au bloc dans l'enfant
• TADAAAAA! Le tour est joué !

Vous auriez raison, parceque ça marche, mais le jour où vous devez changer de version de bootstrap par exemple, vous allez devoir repasser sur tous les fichiers où il y a une ressource spécifique pour mettre à jour notre site.

Flemmard comme je suis, c'est beaucoup trop de travail pour si peu !

Heureusement, les blocs de twig permettent de faire quelque chose d'un peu plus propre.

Ajouter le contenu du bloc parent dans le notre

Afin de ne pas avoir à copier / coller dans tous les fichiers tels des cowboys, nous pouvons utiliser la fonction parent() dans un bloc twig : Documentation

La fonction parent nous permet d'afficher le contenu du parent là où l'on écrit cette fonction, sans avoir à le réécrire nous même !

Un petit exemple dans notre fichier template/homepage.html.twig :

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

{% block title %}Homepage !{% endblock %}

{% block body %}
    <h1>{{ title }}</h1>
{% endblock %}

{% block javascripts %}
    {{ parent() }} // on insère les scripts défini dans le template base.html.twig (le parent de notre template cf extends en haut)

    //ci dessous on défini notre nouveau script
    //on oublie pas d'utiliser assets si c'est un script local
    
    <script src="{{asset('javascript/bousin3000.js')}}"> </script>
{% endblock%}

Vous pouvez enlever {{ parent() }} si vous ne souhaitez pas copier les élément du bloc parent, mais placez le toujours dans un premier temps, ça vous évitera de dupliquer des choses sans le vouloir !

Ici nous avons vu un exemple avec le blocs javascripts, mais ça aurait pu marcher pour n'importe quel bloc, que ce soit body, title ou encore stylesheets. À partir du moment où c'est un bloc, c'est possible !

Comme toujours, je vous conseille d'aller faire un tour sur la documentation de twig pour voir ce qui est possible de faire

Conclusion

Vous savez désormais surcharger des blocs pour ajouter votre contenu, en intégrant les éléments parent ou en les remplaçant tout simplement.