2 - Live Coding : Lier les fichiers CSS et Javascript avec Symfony 5.1

Par Nouvelle-Techno.fr le 17 juin 2020 - Catégories : CSS Javascript PHP Tutoriel Symfony Live-Coding

Lire l'article sur le site d'origine

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.

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

#Tutoriel #Javascript #Symfony #Live-Coding #css #css3