4 - Mise en place des templates et des assets CSS et JS (Symfony 6)

Par Nouvelle-Techno.fr le 6 février 2022 - Catégories : Symfony

Lors de la préparation de notre projet, nous allons mettre en place un template de base pour nos pages.

Le sujet de cette série n'étant pas le CSS, nous utiliserons bootstrap pour la mise en forme.

Retrait de Webpack Encore

N'étant pas fan de Webpack Encore (avis totalement personnel), je le retire des projets sur lesquels je travaille au moyen de la commande suivante

composer remove webpack

Création du fichier base

Le modèle de page par défaut s'appelle base.html.twig.

Ce fichier peut, bien sûr, porter un autre nom.

Nous allons y insérer les différents fichiers CSS et JS comme ceci

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>{% block title %}Accueil{% endblock %} - Site e-commerce Symfony 6</title>
		<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- Feuilles de styles -->
		<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
        {% block stylesheets %}{% endblock %}
		<link rel="stylesheet" href="{{ asset('assets/css/styles.css') }}">

		<!-- Fichiers JS -->
		<script src="{{ asset('assets/js/bootstrap.bundle.min.js') }}" defer></script>
		{% block javascripts %}{% endblock %}
		<script src="{{ asset('assets/js/scripts.js') }}" defer></script>
	</head>
	<body>
        {% include "_partials/_nav.html.twig" %}

		{% block body %}{% endblock %}

        {% include "_partials/_footer.html.twig" %}
	</body>
</html>

Dans ce fichier, nous avons des blocs, qui seront remplacés par le contenu de notre choix dans les différents fichiers twig de notre projet.

Nous avons également des fichiers partiels qui seront importés dans ce fichier base au moyen de la fonction include.

Fichiers twig

Les fichiers twig de notre projet vont étendre le fichier base et venir surcharger les blocs du fichier base

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

{% block body %}
    <h1>Site e-commerce</h1>
    <p>Bienvenue dans notre boutique</p>
{% endblock %}

Obtenir de l'aide

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

#Javascript #Symfony #css #js #symfony6 #templates #assets #webpack