2- Lier les fichiers CSS et Javascript avec Symfony 5.1

Dans ce tutoriel, nous allons utiliser le framework CSS Axentix et intégrer les fichiers CSS et Javascript dans notre projet Symfony 5.1.



Le template de base



Le fichier template de base est situé dans le dossier "templates" et s'appelle "base.html.twig". Il est possible d'utiliser plusieurs modèles de base en fonction des besoins.



Le fichier par défaut contient le code suivant




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>

{% block stylesheets %}{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>


Il est composé de différents "blocs" qui correspondent à des emplacements dans lesquels nous allons pouvoir "injecter" du contenu.




  • title : contiendra le titre

  • stylesheets : le contenu css

  • body : le contenu de la page

  • javascripts : le javascript de la page



Nous allons ajouter les balises pour le css et le javascript avant les blocs correspondants (choix personnel), permettant d'en profiter sur toutes les pages.




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/axentix@0.5.3/dist/css/axentix.min.css">
{% block stylesheets %}{% endblock %}
</head>
<body>
{% block body %}{% endblock %}

<script src="https://cdn.jsdelivr.net/npm/axentix@0.5.3/dist/js/axentix.min.js"></script>
{% block javascripts %}{% endblock %}
</body>
</html>


Nous pourrons ensuite ajouter nos propres fichiers CSS et JS après les blocs correspondants, permettant de "surcharger" le contenu des fichiers chargés auparavant.




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/axentix@0.5.3/dist/css/axentix.min.css">
{% block stylesheets %}{% endblock %}
<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
</head>
<body>
{% block body %}{% endblock %}


<script src="https://cdn.jsdelivr.net/npm/axentix@0.5.3/dist/js/axentix.min.js"></script>
{% block javascripts %}{% endblock %}
<script src="{{ asset('js/scripts.js') }}"></script>
</body>
</html>


Comme vous pouvez le remarquer, nous importons les fichiers en utilisant une fonction appelée "asset" qui permet de générer un chemin permanent depuis le dossier "public" de notre projet et d'éviter les erreurs sur certaines routes.



Enfin, nous ajouterons le code HTML commun à toutes les pages autour du bloc "body" qui contiendra le contenu de la page elle-même




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/axentix@0.5.3/dist/css/axentix.min.css">
{% block stylesheets %}{% endblock %}
<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
</head>
<body>
<header>
<nav class="navbar primary">
<a href="{{ path('app_home') }}" class="navbar-brand">PetitesAnnonces</a>
<div class="navbar-menu ml-auto">
<a class="navbar-link" href="#">Accueil</a>
<a class="navbar-link" href="#">Link 2</a>
<a class="navbar-link" href="#">Link 3</a>
<a class="navbar-link" href="#">Link 4</a>
</div>
</nav>
</header>

<main>
{% block body %}{% endblock %}
</main>

<footer class="footer primary">
Copyright © 2019 - Example
</footer>



<script src="https://cdn.jsdelivr.net/npm/axentix@0.5.3/dist/js/axentix.min.js"></script>
{% block javascripts %}{% endblock %}
<script src="{{ asset('js/scripts.js') }}"></script>
</body>
</html>


Les fichiers des pages



Chaque page correspondra à un fichier Twig contenu dans le dossier templates. Ces fichiers auront la structure suivante




{# Fichier "template" dans lequel injecter le contenu #}
{% extends 'base.html.twig' %}

{# Titre de la page #}
{% block title %}Titre{% endblock %}

{# Bloc destiné à recevoir le CSS spécifique à la page #}
{% block stylesheets %}

{% endblock %}

{# Bloc destiné à recevoir le contenu HTML de la page #}
{% block body %}

{% endblock %}

{# Bloc destiné à recevoir le javascript spécifique à la page #}
{% block javascripts %}

{% endblock %}


Obtenir de l'aide



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

2- Lier les fichiers CSS et Javascript avec Symfony 5.1
Article publié le - Modifié le

Catégories : CSS Javascript PHP Tutoriel Symfony Live-Coding symfony5

Mots-clés : Tutoriel Javascript Symfony Live-Coding css css3 symfony5

Partager : Partager sur Facebook Partager sur Twitter Partager sur LinkedIn