Blade : Personnalisation Header Navigation et Footer

Blade : Personnalisation Header Navigation et Footer

Laravel Blade permet de structurer vos vues en composants réutilisables, simplifiant la maintenance et la personnalisation de votre application. Voici un guide détaillé pour créer un répertoire 

resources/views/components

contenant les fichiers 

header.blade.php

, 

nav.blade.php

, et 

footer.blade.php

.

Étape 1 : Création du Dossier des Composants

  1. Créer le répertoire via le terminal :bash 
    mkdir resources/views/components

    ou manuellement en naviguant dans le répertoire 

    resources/views

    .

  2. Ajouter les fichiers nécessaires : 
    • header.blade.php
    • nav.blade.php
    • footer.blade.php

Étape 2 : Création des Composants

a) 

header.blade.php

Contenu du fichier :

blade

<header class="bg-blue-600 text-white py-4"> <div class="container mx-auto flex justify-between items-center"> <h1 class="text-lg font-bold">Laravel 11 Project</h1> <p>Welcome to the best app!</p> </div> </header>

Explications :

  • bg-blue-600

    : Couleur d’arrière-plan bleue.

  • text-white

    : Texte en blanc.

  • py-4

    : Marges internes verticales (padding) de 1 rem.

  • flex

    et 

    justify-between

    : Disposition en flexbox pour espacer les éléments.

b) 

nav.blade.php

Contenu du fichier :

blade

<nav class="bg-gray-800 text-white py-2"> <div class="container mx-auto flex justify-between items-center"> <ul class="flex space-x-4"> <li><a href="{{ url('/') }}" class="hover:text-yellow-400">Home</a></li> <li><a href="{{ url('/about') }}" class="hover:text-yellow-400">About</a></li> <li><a href="{{ url('/contact') }}" class="hover:text-yellow-400">Contact</a></li> </ul> <div> @auth <a href="{{ url('/dashboard') }}" class="hover:text-yellow-400">Dashboard</a> @else <a href="{{ route('login') }}" class="hover:text-yellow-400">Login</a> @endauth </div> </div> </nav>

Explications :

  • space-x-4

    : Ajoute un espacement horizontal de 1 rem entre les liens.

  • @auth

    : Vérifie si l’utilisateur est connecté pour afficher un lien vers le tableau de bord.

  • hover:text-yellow-400

    : Change la couleur du texte en jaune au survol.

c) 

footer.blade.php

Contenu du fichier :

blade

<footer class="bg-gray-700 text-white py-4 mt-8"> <div class="container mx-auto text-center"> <p>&copy; {{ date('Y') }} Laravel Project. All rights reserved.</p> <a href="{{ url('/privacy-policy') }}" class="text-blue-400 hover:underline">Privacy Policy</a> </div> </footer>

Explications :

  • mt-8

    : Ajoute une marge supérieure (margin-top) de 2 rem.

  • text-center

    : Centre le texte horizontalement.

  • text-blue-400 hover:underline

    : Lien bleu avec soulignement au survol.

Étape 3 : Intégration des Composants dans le Layout Principal

  1. Créer ou modifier le fichier 
    resources/views/layouts/app.blade.php

    :blade

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>@yield('title', 'Laravel 11 Project')</title> <link rel="stylesheet" href="{{ asset('css/app.css') }}"> </head> <body> <!-- Include Header --> @include('components.header') <!-- Include Navigation --> @include('components.nav') <!-- Main Content --> <main class="container mx-auto py-6"> @yield('content') </main> <!-- Include Footer --> @include('components.footer') <script src="{{ asset('js/app.js') }}"></script> </body> </html>

Explications :

  • @include('components.header')

    : Inclut le fichier 

    header.blade.php

    .

  • @yield('content')

    : Emplacement pour injecter le contenu spécifique à chaque page.

Étape 4 : Configuration de la Route pour la Page d’Accueil

Ajoutez une route dans 

routes/web.php

pour rendre accessible la page d’accueil :

php

use Illuminate\Support\Facades\Route; Route::get('/', function () { return view('home'); });
  1. Créer le fichier 
    resources/views/home.blade.php

    :blade

    @extends('layouts.app') @section('title', 'Home') @section('content') <h1 class="text-2xl font-bold text-center">Bienvenue sur Laravel 11 Project</h1> <p class="text-center mt-4">Commencez à explorer les fonctionnalités.</p> @endsection

Étape 5 : Compilation des Fichiers CSS et JS

  1. Assurez-vous que Laravel Mix compile vos fichiers CSS et JS :bash 
    npm install npm run dev
  2. Votre fichier 
    webpack.mix.js

    doit contenir :javascript

    const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ require('tailwindcss'), ]);

Exemple Complet de Résultat

Page d’accueil accessible via 

/

:

  • Header bleu avec le titre et le slogan.
  • Barre de navigation dynamique (liens vers 
    Home

    , 

    About

    , 

    Contact

    ).

  • Footer contenant la politique de confidentialité et l’année actuelle.

Avantages :

  • Réutilisabilité : Les composants peuvent être utilisés dans plusieurs mises en page.
  • Clarté : Le code est organisé et maintenable.
  • Flexibilité : Vous pouvez personnaliser chaque composant indépendamment.

 

par

Développement, Laravel

📍 VOIR PLUS ... 📍